js计时事件实现时钟

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<body οnlοad="time()">//页面加载即运行time()函数
<h1>时钟:<div id="time"></div></h1>
<script language="javascript">
function time(){
var date=new Date();//获取当前时间
var year=date.getFullYear();//获取当前年
var month=date.getMonth()+1;//获取当前月份,因JS系统中月份是从0开始,因此要+1
var day=date.getDate();//获取当前日
var hour=date.getHours();//获取当前小时
var minute=date.getMinutes();//获取当前分
var second=date.getSeconds();//获取当前秒
var d=date.getDay();//获取当前星期,因星期获取的数值是0-6,对应星期天到星期六,
//因此通过建立对应数组,然后将0-6当做下标赋给当前week,效果就出来了
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var week=weeks[d];
//if语句让输出看起来更舒服一点
if(month<10){
month="0"+month;
}
if(day<10){
day="0"+month;
}
if(hour<10){
hour="0"+hour;
}
if(minute<10){
minute="0"+minute;
}
if(second<10){
second="0"+second;
}
var time=year+" 年 "+month+" 月 "+day+" 日 "+hour+" : "+minute+" : "+second+"<br />"+week;
document.getElementById("time").innerHTML=time;//打印当前时间到<div>
setTimeout("time()",1000);//第一个参数代表需要通过计时调用的函数,后面1000代表间隔时间,
//单位是毫秒,相当于一秒后调用这个函数
}
/*setTimeout(t1,t2)本身并不能实现无限循环,只是在t2毫秒之后运行t1而已,这里能实现无限循环
是因为setTimeout(t1,t2)在(time())函数里面,每次运行都会运行setTimeout(t1,t2)才实现无限循环
因此,如果你要使用到无限循环,就需要注意把setTimeout(t1,t2)放在t1里面*/
</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,你可以使用 HTML、CSS 和 JavaScript 实现时钟翻牌器倒计时效果。以下是一个简单的实现示例: HTML 代码: ```html <div class="flip-clock"> <div class="flip-clock__days flip-clock__part"></div> <div class="flip-clock__hours flip-clock__part"></div> <div class="flip-clock__minutes flip-clock__part"></div> <div class="flip-clock__seconds flip-clock__part"></div> </div> ``` CSS 代码: ```css .flip-clock { display: flex; justify-content: center; align-items: center; height: 100px; } .flip-clock__part { display: flex; flex-direction: row-reverse; } .flip-clock__part > * { position: relative; width: 40px; height: 50px; margin-right: -5px; transform-origin: bottom center; font-size: 36px; font-weight: bold; color: #fff; background-color: #000; } .flip-clock__part > * > * { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: normal; color: #000; background-color: #fff; transform: rotateX(0deg); transition: transform 0.5s; } .flip-clock__part > * > *:last-child { transform: rotateX(-180deg); } ``` JavaScript 代码: ```javascript function updateClock(endtime) { const total = Date.parse(endtime) - Date.parse(new Date()); const seconds = Math.floor((total / 1000) % 60); const minutes = Math.floor((total / 1000 / 60) % 60); const hours = Math.floor((total / (1000 * 60 * 60)) % 24); const days = Math.floor(total / (1000 * 60 * 60 * 24)); document.querySelector('.flip-clock__days').innerHTML = pad(days, 2); document.querySelector('.flip-clock__hours').innerHTML = pad(hours, 2); document.querySelector('.flip-clock__minutes').innerHTML = pad(minutes, 2); document.querySelector('.flip-clock__seconds').innerHTML = pad(seconds, 2); } function pad(num, size) { let s = num + ''; while (s.length < size) s = '0' + s; return s; } const endTime = new Date('2021-12-31T23:59:59'); setInterval(() => updateClock(endTime), 1000); ``` 在这个示例中,我们使用了一个名为 `flip-clock` 的容器来包含四个翻牌器元素,分别表示天、小时、分钟和秒。每个翻牌器元素都由两个子元素组成,一个用于显示当前值,另一个用于显示下一个值。我们使用 CSS 的 3D 转换效果来实现翻牌器的动画效果。在 JavaScript 中,我们使用 `setInterval` 函数来更新翻牌器的值,并将其格式化为两位数字。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值