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 相关文章推荐
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
Jul 04 Javascript
jquery右下角弹出提示框示例代码
Oct 08 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
web 屏蔽BackSpace键实例代码
Dec 24 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
VUE+Element环境搭建与安装的方法步骤
Jan 24 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
Feb 09 Javascript
JS删除对象中某一属性案例详解
Sep 08 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
ThinkPHP3.1之D方法实例详解
2014/06/20 PHP
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
php操作xml入门之cdata区段
2015/01/23 PHP
php实现上传图片文件代码
2015/07/19 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
PHP设计模式之适配器模式原理与用法分析
2018/04/25 PHP
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
javascript 嵌套的函数(作用域链)
2010/03/15 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
firefox下input type=&quot;file&quot;的size是多大
2011/10/24 Javascript
JS求平均值的小例子
2013/11/29 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
layui从数据库中获取复选框的值并默认选中方法
2018/08/15 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
解决Antd 里面的select 选择框联动触发的问题
2020/10/24 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
python机器学习案例教程——K最近邻算法的实现
2017/12/28 Python
Python实现的爬取百度文库功能示例
2019/02/16 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python实现本地批量ping多个IP的方法示例
2019/08/07 Python
win10下python3.8的PIL库安装过程
2020/06/08 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
测试时代收集的软件测试面试题
2013/09/25 面试题
毕业生幼师求职自荐信
2013/10/01 职场文书
英文求职信结束语大全
2013/10/26 职场文书
教师作风整改措施思想汇报
2014/10/12 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
Redis源码阅读:Redis字符串SDS详解
2021/07/15 Redis
Mysql 一主多从的部署
2022/05/20 MySQL