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 RegExp方法获取地址栏参数(面向对象)
Mar 10 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
event对象获取方法总结在google浏览器下测试
Nov 03 Javascript
对于Form表单reset方法的新认识
Mar 05 Javascript
jQuery中outerWidth()方法用法实例
Jan 19 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JS实现带鼠标效果的头像及文章列表代码
Sep 27 Javascript
JS基于MSClass和setInterval实现ajax定时采集信息并滚动显示的方法
Apr 18 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
深入理解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微信开发之百度天气预报
2016/11/18 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
extjs 学习笔记(三) 最基本的grid
2009/10/15 Javascript
JS控制图片等比例缩放的示例代码
2013/12/24 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
JQuery设置时间段下拉选择实例
2014/12/30 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
jQuery实现图片轮播效果代码(基于jquery.pack.js插件)
2016/06/02 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
微信js-sdk分享功能接口常用逻辑封装示例
2016/10/13 Javascript
微信小程序 wxapp内容组件 text详细介绍
2016/10/31 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
详解使用angular的HttpClient搭配rxjs
2017/09/01 Javascript
Vue2.0用户权限控制解决方案
2017/11/29 Javascript
Vue指令之 v-cloak、v-text、v-html实例详解
2019/08/08 Javascript
js实现div色块拖动录制
2020/01/16 Javascript
vue 实现基础组件的自动化全局注册
2020/12/25 Vue.js
[42:36]DOTA2上海特级锦标赛B组败者赛 VG VS Spirit第二局
2016/02/26 DOTA
Python内置函数之filter map reduce介绍
2014/11/30 Python
Python中的复制操作及copy模块中的浅拷贝与深拷贝方法
2016/07/02 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
微信跳一跳python代码实现
2018/01/05 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
Tensorflow 同时载入多个模型的实例讲解
2018/07/27 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
python识别验证码图片实例详解
2020/02/17 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
美国杂志订阅折扣与优惠网站:Magazines.com
2016/08/31 全球购物
实习医生自我评价
2013/09/22 职场文书
记者岗位职责
2014/01/06 职场文书
培训专员岗位职责
2014/02/26 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
Java常用函数式接口总结
2021/06/29 Java/Android
Django路由层如何获取正确的url
2021/07/15 Python