原生js计时器
闲来无事,写一个简单的计时器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Elias:计时器</title>
<style>
div.box{
width: 300px;
height: 100px;
margin: 100px auto;
line-height: 50px;
text-align: center;
border: 1px solid red;
}
div.time{
width: 300px;
height: 50px;
}
</style>
</head> <body>
<div class="box">
<div class="time">
00:00:00
</div>
<form>
<button type="button" id="reset">重新开始</button>
<button type="button" id="stop">暂停</button>
<button type="button" id="continue">继续</button>
</form>
</div>
<script>
var oTime = document.querySelector('.time');
var oReset = document.getElementById('reset');
var oStop = document.querySelector('#stop');
var oContinue = document.querySelector('#continue'); function format(obj) {//简单封装一个格式化时间的函数
if (obj < 10) {
return "0" + obj;
} else {
return obj;
}
}
var ss,s,ms,hs,timer;
oReset.onclick = function () {
ss = s = ms = hs = 0;
timeRun();
oStop.onclick = function () {
clearInterval(timer);
}
oContinue.onclick = function () {
timeRun();
}
} function timeRun() {
clearInterval(timer);
timer = setInterval(function () {
ss++;
ms = format(Math.floor(ss / 60));
hs = format(Math.floor(ss / 3600));
s = format(ss % 60);
oTime.innerHTML = hs + ":" + ms + ":" + s;
}, 1000)
}
</script>
</body> </html>
原生js计时器的更多相关文章
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 原生JS实现简易转盘抽奖
我爱撸码,撸码使我感到快乐. 大家好,我是Counter. 本章带大家来简单的了解下原生JS实现转盘抽奖. 因为主要涉及到JS,在这里HTML和CSS起到的功能就没有那么重要, 因此,没有过多的阐述H ...
- 前端跨域问题相关知识详解(原生js和jquery两种方法实现jsonp跨域)
1.同源策略 同源策略(Same origin policy),它是由Netscape提出的一个著名的安全策略.同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正 ...
- 使用原生JS封装一个动画函数
最近一直在忙项目,很少有时间回顾之前的知识,今天刚好要做一个轮播,因为对兼容性有一定的要求,使用了各种插件和库中的轮播,效果都不是很理想,一怒之下,使用原生JS封装了一个轮播组件,其中重要的功能就是一 ...
- javascript原生js轮播图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 常用原生JS方法总结(兼容性写法)
经常会用到原生JS来写前端...但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的... 今天下班有点累... 就来总结一下简单的东西吧…… 备注:一下的方法都是包裹在一个EventU ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
随机推荐
- hive高级数据类型
hive的高级数据类型主要包括:数组类型.map类型.结构体类型.集合类型,以下将分别详细介绍. 1)数组类型 array_type:array<data_type> -- 建表语句 cr ...
- 免费为网站加上HTTPS
前言 最近有好几位同学直接微信赞助说快点更新文章.这个要和大家说声抱歉,的确很久没有写文章了.我们也不找借口,我会尽力保证多写文章.今天我们的主题来讲解 如何给自己的网站 加上HTTPS HTTPS是 ...
- C# 图片识别
项目需要识别图片上的信息,网上搜索试了Asprise-OCR.Microsoft Office Document Imaging(Office 2007) 组件实现两种方式,后者可以识别中文等其他语言 ...
- oracle储存过程学习笔记
转载至: https://www.2cto.com/database/201610/559389.htm 1.什么是oracle存储过程 存储过程和函数也是一种PL/SQL块,是存入数据库的PL/SQ ...
- 配置notepad++支持golang开发
1 下载golang安装包和配置环境变量 到官网下载golang安装包,下载地址:https://golang.org/dl/,我选择的go1.7.windows-amd64.zip. 配置环境变量: ...
- PowerBI更新2019/04 - 解决方案架构 - PowerBI Solution Architecture(一图胜万字!)
Power BI 架构图 (2019/04) 1) Power BI Desktop 是一个免费的工具.它可以用来准备和管理数据模型:包括链接各种数据:做数据清洗:定义关系:定义度量值和层级关系:应用 ...
- nginx隐藏tp路由index.php
---------------------------------------------- 也可以找到vhosts.conf文件修改, 重启nginx,service nginx restart
- 尝试启动 ADB 服务器时出错 解决方法
启动CMD→ adb kill-server → adb start-server;
- notify.min.js
/*! * @wcjiang/notify v2.0.11 * JS achieve the browser title flashing , scrolling, voice prompts , c ...
- ESP8266清理flash学习记录
学习来源:http://bbs.eeworld.com.cn/thread-497588-1-1.html 还稍看了电子产品世界 主要内容 1在windows 上通过 命令行 安装 Python环境 ...