如何在網頁中設置一個定時器計算時間？

時間 2019-12-04

原文原文鏈接

寫一個簡單的計數js代碼javascript

首先先寫一個div，用於存放計數器，而且經過改變樣式能夠改變計數器的樣子css

	<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代碼java

<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>

效果如圖函數

若是想增長其餘效果能夠本身設置網站

好比以下代碼：spa

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");
                
            }