寫一個簡單的計數js代碼 首先先寫一個div，用於存放計數器，並且通過改變樣式可以改變計數器的樣子 接下來寫js代碼 效果如圖 如果想增加其他效果可以自己設置 比如如下代碼： 將switch分支結構插入計時器中，按照其中的樣式變換 好啦，今天的這個小功能就這麼簡單的實現了，如果有什麼需要幫助的請聯繫 ...
寫一個簡單的計數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分支結構插入計時器中，按照其中的樣式變換
