前言
最近写了一个简单的JS小作业,素材是0-9的十张图片,以图片的切换显示时间。效果图如下:
图片素材及源码链接:https://gitee.com/eassayzhao/JS-practice
源码分析
css样式:
.container{
display: flex;
}
.left{
margin-right: 10px;
margin-left: 10px;
}
button{
background: #fff;
outline: 0;
border: 1px solid #ccc;
border-radius: 5px;
}
html代码:
<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>
JS代码:
<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;
}
}
</script>