js小功能

最新推荐文章于 2022-06-07 08:58:32 发布

大山深处修炼多年的小龙虾丶

最新推荐文章于 2022-06-07 08:58:32 发布

阅读量494

点赞数

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/A350204530/article/details/54089922

js 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何通过JavaScript实现网页元素的交互操作，包括删除确认对话框、按钮点击跳转请求事件等，并提供了解决网页图片加载失败的多种方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是怕忘记,用的时候又要搜...

删除确认对话框:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>确认是否删除</title>
<script type="text/javascript">
function del(){
if(!confirm("确认要删除？")){
window.event.returnValue = false;
}
}
</script>
</head>
<body>
<a href="http://www.baidu.com" onclick="return del()">删除</a>
</body>
</html>

button點擊跳轉請求事件：

1、onclick="javascript:window.location.href='aa.htm' "

2、onclick="location='URL' "

3、onclick="window.location.href='?id= ' "

<span id="tiao">3</span><a href="javascript:countDown"></a>布丁足迹;秒后自动跳转……<meta http-equiv=refresh content=3;url='/search/billsearch.jsp'</ul>

<script language="javascript" type="">
function countDown(secs){
  tiao.innerText=secs;
  if(--secs>0)
   setTimeout("countDown("+secs+")",1000);
  }
  countDown(3);
</script>

　　按钮式：

　　链接式：

　　<a href="javascript:history.go(-1)">返回上一步</a>

　　<a href="<%=Request.ServerVariables("HTTP_REFERER")%>">返回上一步</a>

　　直接跳转式：

　　<script>window.location.href='http://www.ddhbb.com';</script>

　　开新窗口：

JS跳转页面参考代码
第一种：
<script language="javascript" type="text/javascript">
window.location.href="login.jsp?backurl="+window.location.href;
</script>
第二种：
<script language="javascript">
alert("返回");
window.history.back(-1);
</script>
第三种：
<script language="javascript">
window.navigate("top.jsp");
</script>
第四种：
<script language="JavaScript">
self.location=’top.htm’;
</script>
第五种：
<script language="javascript">
alert("非法访问！");
top.location=’xx.jsp’;
</script>

＝＝＝＝＝javascript中弹出选择框跳转到其他页面＝＝＝＝＝
<script language="javascript">

</script>

＝＝＝＝＝javascript中弹出提示框跳转到其他页面＝＝＝＝＝
<script language="javascript">

</script>

当网页图片不存在时的处理方法

例如，有以下代码：

[html] view plain copy

<img src="图片的url地址" alt="图片XX"/>

当在页面显示的时候，万一图片被移动了位置或者丢失的话，将会在页面显示一个带X的图片，很是影响用户的体验。即使使用alt属性给出了"图片XX"的提示信息，也起不了多大作用。

其实，可以这样处理：当图片不存在的时候，会触发onerror事件，我们可以在该事件中做一下补救的工作，比如：

1、让这个图片元素隐藏：

[html] view plain copy

<img src="图片的url地址" alt="图片XX" onerror="this.style.display='none'"/>

2、用默认的图片替换：

[html] view plain copy

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址'"/>

注意：如果使用不当，在IE内核的浏览器下会造成死循环。比如：当【默认图片的url地址】也加载不成功（比如网速比较慢的时候）或不存在的话，就会反复的加载，最后造成堆栈溢出错误。

因此，需要用下面两种方法解决：

a、更改 onerror 代码为其它处理方式或者确保 onerror 中的 默认图片 足够小，并且存在。

b、控制onerror事件 只触发一次 ，需要增加这句话：this.onerror=null; 增加后如下：

[html] view plain copy

<img src="图片的url地址" alt="图片XX" onerror="this.src='默认图片的url地址;this.onerror=null'"/>

经测试，上面的方法在IE各个版本及谷歌、火狐浏览器中都支持。

以上方法适合<img>较少的情况，如果要处理的<img>比较多的话，可以做一个全局性的设置：

可以写一个js脚本，让其遍历页面所有的<img>标签，给每个标签添加error事件，当任何地方的图片不存在时都可以进行统一的处理。

其实，jQuery就有这个方便的功能，可以参考此处： http://www.w3school.com.cn/jquery/event_error.asp 不过，经本人测试，在IE下面好像不好使。（大家可以用IE浏览器打开上面的网址试试）

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载！</b></p>");
});
});
</script>
</head>
<body>
<img src="errorimg.gif" />
<img src="errorimgS.gif" />
<img src="errorimgF.gif" />
<p>XAML如果上面的图像没有正确地加载，会被替换为一段 "图片未加载" 的文本。</p>
</body>
</html>

input date时间类型

<input type="date">这就会自带日期控件了。。。

HTML5 拥有多个供选择日期和时间的新的输入类型：
date - 选择日、月、年
month - 选择月、年
week - 选择周、年
time - 选择时间（时、分）
datetime - 选择时间、日期、月、年（UTC 时间）
datetime-local - 选择时间、日期、月、年（本地时间）