js 计时器小练-20160601
- 今天要做一个计时器小练,所以我就做了练习,代码如下。
- // 初始化时间,以及定义全局量去接收计时器
- var timer = 0;
- var t;
- var h, min, sec, millisec;
- // 触发按钮的点击事件
- document.getElementById("btn").addEventListener("click", function() {
- // 获取按钮上面的内容
- var text = document.getElementById("btn").innerText;
- // 判断按钮上面的内容,也就是把按钮上面的内容作为标识
- if (text == "开始") {
- // 当按下“开始”按钮的时候,按钮上面的文字变为“结束”,并且调用计时函数
- this.innerText = "结束";
- setTime();
- } else {
- // 当按下“结束”按钮的时候,按钮上面的文字变为“开始”,并且暂停计时
- this.innerText = "开始";
- clearTimeout(t);
- }
- });
- // 计时函数
- function setTime() {
- timer++;
- // 转化为时,分,秒,毫秒
- h = parseInt(timer / (3600 * 100));
- min = parseInt(timer / (60 * 100) % 60);
- sec = parseInt(timer / 100 % 60);
- millisec = timer % 100;
- // 通过判断时分秒小于10,在前面加“0”
- if (sec < 10) {
- sec = "0" + sec;
- }
- if (min < 10) {
- min = "0" + min;
- }
- if (h < 10) {
- h = "0" + h;
- }
- // 在input中显示结果
- document.getElementById("content").value = h + ":" + min + ":" + sec + ":" + millisec;
- t = setTimeout(setTime, 10);
- }
效果图如下:
js 计时器小练-20160601的更多相关文章
- JS处理事件小技巧
今天,就分享一下我自己总结的一些JS的小技巧: ①防止鼠标选中事件 <div class="mask" onselectstart="return false&qu ...
- 撸一个JS正则小工具
写完正则在浏览器上检测自己写得对不对实在是不方便,于是就撸了一个JS正则小demo出来. demo demo展示 项目地址 代码部分 首先把布局样式先写好. <!DOCTYPE html> ...
- pixi.js 微信小游戏 入手
pixi是什么?一款h5游戏引擎 优点:简单简洁性能第一 缺点:大多数用的国产三大引擎,pixi资料少,工具少, 为什么学,装逼 用pixi开发小游戏行吗? 行.但要简单处理下 下载官网上的 weap ...
- js闭包小实验
js闭包小实验 一.总结 一句话总结: 闭包中引用闭包外的变量会使他们常驻内存 function foo() { var i=0; return function () { console.log(i ...
- 算法小练#1 - Dany Yang
开始记录每周做过的算法题,这是第一周,新的开始 1021. 删除最外层的括号 题目要求如下: 有效括号字符串为空 ("")."(" + A + ")& ...
- 微信小程序 js 计时器
function timing(that) { var seconds = that.data.seconds if (seconds > 21599) { that.setData( ...
- JS写小游戏(一):游戏框架
前言 前一阵发现一个不错的网站,都是一些用html5+css+js写的小游戏,于是打算学习一番,写下这个系列博客主要是为了加深理解,当然也有一些个人感悟,如果英文好可以直接Click Here. 概述 ...
- js计时器
js代码: <script language="javascript"> ,h=,s=,ss=; function second(){ )==){s+=;ss=;} & ...
- 上学时的HTML+JS+CSS(小总结)
html:超文本标记语言 基本标签: { 文本标签:<pre></pre>:原封不动的保留空白区域. <br />:换行. <hr wid ...
随机推荐
- Kettle 5.0源码编译
下载源码请参考上一篇博文Kettle4.4.2源码分析 Kettle 5.0以前的库文件通过ant管理,5.0+的库文件通过ant+ivy管理.Eclipse一般都是安装ant插件,不安装ivy插件, ...
- css4激动人心的新特性及浏览器支持度
CSS3的选择器提供了很多像:nth-child这样有用的选择器,并且得到浏览器支持.CSS的第四代 选择器CSS4选择器),经我们带来了更多有用的选择器. 1.否定伪类:not 否定伪类选择器其实在 ...
- Linux 内存优化
1.清理前内存使用情况 free -m2.开始清理 echo 1 > /proc/sys/vm/drop_caches 3.清理后内存使用情况 free -m 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. ...
- Yii2.0修改默认控制器
设置默认控制器有两种方法 1.在/vendor/yiisoft/yii2/web/Application.PHP的第28行左右 public $defaultRoute = 'site'; ...
- bootstrap常见类的总结
相信大家和我一样,曾经找过bootstrap的类名定义. 无奈没有找到现成的,那我就来总结一下常见类名吧. 基础样式:btn,alert,form,table,input,select.textare ...
- NIO(一、概述)
离上次发布文章已过去好几个月,说好的积累和分享都烟消云散.似乎忙碌从未终止过,加班成为常态,甚至阅读都需要更琐碎的时间. 目录 NIO(一.概述) NIO(二.Buffer) 概述 JavaNIO(n ...
- 帝国CMS万能标签的使用
标签名称: 带模板的信息调用标签[万能标签] [ecmsinfo]栏目ID/专题ID,显示条数,标题截取数,是否显示栏目名,操作类型,标签模板ID,只显示有标题图片[/ecmsinfo] 说明:e ...
- linux系统和Windows系统共存
最近接触了linux系统,因为对linux系统一直存在一种敬畏之心,所以决定研究研究 那么今天我在这里呢是要和大家分享一下在Windows存在的情况下安装双系统linux 那么第一步呢,就是斤BIOS ...
- 【Android】TextView文字长度测量和各种Paddding解析
老规矩,先上张图 o,这篇好像是分析篇,没有效果图.不管了,位置占着,老规矩不能坏,下面开始正文. *** 这篇博客会讲得比较杂: TextView里各部分的大小该怎么测量? 如何计算每行文字的长度? ...