JavaScript实现效果——考试倒计时

1、动态效果图：

2、代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>考试倒计时</title><style type="text/css">.all{width: 300px;margin: 0 auto;}#timer{text-align: center;}</style></head><body><div class="all"><img id="image"><div id="timer"><input type="text" id="numbers" placeholder="输入考试时间（秒）"/><input type="button" value="开始考试" onclick="show()"/></div></div><script type="text/javascript">function show(){// maxtime,time1,time2,time3,time4均为全局变量maxtime = parseInt(document.getElementById('numbers').value);    // 获取输入框中的值，并将其转化成整数time1 = Math.round(maxtime*0.75);   // 考试进行到1/4time2 = Math.round(maxtime*0.5);    // 考试进行到1/2time3 = Math.round(maxtime*0.25);   // 考试进行到3/4time4 = 0;                          // 考试结束image.src="data:images/exam-0.png";timing = setInterval("showTime()",1000); // 设置定时器timing，每秒刷新调用一次函数showTime()}function showTime(){if(maxtime>0){maxtime--;// minutes,seconds为局部变量var minutes = Math.floor(maxtime/60); // 计算出分钟var seconds = maxtime%60;  // 计算出秒// 时间为个位数时，补零if(minutes<10){minutes = "0" + minutes};if(seconds<10){seconds = "0" + seconds};document.getElementById('timer').innerHTML="距离本场考试结束还有"+minutes+"分"+seconds+"秒!";// 考试进行到相应的时间点时切换对应图片if(maxtime == time1){image.src="data:images/exam-1.png";}else if(maxtime == time2){image.src="data:images/exam-2.png";}else if(maxtime == time3){image.src="data:images/exam-3.png";}else if(maxtime == time4){image.src="data:images/exam-4.png";}}else{clearInterval(timing); // 清除定时器timingalert("时间到，考试结束!");}}</script></body>
</html>

本人是web开发初学者，欢迎各位留言交流。

JavaScript实现效果——考试倒计时相关推荐

HTML+JavaScript实现网页秒杀倒计时效果
HTML+JavaScript实现网页秒杀倒计时效果 <!DOCTYPE html> <html><head><meta charset="utf- ...
自学web前端练手——js的考试倒计时
考试倒计时,并附带15分钟和5分钟的图片更换.(没调整统一的图片大小) 起初文本一直出不来,搞了半小时(一条一条的检查排查错误),最后把setInterval从函数体中弄出来就好了,吐了_(:з」∠) ...
php考试倒计时提交系统,AJAX_基于Ajax技术实现考试倒计时并自动提交试卷，1.概述在开发网络考试系统 - phpStudy...
基于Ajax技术实现考试倒计时并自动提交试卷 1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访 ...
php ajax 考试倒计时,ajax实现在线考试倒计时
基于的C/S模式单机版的考试系统,我记得那种单机版的考试系统在进入考试以后界面就会自动的最大化,从而使考生的界面只能停留在考试界面而不能进行其他的操作,那样的话保证了考试系统的安全性.那么现在基于B/ ...
php ajax 考试倒计时,基于Ajax技术实现考试倒计时并自动提交试卷
1.概述在开发网络考试系统时,考试计时并自动提交试卷是必不可少的功能.由于在答卷过程中,试卷不能刷新,所以需要使用Ajax实现无刷新操作.运行本实例,访问准备考试页面index.jsp,在该页面中, ...
计算机二级选择题不单独计时,考试倒计时：如何备考计算机二级office？
原标题:考试倒计时:如何备考计算机二级office? 全国计算机等级考试你准备好了吗? 二级office考试作为一项技能性考试,大部分题目不需要特别深奥的理论储备,甚至题库也变化不大,多练就完事儿了 ...
Vue实现考试倒计时（内含思路，效果图，代码，注释）
实现思路: 通过考试结束时间,考试最大允许时长,考试开始时间.当前时间,计算出做题的可用时间,再利用定时器改变考试可用时间. 实现效果如下:(界面请自行设计) 代码如下: 倒计时Html代码: < ...
Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了javascript实现简单页面倒 ...

JavaScript实现效果——考试倒计时

1、动态效果图：

2、代码如下：

JavaScript实现效果——考试倒计时相关推荐

最新文章

热门文章