js倒计时清空html内容,JS实现十分钟倒计时代码实例

这篇博客介绍了如何利用JavaScript编写一个10分钟考试倒计时的代码。通过设置maxtime为10分钟,使用setInterval定时器更新剩余时间和显示状态。当剩余时间为5分钟时,弹窗提醒,时间结束后则提示考试结束。示例代码详细展示了倒计时的实现过程,适合初学者参考学习。
摘要由CSDN通过智能技术生成

编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaScript视频教程。

举例:10分钟考试倒计时,当时间仅剩五分钟时,提醒考试仅剩5分钟,时间结束时,提示考试结束。具体代码如下:

HTML部分:

JavaScript部分:

var maxtime = 10 * 60; //

function CountDown() {

if (maxtime >= 0) {

minutes = Math.floor(maxtime / 60);

seconds = Math.floor(maxtime % 60);

msg = "距离结束还有" + minutes + "分" + seconds + "秒";

document.all["timer"].innerHTML = msg;

if (maxtime == 5 * 60)alert("距离结束仅剩5分钟");

--maxtime;

} else{

clearInterval(timer);

alert("时间到,结束!");

}

}

timer = setInterval("CountDown()", 1000);

JS十分钟倒计时代码的具体步骤:

1、设置考试时长maxtime = 10 * 60秒,即10分钟

2、用if函数判断,当maxtime大于等于零时,判断剩余分和秒

3、再用if函数判断,当时间仅剩5分钟时,弹出提示:距离结束仅剩5分钟

4、如果时间到,则清除定时器,提示:结束

效果如图所示:

93ed655939ddf3b6d2e6d8dc91f4c088.png

df5b3965851d3e1c546f531235e213c4.png

774925cee2760c8e545133da960dcc16.png

可以使用CanvasContext中的`arc()`和`fillText()`方法来实现倒计时的效果。具体实现步骤如下: 1. 首先获取到CanvasContext的实例: ```javascript const ctx = wx.createCanvasContext('myCanvas'); ``` 2. 然后通过`arc()`方法画出一个圆形的进度条: ```javascript ctx.beginPath(); ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise); ctx.stroke(); ``` 其中,`x`和`y`是圆心的坐标,`radius`是圆的半径,`startAngle`和`endAngle`是圆弧的起始角度和结束角度,`anticlockwise`表示是否按逆时针方向绘制。 3. 接着,使用`fillText()`方法在圆形中心位置显示倒计时的数字: ```javascript ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(time, x, y); ``` 其中,`font`设置字体样式,`textAlign`设置文字水平居中,`textBaseline`设置文字垂直居中,`fillText()`方法的第一个参数是要显示的文本,第二个参数是文本的x轴坐标,第三个参数是文本的y轴坐标。 4. 最后,通过定时器来更新倒计时的时间和进度条的显示,实现倒计时效果。 ```javascript setInterval(() => { //更新倒计时时间 time--; //重新绘制圆形进度条和倒计时数字 drawProgress(time); }, 1000); ``` 完整的实现代码示例: ```javascript const ctx = wx.createCanvasContext('myCanvas'); const x = 50; //圆心x轴坐标 const y = 50; //圆心y轴坐标 const radius = 40; //圆的半径 let time = 60; //倒计时时间 function drawProgress(time) { //清空画布 ctx.clearRect(0, 0, 100, 100); //绘制底部圆形 ctx.beginPath(); ctx.arc(x, y, radius, 0, 2 * Math.PI); ctx.strokeStyle = '#ddd'; ctx.stroke(); //绘制进度条 const endAngle = (2 * Math.PI) * (60 - time) / 60 - 0.5 * Math.PI; ctx.beginPath(); ctx.arc(x, y, radius, -0.5 * Math.PI, endAngle); ctx.strokeStyle = '#f00'; ctx.stroke(); //绘制倒计时数字 ctx.font = 'bold 24px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(time, x, y); } setInterval(() => { time--; drawProgress(time); }, 1000); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值