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 相关文章推荐
jQuery实现的五子棋游戏实例
Jun 13 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
AngularJS中$injector、$rootScope和$scope的概念和关联关系深入分析
Jan 19 Javascript
使用jQuery,Angular实现登录界面验证码详解
Apr 27 jQuery
详解微信小程序 template添加绑定事件
Jun 23 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
Oct 26 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
OpenLayers3加载常用控件使用方法详解
Sep 25 Javascript
Selenium执行JavaScript脚本的方法示例
Dec 31 Javascript
React列表栏及购物车组件使用详解
Jun 28 Javascript
关于Vue中的options选项
Mar 22 Vue.js
html中两种获取标签内的值的方法
Jun 16 jQuery
深入理解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设计模式之单例模式使用示例
2014/01/20 PHP
php根据日期判断星座的函数分享
2014/02/13 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
php文件操作相关类实例
2015/06/18 PHP
php生成条形码的图片的实例详解
2017/09/13 PHP
Laravel如何使用数据库事务及捕获事务失败后的异常详解
2017/10/23 PHP
详解阿里云视频直播PHP-SDK接入教程
2020/07/09 PHP
javascript 树形导航菜单实例代码
2013/08/13 Javascript
输入自动提示搜索提示功能的javascript:sugggestion.js
2013/09/02 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
vue-cli axios请求方式及跨域处理问题
2018/03/28 Javascript
JS简单生成由字母数字组合随机字符串示例
2018/05/25 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
vue中echarts的用法及与elementui-select的协同绑定操作
2020/11/17 Vue.js
[01:57]DOTA2上海特锦赛小组赛解说单车采访花絮
2016/02/27 DOTA
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
Python反射用法实例简析
2017/12/22 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
python中doctest库实例用法
2020/12/31 Python
文员个人的求职信范文
2013/09/26 职场文书
《胖乎乎的小手》教学反思
2014/02/26 职场文书
艺校音乐专业自我鉴定范文
2014/03/01 职场文书
教学评估实施方案
2014/03/16 职场文书
社团活动总结范文
2014/04/26 职场文书
妇女干部培训方案
2014/05/12 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
2014年科技工作总结
2014/11/26 职场文书
2015年人事科工作总结
2015/04/28 职场文书
师范生见习自我总结
2015/06/23 职场文书
使用pandas生成/读取csv文件的方法实例
2021/07/09 Python
浅谈Redis位图(Bitmap)及Redis二进制中的问题
2021/07/15 Redis