写一个简单的计数js代码
首先先写一个div，用于存放计数器，并且通过改变样式可以改变计数器的样子
<body> <div id="le"></div> </body>
<style type="text/css">
#le{
position: fixed;
right: 100px;
top: 200px;
width: 250px;
height: 200px;
background-color: #000000;
font-size: 40px;
line-height: 200px;
text-align: center;
color: white;
font-weight: 700;
transition: all .5s ease;
}
</style>
接下来写js代码
<script type="text/javascript">
var num = 0; //先建立全局变量，当网站打开时归0
var Interval = setInterval(function() //写一个定时函数，每过多久执行一次，如果是时间，可以让执行时间为1000ms
{
num++; //定时器每执行一次，让num+1
var la = document.getElementById("le"); //选中div
la.innerText = num; //让div中的文本变成num，由于num不断变化，div中的文本也不断变化
},1000); //设置定时器的时间
</script>
效果如图
如果想增加其他效果可以自己设置
比如如下代码：
switch(num%10){ // num的个位数决定着整个div的样式
case 1:
la.style.textAlign="left";
break;
case 2:
la.style.lineHeight="40px";
break;
case 3:
la.style.textAlign="center";
break;
case 4:
la.style.lineHeight="200px";
break;
case 5:
la.style.textAlign="right";
break;
case 6:
la.style.lineHeight="360px";
break;
case 7:
la.style.textAlign="center";
break;
case 8:
la.style.lineHeight="200px";
break;
case 9:
la.style.fontSize="180px";
break;
case 0:
la.style.fontSize="40px";
break;
default:
alert("2");
}
将switch分支结构插入计时器中，按照其中的样式变换
好啦，今天的这个小功能就这么简单的实现了，如果有什么需要帮助的请联系我哦~
时间： 2024-10-28 07:27:28