1. 今天要做一个计时器小练,所以我就做了练习,代码如下。
  1.        // 初始化时间,以及定义全局量去接收计时器
  2. var timer = 0;
  3. var t;
  4. var h, min, sec, millisec;
  5. // 触发按钮的点击事件
  6. document.getElementById("btn").addEventListener("click", function() {
  7. // 获取按钮上面的内容
  8. var text = document.getElementById("btn").innerText;
  9. // 判断按钮上面的内容,也就是把按钮上面的内容作为标识
  10. if (text == "开始") {
  11. // 当按下“开始”按钮的时候,按钮上面的文字变为“结束”,并且调用计时函数
  12. this.innerText = "结束";
  13. setTime();
  14. } else {
  15. // 当按下“结束”按钮的时候,按钮上面的文字变为“开始”,并且暂停计时
  16. this.innerText = "开始";
  17. clearTimeout(t);
  18. }
  19. });
  20. // 计时函数
  21. function setTime() {
  22. timer++;
  23. // 转化为时,分,秒,毫秒
  24. h = parseInt(timer / (3600 * 100));
  25. min = parseInt(timer / (60 * 100) % 60);
  26. sec = parseInt(timer / 100 % 60);
  27. millisec = timer % 100;
  28. // 通过判断时分秒小于10,在前面加“0”
  29. if (sec < 10) {
  30. sec = "0" + sec;
  31. }
  32. if (min < 10) {
  33. min = "0" + min;
  34. }
  35. if (h < 10) {
  36. h = "0" + h;
  37. }
  38. // 在input中显示结果
  39. document.getElementById("content").value = h + ":" + min + ":" + sec + ":" + millisec;
  40. t = setTimeout(setTime, 10);
  41. }
  1.  
  1.  

效果图如下:

js 计时器小练-20160601的更多相关文章

  1. JS处理事件小技巧

    今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...

  2. 撸一个JS正则小工具

    写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...

  3. pixi.js 微信小游戏 入手

    pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...

  4. js闭包小实验

    js闭包小实验 一.总结 一句话总结: 闭包中引用闭包外的变量会使他们常驻内存 function foo() { var i=0; return function () { console.log(i ...

  5. 算法小练#1 - Dany Yang

    开始记录每周做过的算法题,这是第一周,新的开始 1021. 删除最外层的括号 题目要求如下: 有效括号字符串为空 ("")."(" + A + ")& ...

  6. 微信小程序 js 计时器

    function timing(that) {  var seconds = that.data.seconds  if (seconds > 21599) {    that.setData( ...

  7. JS写小游戏(一):游戏框架

    前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...

  8. js计时器

    js代码: <script language="javascript"> ,h=,s=,ss=; function second(){ )==){s+=;ss=;} & ...

  9. 上学时的HTML+JS+CSS(小总结)

    html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域.      <br />:换行.      <hr wid ...

随机推荐

  1. Kettle 5.0源码编译

    下载源码请参考上一篇博文Kettle4.4.2源码分析 Kettle 5.0以前的库文件通过ant管理,5.0+的库文件通过ant+ivy管理.Eclipse一般都是安装ant插件,不安装ivy插件, ...

  2. css4激动人心的新特性及浏览器支持度

    CSS3的选择器提供了很多像:nth-child这样有用的选择器,并且得到浏览器支持.CSS的第四代 选择器CSS4选择器),经我们带来了更多有用的选择器. 1.否定伪类:not 否定伪类选择器其实在 ...

  3. Linux 内存优化

    1.清理前内存使用情况 free -m2.开始清理   echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 4.完成! 查看内存条数命令: ...

  4. .Net程序员学用Oracle系列(20):层次查询(CONNECT BY)

    1.层次查询语句 1.1.CONNECT BY 语法 1.2.CONNECT BY 示例 2.层次查询函数 2.1.SYS_CONNECT_BY_PATH 2.2.WMSYS.WM_CONCAT 2. ...

  5. Yii2.0修改默认控制器

    设置默认控制器有两种方法 1.在/vendor/yiisoft/yii2/web/Application.PHP的第28行左右 public $defaultRoute = 'site';      ...

  6. bootstrap常见类的总结

    相信大家和我一样,曾经找过bootstrap的类名定义. 无奈没有找到现成的,那我就来总结一下常见类名吧. 基础样式:btn,alert,form,table,input,select.textare ...

  7. NIO(一、概述)

    离上次发布文章已过去好几个月,说好的积累和分享都烟消云散.似乎忙碌从未终止过,加班成为常态,甚至阅读都需要更琐碎的时间. 目录 NIO(一.概述) NIO(二.Buffer) 概述 JavaNIO(n ...

  8. 帝国CMS万能标签的使用

    标签名称: 带模板的信息调用标签[万能标签]   [ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,标签模板ID,只显示有标题图片[/ecmsinfo] 说明:e ...

  9. linux系统和Windows系统共存

    最近接触了linux系统,因为对linux系统一直存在一种敬畏之心,所以决定研究研究 那么今天我在这里呢是要和大家分享一下在Windows存在的情况下安装双系统linux 那么第一步呢,就是斤BIOS ...

  10. 【Android】TextView文字长度测量和各种Paddding解析

    老规矩,先上张图 o,这篇好像是分析篇,没有效果图.不管了,位置占着,老规矩不能坏,下面开始正文. *** 这篇博客会讲得比较杂: TextView里各部分的大小该怎么测量? 如何计算每行文字的长度? ...