JavaScript一些常用的示例1-阿里云开发者社区

JavaScript一些常用的示例1

2017-11-10 1010

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

1.由于身体原因，最近辞职待业，所以写点博客，希望对朋友们的学习有用，都是基础性的东西。从前面的，你可以看到我写的很详细。但是，2个礼拜后要准备找工作了，故以后我就把重要的东西或者有建设性的例子给大家总结一下，不再非常详细的介绍概念等了。如果你有什么不同或者疑问，可以通过扣扣或者E-mail联系我，hanchaohan@126.com

谢谢，O(∩_∩)O~

1.点击关闭按钮，整个层消失。邮件里用的比较多。

源码：（带颜色的字体要多加注意！！）

<!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=GBK" />
<title></title>
<style type="text/css">
#message{
background:#cdeb8b;
border:1px solid #000;
height:30px;
line-height:30px;
padding-left:10px;
font-size:18px;
postition:relative;
}
#message .close{
width:15px;
height:15px;
position:absolute;
right:10px;
top:10px;
cursor:pointer;
}
</style>
<script type="text/javascript">
/*因为close()为关键字函数。所以起名为：closeDiv()*/
function closeDiv() {
var msg = document.getElementById("message");
msg.style.display = "none"; /*注意此处对display的操作！！*/
}
</script>
</head>
<body>
<div id="message">
<div class="close" onclick="closeDiv()">X</div>
</div>
</body>
</html>

2.图片的轮换：（电子商务网站常用的）

咱可以做一个，也许没有当当的好看，你可以自己完善啊！

源码：

<!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=GBK" />
<title></title>
<script type="text/javascript">
//声明几个变量
var now = 2;
var max = 7;
var t ;
/*图片的自动轮换*/
function changeAd() {
//显示当前的图片，注意下面对变量的使用！！
document.getElementById("ad"+now).style.display = "block";
//隐藏非当前的图片
for(var index=1; index <= 7; index++) {
if(index != now) {
document.getElementById("ad"+index).style.display = "none";
}
}
if(now == max) {
now = 1;
} else {
now++;
}
//让图片每两秒轮换一下
t = setTimeout("changeAd()",2000);
}
/*点击图片编号时，显示该图片*/
function showNow(n) {
now = n;
document.getElementById("ad"+now).display = "block";
for(var index=1; index <= 7; index++) {
if(index != now) {
document.getElementById("ad"+index).style.display = "none";
}
}
clearTimeout(t); //重新开始图片的轮换
changeAd()
}
</script>
<style type="text/css">
#ima{
position:relative;
width:548px;
height:177px;
}
#butt{
position:absolute;
bottom:0px;
right:0px;
}
input{
cursor:pointer;
}
</style>
</head>
<body onload="changeAd()">
<div id="ima">
<div id="ad1">
<img src="images/1.jpg" alt="" />
</div>
<div id="ad2" style="display:none">
<img src="images/2.jpg" alt="" />
</div>
<div id="ad3" style="display:none">
<img src="images/3.jpg" alt="" />
</div>
<div id="ad4" style="display:none">
<img src="images/4.jpg" alt="" />
</div>
<div id="ad5" style="display:none">
<img src="images/5.jpg" alt="" />
</div>
<div id="ad6" style="display:none">
<img src="images/6.jpg" alt="" />
</div>
<div id="ad7" style="display:none">
<img src="images/7.jpg" alt="" />
</div>
<div id="butt">
<input name="ad1" type="button" value="1" onclick="showNow(1)" />
<input name="ad1" type="button" value="2" onclick="showNow(2)" />
<input name="ad1" type="button" value="3" onclick="showNow(3)" />
<input name="ad1" type="button" value="4" onclick="showNow(4)" />
<input name="ad1" type="button" value="5" onclick="showNow(5)" />
<input name="ad1" type="button" value="6" onclick="showNow(6)" />
<input name="ad1" type="button" value="7" onclick="showNow(7)" />
</div>
</div>
</body>
</html>

3.秒表

源码：

<!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=GBK" />
<title></title>
<script type="text/javascript">
var num = 0;
var t;
function runMethod() {
document.getElementById("content").innerHTML = num;
num++;
t = setTimeout("runMethod()",5); //，此处控制秒表的快慢
}
function stopMethod() {
clearTimeout(t); //注意clearTimeout();的使用
num = 0;
}
</script>
</head>
<body>
<div id="content" style="font-size:50px;"></div>
<input type="button" value="run" onclick="runMethod()" />
<input type="button" value="stop" onclick="stopMethod()" />
</body>
</html>

本文转自韩立伟 51CTO博客，原文链接：http://blog.51cto.com/hanchaohan/929324，如需转载请自行联系原作者

JavaScript一些常用的示例1

热门文章

最新文章

相关课程

相关电子书

相关实验场景