Home > Developer > Web Develop
Write a simple count of JS code
First, write a div to store the counter, and change the way the counter looks by changing the style
<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>Next write the JS code
<script type="Text/javascript">varnum =0; Create a global variable and return to 0 when the site is openedvarInterval =setinterval (function ()//write a timer function, each time after the execution time, if it is, can let the execution of 1000ms {num++; Every time the timer is executed, let num+1varLa = document.getElementById ("le"); Check Div la.innertext=num; Make the text in the DIV into NUM, because NUM is constantly changing, and the text in the div changes constantly}, +); Setting the timer time</script>
Effect
If you want to add other effects you can set your own
For example, the following code:
Switch(num%Tenthe single digit of {//num determines the style of the entire 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"); }
Insert the switch branch structure into the timer and change the style in the
OK, today's small function is so simple to achieve, if there is any need to help, please contact me Oh ~
How do I set a timer calculation time in a Web page?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
