【JS】倒计时（数字倒数）--与日期无关

HTML部分

从100到0，停止，点击按钮还原倒计时，到0，再停-----------------------点击，再还原，可通过修改div里的值修改从几开始倒数

<div id="box">100</div><input type="button" name="btn" id="btn" value="开始" /><input type="button" name="btn" id="btn2" value="停止" />

CSS部分

#box {width: 100px;height: 100px;line-height: 100px;font-size: 40px;margin: 30px auto;border: solid 4px black;text-align: center;}input {display: block;margin: 0 auto;}

JS部分

    <script>var boxObj = document.querySelector('#box');var startObj = document.querySelector('#btn');var stopObj = document.querySelector('#btn2');var times = '';var num = boxObj.innerHTML;startObj.onclick = function () {clearInterval(times);times = setInterval(function () {var num1 = boxObj.innerHTML;num1--;if (num1 < 0) {clearInterval(times);num1 = num;}boxObj.innerHTML = num1;}, 100)}stopObj.onclick = function () {clearInterval(times);}</script>

【JS】倒计时（数字倒数）--与日期无关相关推荐

js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
java检验电话或传真_对有java开发过程常用的js验证数字、电话号码、传真、邮箱、手机号码、邮编、日期...
常用的js验证数字,电话号码,传真,邮箱,手机号码,邮编,日期 1.数字 function testisNum(object) { var s =document.getElementById(obj ...
JS判断数字/字母/中文
原文链接:http://tieba.baidu.com/f?kz=140213674 1 JS判断数字/字母/中文 1. var reg = /^(\w|[\u4E00-\u9FA5])*$/; ...
greenplum 查询出来的数字加减日期_POLA宝丽美白精华怎么查看生产日期保质期？保质期时间是几年的？查批号在哪里查？...
POLA宝丽是最受喜爱的日本品牌之一,与资生堂.花王等并列前排的.它家旗下很多产品都是贵妇级别的,很多人认识这个品牌可能就是因为它家的美白丸吧,但是其实它家的护肤品才是最受大家喜爱的.去过日本旅游的就 ...
圆形数字时钟同时显示数字时钟、日期和星期特效
前几天看到动画效果,于是今天想写个时钟效果分享. <!DOCTYPE html> <html lang="en"><head><meta ...
vue 使用js XLSX读取 excel 转换日期格式
前言大家好! 今天遇到了vue 使用js XLSX读取 excel 转换日期格式的问题,做个记录问题今天写excel文件上传时,遇到了时间格式没有正确转换的问题解决方式借用了项目中读取 e ...
html倒计时函数,js倒计时函数封装
在前端开发中,经常会做一些活动啊,有活动就经常会出现倒计时,这时候,我们就经常性的需要一个js倒计时功能. js倒计时功能,就需要用到js时间戳,我们需要获取当前时间的时间戳和结束时间的时间戳,进行相 ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
MySQL 学习笔记（12）— 数据类型（定长字符、变长字符、字符串大对象、数字类型、日期时间类型、二进制类型）
MySQL 常见的数据类型有字符串类型.数字类型.时间类型.二进制类型.具体的分类如下图: 1. 字符串类型字符串类型用于存储字符和字符串数据,主要包含三种具体的类型:定长字符串.变长字符串以及字符 ...
CountUp.js – 让数字以非常有趣的动画方式显示
CountUp.js 无依赖的.轻量级的 JavaScript 类,可以用来快速创建以一种更有趣的动画方式显示数值数据.尽管它的名字叫 countUp,但其实可以在两个方向进行变化,这是根据你传递的 ...

【JS】倒计时（数字倒数）--与日期无关

HTML部分

CSS部分

JS部分

【JS】倒计时（数字倒数）--与日期无关相关推荐

最新文章

热门文章