JavaScript一些常用的示例1-白红宇

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" οnclick="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 οnlοad="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" οnclick="showNow(1)" />

<input name="ad1" type="button" value="2" οnclick="showNow(2)" />

<input name="ad1" type="button" value="3" οnclick="showNow(3)" />

<input name="ad1" type="button" value="4" οnclick="showNow(4)" />

<input name="ad1" type="button" value="5" οnclick="showNow(5)" />

<input name="ad1" type="button" value="6" οnclick="showNow(6)" />

<input name="ad1" type="button" value="7" οnclick="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" οnclick="runMethod()" />

<input type="button" value="stop" οnclick="stopMethod()" />

</body>

</html>

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