模块:js实现一个倒计时功能

时间:2022-03-21 09:59:02

1.给显示内容加样式

<style>
#p1{font-size: large; color: red;} </style>

2.客户端页面

<div id="p1">100</div>
<button onclick="px()">倒计时开始</button>
<button onclick="px1()">暂停</button>

3.js处理

<script type="text/javascript">
var tt;//定义一个变量,接收时间设置settimeout
var aa=100;//函数外面定义aa //设置倒计时功能函数
function px()
{
document.getElementById("p1").innerHTML=aa;
if(aa>0)
{
aa=aa-1; }else
{
document.getElementById("p1").innerHTML="倒计时结束";
}
tt=setTimeout("px()",1000); //设置间隔时间
} //设置暂停函数
function px1()
{
clearTimeout(tt);//清除tt }
</script>