前言
最近写了一个简单的JS小作业,素材是0-9的十张图片,以图片的切换显示时间。效果图如下:
图片素材及源码链接
https://gitee.com/eassayzhao/JS-practice
css样式
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <style> .container{ display: flex; } .left{ margin-right: 10px; margin-left: 10px; } button{ background: #fff; outline: 0; border: 1px solid #ccc; border-radius: 5px; } |
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <body> <div class="container"> <div class="left"> <div style="display:block;" name="left"><img src="number/0.bmp"></div> <div style="display:none;" name="left"><img src="number/1.bmp"></div> <div style="display:none;" name="left"><img src="number/2.bmp"></div> <div style="display:none;" name="left"><img src="number/3.bmp"></div> <div style="display:none;" name="left"><img src="number/4.bmp"></div> <div style="display:none;" name="left"><img src="number/5.bmp"></div> <div style="display:none;" name="left"><img src="number/6.bmp"></div> <div style="display:none;" name="left"><img src="number/7.bmp"></div> <div style="display:none;" name="left"><img src="number/8.bmp"></div> <div style="display:none;" name="left"><img src="number/9.bmp"></div> </div> <div class="right"> <div style="display:block;" name="right"><img src="number/0.bmp"></div> <div style="display:none;" name="right"><img src="number/1.bmp"></div> <div style="display:none;" name="right"><img src="number/2.bmp"></div> <div style="display:none;" name="right"><img src="number/3.bmp"></div> <div style="display:none;" name="right"><img src="number/4.bmp"></div> <div style="display:none;" name="right"><img src="number/5.bmp"></div> <div style="display:none;" name="right"><img src="number/6.bmp"></div> <div style="display:none;" name="right"><img src="number/7.bmp"></div> <div style="display:none;" name="right"><img src="number/8.bmp"></div> <div style="display:none;" name="right"><img src="number/9.bmp"></div> </div> </div> <button id="start" onclick="start()">开始</button> <button id="stop" onclick="stop()" disabled>停止</button> <button id="reset" onclick="reset()" disabled>复位</button> </body> |
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <script> var timer; //变量i记录当前计时 var i=0; function start(){ //每隔1s执行一次auto_tab_div()函数 timer = setInterval("auto_tab_div()",1000); document.getElementById("stop").disabled = false; document.getElementById("reset").disabled = false; } function stop(){ clearInterval(timer); } function reset(){ clearInterval(timer); i=0; div_tab_left(i); div_tab_right(i); } function div_tab_right(tagName){ var rightArr = document.getElementsByName("right"); for(var i=0;i<10;i++){ if(i==tagName){ rightArr[i].style = "display:block"; }else{ rightArr[i].style = "display:none"; } } } function div_tab_left(tagName){ var leftArr = document.getElementsByName("left"); for(var i=0;i<10;i++){ if(i==tagName){ leftArr[i].style = "display:block"; }else{ leftArr[i].style = "display:none"; } } } function auto_tab_div(){ // 右侧显示计时个位数 div_tab_right(i%10); var j = parseInt(i/10); // 左侧显示计时十位数 div_tab_left(j); // 每执行一次,i加1 i++; // 直到计时99,再从新从0开始 if(i==99){ i=0; } } |