HTML5练习3
Posted bosamvs
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5练习3相关的知识，希望对你有一定的参考价值。
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) { i=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) { i=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是分层的，在里面进入图片是作为背景，所以在写函数时更改图片也应该是背景格式。
以上是关于HTML5练习3的主要内容，如果未能解决你的问题，请参考以下文章