网页建站时间的显示

最新推荐文章于 2021-06-08 12:32:46 发布

starcpdk微信～

最新推荐文章于 2021-06-08 12:32:46 发布

阅读量527

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_44735933/article/details/114075713

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

我们常常会看到网页中最下面的底部栏会有一个动态的网页建站时间的显示

像下图这样的效果
在这里插入图片描述
那么这是怎么实现的呢?

我在这里为大家展示两种代码 , 一种是在vue中的实现 , 一种是在html中的实现

vue中的实现

<template>
  <div>
    <!--底部footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity-tiny animated bounceInUp">
      <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
          <div class="three wide column">
            <div class="ui inverted link list">
              <div class="item">
                <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
              </div>
            </div>
          </div>
          <div class="four wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
            <div class="ui inverted link list">
              <a href="#" class="item">用户故事(User Story)</a>
              <a href="#" class="item">用户故事(User Story)</a>
              <a href="#" class="item">用户故事(User Story)</a>
            </div>
          </div>
          <div class="four wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
            <div class="ui inverted link list">
              <a href="#" class="item">QQ:2381510397</a>
              <a href="#" class="item">微信:starcpdk</a>
              <a href="#" class="item">手机号:15648933053</a>
            </div>
          </div>
          <div class="five wide column">
            <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
            <p class="m-text-thin m-text-spaced m-opacity-mini">哈哈哈哈哈哈哈</p>
          </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-mini">
          <span>Copyright © 2021 - 2022 web Designed by Yao YunFeng</span>
        </p>
        <p>
          <span>备案号</span>
        </p>
        <p>
          本站已安全运行{{dnum}}天 {{hnum}}小时 {{mnum}} 分 {{snum}}秒
        </p>
      </div>
    </footer>
  </div>
</template>

<script>
  export default {
    name: "Footer",
    data() {
      return {
        timer: '',
        dnum: 0,
        hnum: 0,
        mnum: 0,
        snum: 0
      };
    },
    created() {
    },
    mounted() {
      // setInterval函数中的this指向是window而不是vue , 所以这里需要将this赋值给that , 在setInterval中用that代替this
      let that = this
      // 每隔1000毫秒就调用一次createTime()
      this.timer = setInterval(function () {
        that.createTime()
      }, 1000);
    },
    // 销毁这个定时任务
    beforeDestroy() {
      clearInterval(this.timer);
    },

    methods: {
      // 这里是计算建站时间的脚本
      createTime() {
        let now = new Date()
        // 页脚建站时间计算脚本
        var grt = new Date("02/24/2021 00:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
        now.setTime(now.getTime() + 250);

        let days = (now - grt) / 1000 / 60 / 60 / 24;
        this.dnum = Math.floor(days);
        let hours = (now - grt) / 1000 / 60 / 60 - (24 * this.dnum);
        this.hnum = Math.floor(hours);
        if (String(this.hnum).length == 1) {
          this.hnum = "0" + this.hnum;
        }
        let minutes = (now - grt) / 1000 / 60 - (24 * 60 * this.dnum) - (60 * this.hnum);
        this.mnum = Math.floor(minutes);
        if (String(this.mnum).length == 1) {
          this.mnum = "0" + this.mnum;
        }
        let seconds = (now - grt) / 1000 - (24 * 60 * 60 * this.dnum) - (60 * 60 * this.hnum) - (60 * this.mnum);
        this.snum = Math.round(seconds);
        if (String(this.snum).length == 1) {
          this.snum = "0" + this.snum;
        }
      }
    }
  }
</script>

<style scoped>

</style>

HTML实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
<!--底部footer-->
    <footer class="ui inverted vertical segment m-padded-tb-massive m-opacity-tiny animated bounceInUp">
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="./static/images/wechat.jpg" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                        <a href="#" class="item">用户故事(User Story)</a>
                    </div>
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item">QQ:2381510397</a>
                        <a href="#" class="item">微信:starcpdk</a>
                        <a href="#" class="item">手机号:15648933053</a>
                    </div>
                </div>
                <div class="five wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                    <p class="m-text-thin m-text-spaced m-opacity-mini">哈哈哈哈哈哈哈</p>
                </div>
            </div>
            <div class="ui inverted section divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-mini">
                <span>Copyright © 2021 - 2022 web Designed by Yao YunFeng</span>
            </p>
            <p>
                <span>备案号</span>
            </p>
            <p>
                <span id="timeDate">载入天数...</span><span id="times">载入时分秒...</span>
            </p>
        </div>
    </footer>
<!--页脚建站时间计算脚本-->
<script>
    var now = new Date();

    function createtime() {
        var grt = new Date("04/01/2020 00:00:00");//在此处修改你的建站时间，格式：月/日/年 时:分:秒
        now.setTime(now.getTime() + 250);
        days = (now - grt) / 1000 / 60 / 60 / 24;
        dnum = Math.floor(days);
        hours = (now - grt) / 1000 / 60 / 60 - (24 * dnum);
        hnum = Math.floor(hours);
        if (String(hnum).length == 1) {
            hnum = "0" + hnum;
        }
        minutes = (now - grt) / 1000 / 60 - (24 * 60 * dnum) - (60 * hnum);
        mnum = Math.floor(minutes);
        if (String(mnum).length == 1) {
            mnum = "0" + mnum;
        }
        seconds = (now - grt) / 1000 - (24 * 60 * 60 * dnum) - (60 * 60 * hnum) - (60 * mnum);
        snum = Math.round(seconds);
        if (String(snum).length == 1) {
            snum = "0" + snum;
        }
        document.getElementById("timeDate").innerHTML = "本站已安全运行 " + dnum + " 天 ";
        document.getElementById("times").innerHTML = hnum + " 小时 " + mnum + " 分 " + snum + " 秒";
    }

    setInterval("createtime()", 500);
</script>

</body>
</html>