网站页面用js实现倒计时的代码

js获取当前日期时间的代码

//获取当前日期时间  
var date=new Date();
//年
var year=date.getFullYear();
//月
var month=date.getMonth()+1;
//日
var day=date.getDate();
//时
var hour=date.getHours();
//分
var minutes=date.getMinutes();
//秒
var seconds=date.getSeconds();
var NowDate=year+"年"+month+"月"+day+"日"+hour+":"+minutes+":"+seconds;
console.log(NowDate);

网站页面用js实现倒计时的代码

效果展示如下：

反正个人看法是美观度比较一般的，但是处于记录的情况，记录一下代码：有些内容需要自己修改。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
</head>
<style type="text/css">
    .time-item {
      width: 430px;
      height: 45px;
      margin: 0 auto;
    }
     
    .time-item strong {
        background: orange;
        color: #fff;
        line-height: 49px;
        font-size: 36px;
        font-family: Arial;
        padding: 0 10px;
        margin-right: 10px;
        border-radius: 5px;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
 
    .time-item > span {
        float: left;
        line-height: 49px;
        color: orange;
        font-size: 32px;
        margin: 0 10px;
        font-family: Arial, Helvetica, sans-serif;
    }
    .title {
      width: 300px;
      height: 50px;
      margin:200px auto 50px auto;
    }
</style>
<body>
    <h1 class="title">距离4月20日，还有</h1>
    <div class="time-item">
        <span><span id="day">00</span>天</span>
        <strong><span id="hour">00</span>时</strong>
        <strong><span id="minute">00</span>分</strong>
        <strong><span id="second">00</span>秒</strong>
    </div>      
</body>
<script>
function $(id) {
  return document.getElementById(id);
}
//处理innerText和textContent的兼容性问题
// 设置标签之间的内容
function setInnerText(element, content) {
  // 判断当前浏览器是否支持 innerText
  if (typeof element.innerText === 'string') {
    element.innerText = content;
  } else {
    element.textContent = content;
  }
}
 
// 获取两个日期的时间差
function getInterval(start, end) {
  // 两个日期对象，相差的毫秒数
  var interval = end - start;
  // 求 相差的天数/小时数/分钟数/秒数
  var day, hour, minute, second;
  // 两个日期对象，相差的秒数
  // interval = interval / 1000;
  interval /= 1000;
 
  day = Math.round(interval / 60 / 60 / 24);
  hour = Math.round(interval / 60 / 60 % 24);
  minute = Math.round(interval / 60 % 60);
  second = Math.round(interval % 60);
 
  return {
    day: day,
    hour: hour,
    minute: minute,
    second: second
  }
}
 
// 目标时间
var endDate = new Date('2024-4-20 0:0:0');
// 获取span
var spanDay = $('day');
var spanHour = $('hour');
var spanMinute = $('minute');
var spanSecond = $('second');
// 倒计时
function countdown() {
  // 计算时间差
  // 当前时间
  var startDate = new Date();
  // 计算两个日期差
  var interval = getInterval(startDate, endDate);
 
  setInnerText(spanDay, interval.day);
  setInnerText(spanHour, interval.hour);
  setInnerText(spanMinute, interval.minute);
  setInnerText(spanSecond, interval.second);
 
}
countdown();
setInterval(countdown, 1000);
</script>
</html>

👋 感谢您的观看！

版权声明 1、文章版权归作者所有，未经允许请勿转载。
2、本站所有文章，如无特殊说明或标注，均为本站原创发布。任何在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们邮箱：526009505@qq.com进行处理。
3、咨询请联系QQ：526009505

THE END