朱纯树博客
VPS测评推荐网站
cloudacead cloudacead

css 渐变色时间计时代码

展示:
[vplayer url=”https://sirblog.cn/wp-content/uploads/2019/12/1614412051.mov” /]
截屏2019-12-22上午10.56.47.png

代码:

<!DOCTYPE HTML>
<html>
<head>
    <title></title>
    <style type="text/css">
        body {
      margin: 0;
      height: 100vh;
      background-color: #000000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
 
    p {
      margin: 0;
      color: #fff;
      font-size: 10vw;
      font-weight: bold;
      text-transform: uppercase;
      background-image: linear-gradient(to right,
          orangered,
          orange,
          gold,
          lightgreen,
          cyan,
          dodgerblue,
          mediumpurple,
          hotpink,
          orangered);
      background-size: 110vw;
      font-family: sans-serif;
      animation: sliding 30s linear infinite;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
 
    @keyframes sliding {
      to {
        background-position: -2000vw;
      }
    }

    </style>
</head>
<body>
<p></p>
<script type="text/javascript">
    var tew = document.getElementsByTagName('p')[0];
 
 
    function getTime() {         //获取时间
      var date = new Date();
 
      var year = date.getFullYear();
      var month = date.getMonth();
      var day = date.getDate();
 
      var hour = date.getHours();
      var minute = date.getMinutes();
      var second = date.getSeconds();
 
      //这样写显示时间在1~9会挤占空间;所以要在1~9的数字前补零;
      if (hour < 10) {
        hour = '0' + hour;
      }
      if (minute < 10) {
        minute = '0' + minute;
      }
      if (second < 10) {
        second = '0' + second;
      }
 
 
      var x = date.getDay();//获取星期
 
 
      var time = year + '/' + month + '/' + day + '  ' + hour + ':' + minute + ':' + second
      tew.innerHTML = time;//将时间显示在div内
    }
    getTime();
    setInterval(getTime, 1000);
</script>
</body>
</html>

[scode type=”red”]如果不显示内容,请检查p标签是否存在[/scode]

赞(2) 打赏
未经允许不得转载:VPS测评推荐网站 - 朱纯树博客 » css 渐变色时间计时代码

评论 7998

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #8010

    Hi there, just became alert to your blog through Google, and
    found that it is truly informative. I’m going to watch out for brussels.
    I’ll be grateful if you continue this in future. A lot of people will be
    benefited from your writing. Cheers!

    Look at my blog :: coupon

    coupon11小时前回复
  2. #8009

    This design is wicked! You most certainly know how to keep a reader amused.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!)
    Excellent job. I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  3. #8008

    I’ve read a few just right stuff here. Certainly price
    bookmarking for revisiting. I wonder how so much effort you place to make this
    sort of wonderful informative site.

    Also visit my web page tracfone