用js 创建时间对象 【倒计时】

最新推荐文章于 2022-05-25 10:12:30 发布
最新推荐文章于 2022-05-25 10:12:30 发布
阅读量194 收藏
点赞数 2
分类专栏： js时间对象函数 文章标签： 倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42402845/article/details/94493134
版权

<!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>Document</title>

<style>

.aa{

margin: 0 auto;

width: 200px;

height: 200px;

background: rgb(247, 164, 11);

text-align: center;

box-shadow: -1px 5px 10px #0d1;

border: 2px solid #8da;

}

.aa p:nth-child(1){

color: #0fc;

font-size: 30px;

}

.aa p:nth-child(2){

color: #17d;

font-size: 30px;

text-shadow:2px 5px 3px #d11;

}

</style>

</head>

<body>

<div class="aa">

<p>倒计时</p>

<p id="pp"></p>

</div>

<script>

function char(){

var date=new Date();

var future=new Date('2019-11-11 00:00:00');

var cha=future-date;

var pss=document.getElementById('pp');

var str='';

if(cha<=0){

clearInterval(timer);

str='欢庆双十一';

pss.innerHTML=str;

pss.style.fontSize='30px';

 

}else{

 

var day=parseInt(cha/1000/60/60/24);

var hh=parseInt(cha/1000/60/60%24);

var mm=parseInt(cha/1000/60%60);

var ss=parseInt(cha/1000%60);

pss.style.fontSize='16px';

var str=ff(day)+' 天'+ff(hh)+'时'+ff(mm)+'分'+ff(ss)+'秒';

pss.innerHTML=str;

}

}

char();

//时间值 当小于10时 设置数字前加0 例如：09:10:08秒

function ff(a){

return a<10?'0'+a:a;

}

//设置定时器

timer=setInterval(function(){

char();

},1000);

</script>

</body>

</html>

 

 

以上代码直接复制即可！

实现效果如下

双十一 倒计时
标题

 

小小的梦想！
关注
专栏目录
二十一、JS日期对象方法实现倒计时效果
weixin_40976555的博客
05-23 491
一、知识点： Date 对象方法： 常用的获取日期对象方法： getDate() 日，从 Date 对象返回一个月中的某一天 (1 ~ 31)。 getDay() 周，从 Date 对象返回一周中的某一天 (0 ~ 6)。 getFullYear() 年，从 Date 对象以四位数字返回年份。 getHours() 时，返回 Date 对象的小时 (0 ~ 23)。 g...
js实现时间倒计时
wqy18378671261的博客
06-20 584
代码如下： <div id="time"></div> <div id="box"></div> <script src="../JS/jquery-3.3.1.min.js"></script> <script> // 当前时间 setInterval(function(){ // 声明时间 var time=ne.
js-时间对象实现倒计时效果
JackieDYH的博客
03-30 433
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...
JavaScript中有趣的日期对象的应用(考试倒计时、情人节倒计时）
新白的博客
04-05 403
动态时钟、考试倒计时、节日倒计时
用js 创建时间对象 【现在的时间】
姗姗的博客
07-02 635
<!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-Compa...
js实现倒计时及时间对象
10-21
本文详细介绍了使用JavaScript实现倒计时效果的方法，并对JavaScript中的时间对象进行了深入解析。通过具体的代码示例和解释，为读者提供了一个理解和实现倒计时功能的有效途径。 知识点一：倒计时效果实现 倒计时...
js实现指定时间倒计时效果
10-16
在讨论如何使用JavaScript实现指定时间的倒计时时，我们首先需要了解基本的HTML和JavaScript知识，以及如何操作Date对象来获取当前时间并与指定时间进行比较。 JavaScript提供了一个Date对象，可以用来处理日期和...
javascript倒计时效果实现
10-23
在本文中，我们将探讨三种不同的JavaScript倒计时效果的实现方法，以及如何使用Date对象来处理时间。 1. **简单时间显示** 这种方法主要使用Date对象来获取当前的年、月、日、小时、分钟和秒。`getFullYear()`、`...
原生js实现节日时间倒计时功能
11-26
【原生JS实现节日时间倒计时功能】 在JavaScript中，实现一个节日时间倒计时功能，主要涉及以下几个核心知识点： 1. **时间差计算**： - 首先，你需要获取当前时间（`new Date()`），然后设定一个特定的结束时间...
day14--JS10-日期对象、网页时钟、倒计时
RecordStudy
01-23 391
alert( new Date() ); // 当前系统的时间对象      当前指的是系统读到该行代码 操作系统的时间       Mon Jan 23 2017 09:04:22 GMT+0800     月 日 年  时间 时区 var myTime = new Date(); var iYear = myTime.getFullYear(); var i
JavaScript页面倒计时功能完整示例
11-26
本文实例讲述了JavaScript页面倒计时功能。分享给大家供大家参考，具体如下： 效果图： 源码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS倒计时</title> <style> h3{text-align:center;line-height:50px;height:50px;margin-top:100px;} #timer{text-align:center;} </style> </head> <body> <h3>倒计
JavaScript基础学习--12 日期对象、时钟倒计时
weixin_34272308的博客
08-11 98
Demos： https://github.com/jiangheyan/JavaScriptBase 一、时间 var date = new Date(); 1、getFullYear(); 2、getMonth() + 1; //月份从0开始，所以+1 3、getDate(); 4、getDay(); //星期w...
JS时间倒计时
清醒清醒别睡了
10-23 196
@（time）例如:22.10.59 $(function () { var x = &quot;@(Time)&quot;, interval; var shi = x.toString().split(&quot;.&quot;)[0]; var fen = x.toString().split(&quot;.&quot;)[1]; var miao = x.to..
日期与时间的对象
weixin_44584477的博客
06-28 289
日期与时间的对象 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：JS 作者： 撰写时间：2019.6.25 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
web前端复习(二):js日期操作,实现时间显示和倒计时效果
都市桃源
06-07 6730
虽然jquery框架的封装使得几行代码就可以完成js的复杂功能的实现,但是jquery并为日期定制操作,所以日期的操作还是得使用js原生实现下面我们就来简单实现js日期操作,代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi
web 页面上纯js实现按钮倒计数功能(实时计时器也可以)
weixin_30550271的博客
01-05 177
需求构思：本功能想实现的是，一个按钮在页面载入就显示提醒续费，，，倒数60秒后，完成提醒功能，可以按另外一个页面跳转到主页。 参考网上的大神，实现如下：Button2倒数，Button3跳转，在页面上添加两个html按钮。 Button2代码 <input id="Button2" type="button" value="提醒续费倒计时" onclick="return Butto...
js实现图片时间,京东倒计时案例
大佐
07-20 828
html代码 <div id="pic"> <img src="img/0.png" alt="" /> <img src="img/0.png" alt="" /> <span>时</span> <img src="img/0.png" alt="" /> <...
利用JavaScript写出倒计时功能【超详细】
bs3412的博客
05-25 1872
倒计时功能超详细讲解
javascript给成绩分等级
chenghuijin6597的博客
02-15 3421
<html> <head> </head> <body> <label for="score">请输入成绩：</label> <!--label让光标自动定位到文本框--> <...
js使用日期对象倒计时
最新发布
05-17
可以使用JavaScript中的日期对象来实现倒计时。下面是一个简单的例子： ```javascript // 倒计时时间（单位：毫秒） var countdownTime = 10000; // 获取当前时间 var now = new Date().getTime(); // 计算倒计时...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小小的梦想！

你的鼓励是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值