毫秒倒计时小Demo
Demo截图:
Demo:Demo
上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
</title>
<style> *{ margin:0;padding:0; } .timer{
width: 200px;
margin:0 auto;
font-family: 'Microsoft Yahei';
font-size: 18px;
line-height: 30px;
}
.timer span{
color: #ff556b;
}
.timer strong{ } </style>
<script>
window.onload = function(){ var oTimer = document.getElementById('timer'),
oBtn = document.getElementById('btn'),
oSpan = oTimer.getElementsByTagName('span')[0]; var timers = setCountdown(oSpan,10,callFn); oBtn.onclick = function(){
clearInterval( timers );
}; function callFn(){
alert( '倒计时结束了~~' );
} function setCountdown( obj,num,callBack ){
var timer = null; //定时器;
var nums = num * 1000; //时间转化成毫秒;
obj.innerHTML = num; //对象赋值; timer = setInterval(function(){ nums = nums - 100; //每次减100毫秒; if( nums <= 0 ){ callBack(); clearInterval( timer ); } obj.innerHTML = parseFloat(nums/1000).toFixed(1); },100); return timer; } }
</script>
</head>
<body>
<div id="timer" class="timer" >
<div>
<span>
</span>
<strong>
秒
</strong>
</div>
<input type="button" id="btn" value="点我">
</div> </body>
</html>
后记:
1秒1000毫秒;
所以定时器100毫秒为间隔10次1000(1秒),每次减也是100;
毫秒倒计时小Demo的更多相关文章
- 新手 gulp+ seajs 小demo
首先,不说废话,它的介绍和作者就不在多说了,网上一百度一大堆: 我在这里只是来写写我这2天抽空对seajs的了解并爬过的坑,和实现的一个小demo(纯属为了实现,高手请绕道); 一.环境工具及安装 1 ...
- Nancy之基于Nancy.Hosting.Self的小Demo
继昨天的Nancy之基于Nancy.Hosting.Aspnet的小Demo后, 今天来做个基于Nancy.Hosting.Self的小Demo. 关于Self Hosting Nancy,官方文档的 ...
- Nancy之基于Nancy.Owin的小Demo
前面做了基于Nancy.Hosting.Aspnet和Nancy.Hosting.Self的小Demo 今天我们来做个基于Nancy.Owin的小Demo 开始之前我们来说说什么是Owin和Katan ...
- Nancy之基于Self Hosting的补充小Demo
前面把Hosting Nancy with ASP.NET.Self Hosting Nancy和Hosting Nancy with OWIN 以demo的形式简单描述了一下. 这篇是为Self H ...
- [Unity3D]做个小Demo学习Input.touches
[Unity3D]做个小Demo学习Input.touches 学不如做,下面用一个简单的Demo展示的Input.touches各项字段,有图有真相. 本项目已发布到Github,地址在(https ...
- Android -- 自定义View小Demo,动态画圆(一)
1,转载:(http://blog.csdn.NET/lmj623565791/article/details/24500107),现在如下图的效果: 由上面的效果图可以看到其实是一个在一个圆上换不同 ...
- Win10 FaceAPI小demo开发问题汇总
Win10 FaceAPI小demo开发问题汇总 最近使用微软牛津计划做一个小demo,使用FaceAPI做一个小应用,实现刷脸的功能.开发的过程中用到几个问题,具体如下: Stream 与IRand ...
- 模仿京东顶部搜索条效果制作的一个小demo
最近模仿京东顶部搜索条效果制作的一个小demo,特贴到这里,今后如果有用到可以参考一下,代码如下 #define kScreenWidth [UIScreen mainScreen].bounds.s ...
- Android学习小Demo一个显示行线的自定义EditText
今天在处理一个EditText的时候,想着把EditText做成像一本作业本上的纸一样,每一行都可以由线条隔开,具体效果如下: 1)最开始的思路 一开始的想法是很简单的,找出每一行的高度,然后一行一行 ...
随机推荐
- 细说shiro之一:shiro简介
官网:https://shiro.apache.org/ 一. Shiro是什么Shiro是一个Java平台的开源权限框架,用于认证和访问授权.具体来说,满足对如下元素的支持: 用户,角色,权限(仅仅 ...
- storm+Calcite
敬请期待... http://blog.csdn.net/yu616568/article/details/49915577 https://github.com/terry-chelsea/bigd ...
- ue4 Skeletal Mesh编辑器
skeletal mesh:骨骼网络物体资源 由 美术制作(*.fbx). 在ue4可对此资源进行编辑以添加一些游戏需要的设置. https://docs.unrealengine.com/lates ...
- Chain训练准则的计算
轮迭代时验证集的日志: log/compute_prob_valid.1000.log: LOG (nnet3-chain-compute-prob[5.5.100-d66be]:PrintTotal ...
- Elasticsearch 5.0 —— Head插件部署指南(Head目前支持5.0了!请不要看本篇文章了)
使用ES的基本都会使用过head,但是版本升级到5.0后,head插件就不好使了.下面就看看如何在5.0中启动Head插件吧! Head目前支持5.0了!请不要看本篇文章了 Head目前支持5.0了! ...
- jira和svn关联后,不显示Subversion Commits标签或不显示svn提交信息
1.jira的版本是7.3.6 2.不显示Subversion Commits标签或不显示svn提交信息 其实是权限的分配问题 3.管理员登录 找到对应项目的权限管理 4.[评论权限]——[编辑所有评 ...
- Python 爬虫一 简介
什么是爬虫? 爬虫可以做什么? 爬虫的本质 爬虫的基本流程 什么是request&response 爬取到数据该怎么办 什么是爬虫? 网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间 ...
- mysql 分库分表 ~ 方案选择浅谈
一 简介:分库分表的理解二 具体: 1 当由于单台DB业务增长导致的服务器压力时,就必须横向进行扩展 2 本文仅从中间层观点进行分析三 现有方案 方案1 sharding家 ...
- eclipse中一些常见svn图标的含义
项目视图 The Package Explorer view - 已忽略版本控制的文件.可以通过Window → Preferences → Team → Ignored Resources.来忽 ...
- ASP.NET - 学习总目录
ASP.NET - 处理页面 ASP.NET - ADO.NET框架 ASP.NET - 创建功能菜单 ASP.NET MVC - 入门 ASP.NET MVC - 模型验证 ASP.NET MVC ...