用JS写了一个30分钟倒计时器的实现示例
更新时间：2022年03月14日 08:30:19 作者：巨輪
本文主要介绍了用JS写了一个30分钟倒计时器的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端页面倒计时功能在很多场景中会用到，如很多秒杀活动等，本文主要介绍了用JS写了一个30分钟倒计时器的实现示例，感兴趣的可以了解一下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Countdown Timer</title>
<style type="text/css">
input{
padding-bottom: 0px;
padding-top: 0px;
border-top-width: 0px;
border-left-width: 0px;
border-right-width: 0px;
font-size: 20px;
width:100%;
}
</style>
</head>
<body>
<span id="numbers" style="white-space:nowrap;"></span>
<table id="table1" >
<tr>
<td style="background-color:rgb(41, 74, 155);padding:3px;"></td>
<td></td>
</tr>
<tr>
<td style="width:100%;" colspan=2>
<input id="content"/>
</td>
</tr>
<tr>
<td style="width:100%;" colspan=2>
<canvas id="myCanvas" height="6">
Your browser does not support the canvas element.
</canvas>
</td>
</tr>
</table>
<audio id='music'>
<source src="music/Windows XP 启动.wav" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<audio id='music2'>
<source src="music/Windows XP 关机.wav" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>
<script type="text/javascript" >
var timer = {
initMinutes:30,
restSeconds:0,
minute:0,
second:0,
handle:0,
stopFlag:false,
startTime:0,
content:"asdasd",
coverFlag:false,
setFontSize:function(){
document.getElementById("numbers").style.fontSize = (window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth) / 3 + "px"
},
refreshTable:function(){
//进度条
var table = document.getElementById("table1")
var span = document.getElementById('numbers')
//刷新进度条
//table2.style.width =
table.style.width = span.offsetWidth + "px"
var progress = 1
if(this.restSeconds > 0)
progress = this.restSeconds / (this.initMinutes * 60)
document.querySelector('#table1 td:nth-of-type(1)').style.width = progress * 100 + "%"
var td2 = document.querySelector('#table1 td:nth-of-type(2)')
if (progress < 1){
td2.style.width = (1 - progress) * 100 + "%"
}else{
td2.style.display = "none"
}
var canvas = document.getElementById('myCanvas')
canvas.width = span.offsetWidth
var ctx = canvas.getContext("2d")
var rectWeight = progress * span.offsetWidth
ctx.clearRect(0, 0, span.offsetWidth, 20)
ctx.fillStyle = "#FF0000"
//console.log("rectWeight: " + rectWeight)
//console.log(progress * span.offsetWidth)
ctx.fillRect(0, 0, rectWeight, 20)
},
init:function(){
this.startTime = Date.now()
var span = document.getElementById('numbers')
this.setFontSize()
this.restSeconds = this.initMinutes * 60
this.minute = this.initMinutes
var obj = this
this.handle = setInterval(function(){
if(obj.stopFlag)
return
if(obj.restSeconds > 0){
span.innerHTML = "" + (obj.minute < 10 ? "0" + obj.minute : obj.minute) + ":" +
(!obj.coverFlag ? (obj.second < 10 ? "0" + obj.second : obj.second) : " ".repeat(4))
if(obj.restSeconds > 0){
obj.restSeconds -= 1
}
obj.minute = Math.floor(obj.restSeconds / 60)
obj.second = obj.restSeconds - obj.minute * 60
//刷新进度条
obj.refreshTable()
}else{
span.innerHTML = "Time "
window.clearInterval(obj.handle)
document.getElementById("music2").play()
//跑完后记录
var content = document.getElementById("content").value
obj.markdownRecord(content)
//不停地闪烁
window.setInterval(function(){
span.innerHTML = (span.innerHTML == "Time ")?"is up.":"Time "
}, 5000)
}
}, 1000)
document.getElementById("music").play()
var numbers = document.getElementById("numbers")
numbers.addEventListener("click", function(){
obj.coverFlag = !obj.coverFlag
})
numbers.addEventListener("dblclick", function(){
obj.stopFlag = !obj.stopFlag
})
document.getElementById('content').addEventListener("blur", function(){
if(obj.restSeconds > 0)
return
var content = document.getElementById("content").value
if(this.content != content){
this.content = content
obj.markdownRecord(content)
}
})
document.getElementById('table1').addEventListener("dblclick", function(){
console.log("timerHistory:")
console.log(localStorage.getItem('timerHistory'))
console.log("\n")
obj.exportHistory()
})
},
markdownRecord:function(content){
var records = []
var timerHistory = localStorage.getItem("timerHistory")
if(timerHistory != null){
records = JSON.parse(timerHistory)
}
var lastRecord = records[0]
if(lastRecord && lastRecord.start == this.startTime){
lastRecord.note = content
}else{
var history = {
start:this.startTime,
duration:this.initMinutes,
note:content
}
records.unshift(history)//数组头插入元素
}
var recordsJson = JSON.stringify(records)
//将结果存入本地
localStorage.setItem("timerHistory", recordsJson)
console.log(records[0])
console.log("Marked it Down.")
},
exportHistory:function(){
var filename = 'record' + Date.now() +'.txt'
var text = localStorage.getItem('timerHistory')
this.exportFile(filename, text)
},
exportFile:function(filename, text){
var element = document.createElement('a');
element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
element.setAttribute('download', filename);
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
}
}
window.onresize = function(){
timer.setFontSize()
timer.refreshTable()
}
//pause
window.onclick = function(){
//timer.stopFlag = !timer.stopFlag
}
//main
window.onload = function(){
timer.init()
}
</script>
</body>
</html>
到此这篇关于用JS写了一个30分钟倒计时器的实现示例的文章就介绍到这了,更多相关JS 倒计时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了JavaScript性能提升，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-04-04
javascript关于复选框的实用脚本代码...2007-08-08
这篇文章主要介绍了JS库中的Particles.js在vue上的运用案例分析,需要的朋友可以参考下2017-09-09
这篇文章主要介绍了JavaScript运动减速效果,模拟了物体做减速运动的效果,以两个实例形式分析了javascript实现物体做减速运动的实现技巧,涉及javascript动态操作页面元素样式及数学运算的方法,非常简洁实用,需要的朋友可以参考下2015-08-08
分包指的是把一个完整的小程序项目,按照需求划分为不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载,下面这篇文章主要给大家介绍了关于微信小程序分包流程步骤的相关资料,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了javascript 数组操作详解,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了JS基于面向对象实现的多个倒计时器功能,结合实例形式分析了javascript面向对象及时间操作相关技巧,需要的朋友可以参考下2017-02-02
这篇文章主要为大家详细介绍了利用js+canvas实现扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-06-06
这篇文章主要介绍了JsonProperty 的使用方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-10-10
在文本框中输入完内容后,经常需要按回车,焦点跳到下个文本框,或者触发按钮事件2010-06-06
最新评论