JS写的倒计时效果

过程：
1.随机生成4-10之间的随机数
2.随机数是几就从几开始倒计时
3.开始倒计时
4.到 0 时倒计时结束（或者点击也可以停止倒计时）

来康康效果图片吧

这里我加了个数字小于三数字变红的效果哦~

对不起emmm我不懂动图怎么做
大家想象一下

html和css部分的代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>A3-04</title><style>#wrap{margin-left: auto;margin-right: auto;background-color: grey;opacity: 0.6;width: 100px;height: 100px;border-radius: 50%;}#number{color: white;font-size: 72px;text-align: center;line-height: 100px;display: block;}</style>
</head>
<body>
<div id="wrap"><span id="number"></span>
</div>

接下来就是最核心的js部分代码啦

咳咳

<body>
<div id="wrap"><span id="number"></span>
</div>
<script>var div = document.getElementById('wrap');var num = document.getElementById('number');// 生成随机数function getRandom(min,max) {return Math.floor(Math.random() * (max - min + 1)) + min;}var ran = getRandom(4,10);// 开启倒计时timer = setInterval(function () {if (ran == 0){// 当倒计时到0时停止倒计时clearInterval(timer);num.innerHTML = '0';}else {num.innerHTML = ran;ran--;if (ran< 3){// 当倒计时小于三时颜色变红num.style.color = 'red';}}},1000);// 关闭倒计时div.addEventListener('click',function () {clearInterval(timer);});</script>
</body>
</html>

这样就完成咯

JS写的随机数倒计时效果相关推荐

一个js写的桌面倒计时（请高手帮忙改一下）
这个Js写的倒计时是一个htm的网页可以附一张图片必须保证是同一路径下,这样就可以在桌面上显示了如下图: 那张图片就是桌面的背景可以更改,具体操作如下: 在桌面上点击右键->属性->桌面- ...
利用js来制作简单倒计时效果
利用JavaScript函数做一个简单的倒计时 <script>// 代码如下:function countDown(time) {var nowTime = +new Date(); / ...
JS倒计时效果（不积蛙步无以至千里不积小流无以成江海）
JS实现倒计时效果 js基础语法实现倒计时效果(需要手动刷新) 核心算法:输入的时间减去现在的时间就是倒计时所剩余的时间,即倒计时,但是不能拿时分秒相减,比如05分减去25分,结果变负. 用时间戳来做 ...
Html+Css+js实现春节倒计时效果（移动端和PC端）
目录前言导语效果预览 html部分移动端样式(mobile.css) pc端样式(style.css) js部分效果演示移动端 pc端总结下载地址前言我是歌谣我有个兄弟巅峰的时 ...
JS倒计时效果+数字图片
这里用JS结合一组数字图片,写了一个简单的倒计时效果.数字图片大家自己找啦,这里需要注意的就是图片命名--要和图片中的数字保持一致哟. 如果有什么不完善的地方,还请各路大神指点. 代码呈上: < ...
JS 写的5秒钟倒计时跳转
js写的5秒钟倒计时跳转 jquery-3.4.1下载 <!DOCTYPE html> <html lang="en"> <head><m ...
网页通过CSS写出生日倒计时（利用：日期倒计时、元素自动旋转、边框视觉按钮效果）[直接复制代码即可实现、含注释]
图片效果 ↓(代码为粉图,生日歌自动播放) 视频效果 ↓(音乐为自动播放) 网页通过CSS写出生日倒计时(利用:日期倒计时.元素自动旋转.边框视觉按钮效果) 代码 ↓(可直接复制使用,音乐引用网易云音 ...
js页面倒计时7天 java_javascript实现倒计时效果
本文实例为大家分享了javascript实现倒计时效果的具体代码,供大家参考,具体内容如下首先先写一个布局 #numbers p { position: absolute; font-size: 1 ...
html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...

JS写的随机数倒计时效果

JS写的倒计时效果

来康康效果图片吧

html和css部分的代码

接下来就是最核心的js部分代码啦

JS写的随机数倒计时效果相关推荐

最新文章

热门文章