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 相关文章推荐
AJAX架构之Dojo篇
Apr 10 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
javascript带回调函数的异步脚本载入方法实例分析
Jul 02 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
Oct 28 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Vue.js仿Metronic高级表格(一)静态设计
Apr 17 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
Dec 02 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 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
GD输出汉字的函数的分析
2006/10/09 PHP
php htmlspecialchars加强版
2010/02/16 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
php静态成员方法和静态的成员属性的使用方法
2017/10/26 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
PHP7 list() 函数修改
2021/03/09 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
jquery如何获取元素的滚动条高度等实现代码
2015/10/19 Javascript
JS获取数组最大值、最小值及长度的方法
2015/11/24 Javascript
Bootstrap登陆注册页面开发教程
2016/07/12 Javascript
js实现各种复制到剪贴板的方法(分享)
2016/10/27 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
Angular 向组件传递模板的两种方法
2018/02/23 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
2018/06/25 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
支付宝小程序实现省市区三级联动
2020/06/21 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
在Python中使用成员运算符的示例
2015/05/13 Python
python线程池(threadpool)模块使用笔记详解
2017/11/17 Python
python之拟合的实现
2019/07/19 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python搭建代理IP池实现存储IP的方法
2019/10/27 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
python list等分并从等分的子集中随机选取一个数
2020/11/16 Python
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
毕业生在校学习的自我评价分享
2013/10/08 职场文书
离婚协议书范本2014
2014/10/27 职场文书
2014年银行年终工作总结
2014/12/19 职场文书
房地产工程部经理岗位职责
2015/04/09 职场文书
家电创业计划书
2019/08/05 职场文书
css3中2D转换之有趣的transform形变效果
2022/02/24 HTML / CSS
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python