1、输入问题，判断答案，按钮倒计时
主要代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<form>
What‘s your name?<br/>
My name is
<input type="text" id="name" name="name" value="" daan="bosamvs"/>
<input type="button" onclick="NAME()" id="Name" name="Name" value="Sure(5)" disabled="disabled"/>
</form>
</body>
</html>
<script>
function NAME()
{
var a=document.getElementById("name");
var b=a.value;
var c=a.getAttribute("daan");
if(b==c)
{
alert("Right!");
}
else
{
alert("Sorry,you are wrong!");
}
}
var d=5;
var e=document.getElementById("Name");
function action()
{
d--;
if(d==0)
{
e.removeAttribute("disabled");
e.value="Sure";
}
else
{
e.value="Sure("+d+")";
window.setTimeout("action()",1000);
}
}
window.setTimeout("action()",1000);
</script>
结果：
2、图片轮播
主要代码：
法一：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>batman</title>
<style>
.pases
{
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:62px;
height:126px;
}
#p1
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145428.png);
float:left;
margin:360px 0px 0px 10px;
}
#p2
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145357.png);
float:right;
margin:360px 10px 0px 0px;
}
#img1
{
width:1280px;
height:720px;
background-repeat:no-repeat;
}
</style>
</head>
<body>
<div id="img1" style="background-image:url(batman.jpg);">
<div class="pases" id="p1" onClick="spot(-1)" style="line-height:720px"></div>
<div class="pases" id="p2" onClick="spot(1)" style="line-height:720px"></div>
</div>
</body>
</html>
<script type="text/javascript">
var i=0;
var n=0;
var array=new Array();
array[0]="url(batman.jpg)";
array[1]="url(batman1.jpg)";
array[2]="url(batman2.jpg)";
array[3]="url(batman3.jpg)";
var img1 = document.getElementById("img1");
function next()//设置自动播放
{
i++;
if(i == 4)
{
i=0;
}
img1.style.backgroundImage=array[i]
if(n==0)
{
var id=window.setTimeout("next()",2000);
}
}
function spot(m)//设置点击箭头的动作
{
n=1;
i=i+m;
if(i<0)
{
x=4-1;
}
else if(i>=4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
window.setTimeout("next()",2000);
</script>
法二：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>batman</title>
<style>
#img1{
width: 1280px;
height:720px;
}
.pases
{
background-position:center;
background-repeat:no-repeat;
opacity:0.4;
width:62px;
height:126px;
}
#p1
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145428.png);
float:left;
margin:360px 0px 0px 10px;
}
#p2
{
background-image:url(%E5%BE%AE%E5%8D%9A%E6%A1%8C%E9%9D%A2%E6%88%AA%E5%9B%BE_20160525145357.png);
float:right;
margin:360px 10px 0px 0px;
}
</style>
<script type="text/javascript">
var i = 0;
var n=0;
var array=["url(batman.jpg)","url(batman1.jpg)","url(batman2.jpg)","url(batman3.jpg)"];
function next()
{
var img1 = document.getElementById("img1");
i++;
if(i == 4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
function pre()
{
i--;
var img1 = document.getElementById("img1");
if(i == -1)
{
i=4;
}
img1.style.backgroundImage=array[i];
}
function fun(num)
{
var img1 = document.getElementById("img1");
img1.style.backgroundImage=array[num];
i = num;
}
function spot(m)
{
var img1 = document.getElementById("img1");
n=1;
i=i+m;
if(i<0)
{
x=4-1;
}
else if(i>=4)
{
i=0;
}
img1.style.backgroundImage=array[i];
}
window.onload = function()
{
setInterval(‘next()‘,3000);//定时器，每3秒钟自动调用next()函数。
}
</script>
</head>
<body>
<div id="img1" style="background-image:url(batman.jpg);">
<div class="pases" id="p1" onClick="spot(-1)" style="line-height:720px"></div>
<div class="pases" id="p2" onClick="spot(1)" style="line-height:720px"></div>
</div>
</body>
</html>
结果：
总结：
1. 法一与法二的区别在于法一的滚动时间受点击的限制，点击箭头后图片不会再自动更换，法二则不受限制，点击箭头后仍可自动更改。这是因为法二用的是定时器来更改图片，法一不是。
2. 在写js函数时要注意数组引用的图片路径格式要与body中的图片路径格式相同。
3. div是分层的，在里面进入图片是作为背景，所以在写函数时更改图片也应该是背景格式。
时间： 2024-10-31 22:59:48