用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分秒倒计时器实现方法
本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能
-
js实现倒计时器自定义时间和暂停
js倒计时器可自定义时间和暂停,效果如下,点击start 开始计时,end结束计时 分别复制 H5 css js 代码即可实现,具体的算法在js控制函数中(都写了注释) css html,body{ width:100%;height:100%; } .content{ height:100%;width:100%; } .row-center{ display:flex;flex-direction:row;justify-content:center; align-items:center;
-
JS基于面向对象实现的多个倒计时器功能示例
本文实例讲述了JS基于面向对象实现的多个倒计时器功能.分享给大家供大家参考,具体如下: 运行效果图如下: 实现代码如下: 代码 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
VB倒计时器和JS当前时间
VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢.... 例如倒计时,如何让秒数在不刷新的情况下走动... 想了好久,查了好多地方都是用JavaScript做的... 最后才发现了一个,是VBscript帮助上都没有说的..SetTimeOut属性..真晕哦.. 倒计时如下. 倒计时 sec=2 min=1 hou=0 SetTimeOut "SpareTime()",1000 sub SpareTime() if sec=0 and min=0 and h
-
用JS写了一个30分钟倒计时器的实现示例
前端页面倒计时功能在很多场景中会用到,如很多秒杀活动等,本文主要介绍了用JS写了一个30分钟倒计时器的实现示例,感兴趣的可以了解一下 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>Countdown Tim
-
用js写的一个路由(简单实例)
前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js实现路由</title> </head> <body> &l
-
用JS写的一个Ajax库(实例代码)
myajax是一个用js编写的一个跨浏览器的ajax库,支持get, post, jsonp请求,精巧,简单. 一.发送GET请求: myajax.get({ <span style="white-space:pre"> </span>data: {}, //参数 url: "", //请求地址 //发生错误是调用 error: function(data) { }, //请求成功调用 success: function(data){ <
-
纯css+js写的一个简单的tab标签页带样式
最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图: 接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b
-
WPF制作一个简单的倒计时器实例附源码
实例一: 早上起来后闲的无事,于是想到前些日子学院的某个老师让大家给他找个什么倒计时的小软件,当时大家忙于复习所以也懒得搭理这件事,囧~.既然早上没事干,何不写个玩玩~既然要写,就用以前没怎么捣鼓过的WPF写一个吧,也算是一次学习WPF的初探吧(感觉自己很落后了)! 在Vs2008和Vs2010之间徘徊了许久之后,最终还是选择了Vs2008做开发IDE.在Vs2008中建了个WPF工程后,浏览了下默认生成的工程文件结构,一个App.xaml(当然还有App.xaml.cs)和一个Windows1
-
使用js写的一个简易的投票
大家直接自己看吧,请多多指教,这个是几个月前写的,现在全部整理一下. 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8" > <title></title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/j
-
用js写了一个类似php的print_r输出换行功能
复制代码 代码如下: <script type="text/javascript"> <!-- var my={ str:'', deep:0, block:' ', get_pre:function(n) { pre=''; for(i=0;i<n;i++) { pre+=this.block; } return pre; }, show_obj:function(obj) { for(k in obj) { if(typeof(obj[k])!='objec
-
用JS写的一个TableView控件代码
请看看编码是否规范,使用是否方便HTML: 代码 复制代码 代码如下: <table id="customTableView"> <thead> <tr> <td>编号</td> <td>姓名</td> </tr> </thead> <tbody><!--template-tbody--> <tr name="" style=&q
-
使用原生js写的一个简单slider
复制代码 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body,div,ul,li { margin: 0; padding: 0; } ul,li { list-style:
-
如何设置一个严格30分钟过期的Session示例介绍
SESSION和COOKIE是每个面试官必问的知识点,所以希望同学能深刻学习理解这部分以获得更好的工作机会 以下内容转之laruence博客(这是个学习PHP的好地方,详情点击http://www.laruence.com/) 我在面试的时候, 经常会问一个问题: "如何设置一个30分钟过期的Session?", 大家不要觉得看似简单, 这里面包含的知识挺多, 特别适合考察基本功是否扎实, 谁来回答试试? 呵呵 为什么问这个问题呢? 1. 我在Twitter上看到了有人讨论这个问题,