时钟效果(计时器)

JavaScript的时间对象:

var myTime = new Date();  //当前时间(计算机读取到此代码时系统的时间对象)

该对象上获取的详细时间都是number类型:

    myTime.getFullYear(); //获取年

    myTime.getMonth(); //获取(从0开始要+1)

    myTime.getDate(); //获取日

    myTime.getDay(); //获取星期(0-6的数字,代表星期日到星期六)

    myTime.getHours(); //获取时

    myTime.getMinutes(); //获取分

    myTime.getSeconds()

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 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、付费专栏及课程。

余额充值