这个效果的实现关键是对Date对象和setTimeout的使用。
一共有三个例子，HTML结构如下，就不添加CSS样式了。
<body> 当前时间：<p id="p1"></p> 高考倒计时：<p id="p2"></p> 限时抢购：<p id="p3"></p> </body>
主要体会javascript的实现
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
p3=document.getElementById("p3");
showtime1();
showtime2();
showtime3();
}
1.简单的实现当前时间的显示
function showtime1() {
var nowdate=new Date();//创建Date对象nowdate,以获取当前时间
var year=nowdate.getFullYear(),//获取年份
month=nowdate.getMonth()+1,//获取月份，getMonth()得到的是0-11，需要加1
date=nowdate.getDate(),//获取日份
day=nowdate.getDay(),//获取一周中的某一天，getDay()得到的是0-6
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
h=nowdate.getHours(),
m=nowdate.getMinutes(),
s=nowdate.getSeconds(),
h=checkTime(h),//函数checkTime用于格式化时，分，秒
m=checkTime(m),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);//反复执行函数本身
}
其中的checkTime函数如下：
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
因为平时看到的时间格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09这样的格式。所以在从9变成10的过程中，有一位数，变成两位数，同样在充59秒变为0秒或者59分变为0分或者23时变为0时。
比如 23:59:59 再下一秒 应该变为00:00:00；若未使用checkTime函数进行处理，则会变为0:0:0，这样格式上就有点不统一，而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了！！！)
2.高考倒计时效果实现
function showTime2() {
var nowtime=new Date(),//获取当前时间
endtime=new Date("2017/6/6");//定义结束时间
var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数
leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数
lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数
leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数
lefts=Math.floor(lefttime/1000%60);//计算秒数
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showTime2, 1000);
}
其中比较重要的几点：
① 定义结束的时间endtime=new Date("2017/6/6")是通过new一个带有参数的Date对象，直接 new Date()则是直接获取到当前的时间；
② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。
③天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。
3.限时抢购倒计时效果
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),//设置结束时间
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
其实和第二个例子大同小异，区别是结束时间的设置 new Date("2020/1/1,00:00:00")
下面是完整的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时效果</title>
<script type="text/javascript">
function checkTime(i) {
if (i<10) {
i="0"+i;
}
return i;
}
window.onload=function () {
var p1=document.getElementById("p1"),
p2=document.getElementById("p2");
showtime1();
showtime2();
showtime3();
}
function showtime1() {
var nowdate=new Date();
var year=nowdate.getFullYear(),//年份
month=nowdate.getMonth()+1,//月份
date=nowdate.getDate(),//日
week=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"],
day=nowdate.getDay(),//getDay获取0-6
h=nowdate.getHours(),
h=checkTime(h),
m=nowdate.getMinutes(),
m=checkTime(m),
s=nowdate.getSeconds(),
s=checkTime(s);
p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
setTimeout(showtime1, 1000);
}
function showtime2() {
var nowtime=new Date(),
endtime=new Date("2017/6/6");
var lefttime=endtime.getTime()-nowtime.getTime(),
leftd=Math.floor(lefttime/(1000*60*60*24)),
lefth=Math.floor(lefttime/(1000*60*60)%24),
leftm=Math.floor(lefttime/(1000*60)%60),
lefts=Math.floor(lefttime/1000%60);
p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
setTimeout(showtime2, 1000);
}
function showtime3() {
var nowtime=new Date(),
endtime=new Date("2020/1/1,00:00:00"),
lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
d=Math.floor(lefttime/(60*60*24)),
h=Math.floor(lefttime/(60*60)%24),
m=Math.floor(lefttime/60%60),
s=Math.floor(lefttime%60);
p3.innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
setTimeout(showtime3, 1000);
}
</script>
</head>
<body>
当前时间：<p id="p1"></p>
高考倒计时：<p id="p2"></p>
限时抢购：<p id="p3"></p>
</body>
</html>
以上这篇javascript特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。
javascript实现倒计时
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。