js编写简单的计时器功能

 更新时间:2017年07月15日 15:23:32   作者:ouqi_qiou  
这篇文章主要为大家详细介绍了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获取设置div的高度和宽度兼容任何浏览器

    javascript获取设置div的高度和宽度兼容任何浏览器

    Javascript如何获取和设置div的高度和宽度,并且兼容任何浏览器,感兴趣的朋友不妨看看下面的代码或许有意想不到的收获
    2013-09-09
  • 微信小程序实现拍照和相册选取图片

    微信小程序实现拍照和相册选取图片

    这篇文章主要为大家详细介绍了微信小程序实现拍照和相册选取图片,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • js实现移动端吸顶效果

    js实现移动端吸顶效果

    这篇文章主要为大家详细介绍了js实现移动端吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-01-01
  • JS常用的4种截取字符串方法

    JS常用的4种截取字符串方法

    在做项目的时候,经常会需要截取字符串,所以常用的方法有slice()、substr()、substring()、match()方法等,下面通过示例代码介绍四个方法的使用,感兴趣的朋友跟随小编一起看看吧
    2023-02-02
  • 基于JavaScript制作一个简单的天气应用

    基于JavaScript制作一个简单的天气应用

    随着Web开发技术的不断发展,JavaScript已经成为前端开发中不可或缺的一部分,下面我们就来看看如何使用JavaScript实现一个简单的天气应用吧
    2024-01-01
  • 用javascript实现自动输出网页文本

    用javascript实现自动输出网页文本

    这篇文章主要介绍了用javascript实现自动输出网页文本,用到两个函数:setTimeout(),递归和String.substring();,需要的朋友可以参考下
    2015-07-07
  • 微信小程序实现全局状态管理的方法整理

    微信小程序实现全局状态管理的方法整理

    已知微信小程序中如果要做到全局状态共享,常用的有四种方式,分别是globalData、本地缓存、mobx-miniprogram和westore,本文将带大家看看mobx-miniprogram是如何实现的小程序的全局状态管理,需要的可以收藏一下
    2023-06-06
  • 利用canvas实现的加载动画效果实例代码

    利用canvas实现的加载动画效果实例代码

    之前看到一个Android的加载效果不错,一直想自己动手做一个,正好这段时间重温了一个Canvas,所以就尝试了一下。下面这篇文章主要给大家介绍了关于利用canvas实现加载效果的相关资料,需要的朋友可以参考下。
    2017-07-07
  • 浅谈JavaScript函数参数的可修改性问题

    浅谈JavaScript函数参数的可修改性问题

    这篇文章主要是对JavaScript函数参数的可修改性进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 二叉树先序遍历的非递归算法具体实现

    二叉树先序遍历的非递归算法具体实现

    这篇文章主要介绍了二叉树先序遍历的非递归算法,有需要的朋友可以参考一下
    2014-01-01

最新评论