js编写简单的计时器功能


Posted in Javascript onJuly 15, 2017

本文实例为大家分享了js计时器功能的编写代码,供大家参考,具体内容如下

小白一枚,如有代码不规范或者写错的地方,希望得大神指导

js编写简单的计时器功能

代码:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
</head>

<body>
<div id="waitTime"></div>

<script src="js/jquery-git.js"></script>
<script type="text/javascript">
//计时
var time = 0;
var a = setInterval(jishi, 1000); //1000毫秒
var isCanCancerOrder = false;

function jishi() {
time++;

$('#waitTime').html(calTime(time)); //倒计时

if(time == 60) { //1分钟之后
alert("一分钟到啦!");
}
}

function calTime(time) {
var spit = ":";
var hour = "00";
var second = "00";
var min = "00";
var result = "";

if(time % 60 != 0) { //秒
if(time % 60 > 10) {
second = time % 60;
} else {
second = "0" + time % 60;
}
}

if(parseInt(time / 60) != 0) { //分
if(parseInt(time / 60) > 10) {
min = parseInt(time / 60);
} else {
min = "0" + parseInt(time / 60);
}
}

if(parseInt(time / 3600) != 0) { //时
if(parseInt(time / 3600) > 10) {
hour = parseInt(time / 3600);
} else {
hour = "0" + parseInt(time / 3600);
}
}

result = hour + spit + min + spit + second;

return result;
}
</script>
</body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的onerror事件概述及使用
Apr 01 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
Apr 01 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
Jun 19 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
Aug 17 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
Sep 12 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue+element项目中过滤输入框特殊字符小结
Aug 07 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 Javascript
使用Canvas绘制一个游戏人物属性图
Mar 25 Javascript
深入理解angular2启动项目步骤
Jul 15 #Javascript
js+html5实现复制文字按钮
Jul 15 #Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 #Javascript
详解ES6之用let声明变量以及let loop机制
Jul 15 #Javascript
vue增删改查的简单操作
Jul 15 #Javascript
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 #Javascript
Javascript实现基本运算器
Jul 15 #Javascript
You might like
使用PHP接收POST数据,解析json数据
2013/06/28 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
ie focus bug 解决方法
2009/09/03 Javascript
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
Js冒泡事件详解及阻止示例
2014/03/21 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
Angular2整合其他插件的方法
2018/01/20 Javascript
layer.open组件获取弹出层页面变量、函数的实例
2019/09/25 Javascript
webpack5 联邦模块介绍详解
2020/07/08 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
2020/07/17 Javascript
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
Python入门教程之运算符与控制流
2016/08/17 Python
python 接口测试response返回数据对比的方法
2018/02/11 Python
Python pycharm 同时加载多个项目的方法
2019/01/17 Python
python下载库的步骤方法
2019/10/12 Python
Python单元测试模块doctest的具体使用
2020/02/10 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
在什么时候需要使用"常引用"
2015/12/31 面试题
优质的学校老师推荐信
2013/10/28 职场文书
生物技术研究生自荐信
2013/11/12 职场文书
就业自荐信
2013/12/04 职场文书
工作交流会欢迎词
2014/01/12 职场文书
省优秀教师事迹材料
2014/01/30 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
公司承诺函范文
2015/01/21 职场文书
思想品德课教学反思
2016/02/24 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers