css 渐变色时间计时代码

释放双眼,带上耳机,听听看~!

展示:
[vplayer url=”https://sirblog.cn/wp-content/uploads/2019/12/1614412051.mov” /]
css 渐变色时间计时代码插图

代码:

<!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]

人已赞赏
技术杂烩

KALI Linux、deepin开启SSH方法

2019-12-18 15:00:00

PHP学习笔记技术杂烩

PHP 使用 phpmailer 发送电子邮件 以及封装方法

2019-12-22 11:14:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索