数字时钟[HTML代码](可复制源代码)

数字时钟[HTML代码](可复制源代码)

Code

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数字时钟</title>
    <link rel="stylesheet" href="./122-数字时钟.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

</head>

<body>
    <div class="container">
        <ul class="numbers hours hoursFirst">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>

        <ul class="numbers hours hoursLast">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>



        <ul class="numbers minutes minutesFirst">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>
        <ul class="numbers minutes minutesLast">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>


        <ul class="numbers seconds secondsFirst">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>
        <ul class="numbers seconds secondsLast">
            <li><span>0</span></li>
            <li><span>1</span></li>
            <li><span>2</span></li>
            <li><span>3</span></li>
            <li><span>4</span></li>
            <li><span>5</span></li>
            <li><span>6</span></li>
            <li><span>7</span></li>
            <li><span>8</span></li>
            <li><span>9</span></li>
        </ul>
    </div>
</body>
<script src="./122-数字时钟.js"></script>

</html>
CSS
@import url("https://fonts.googleapis.com/css?family=Anton");

body {
  background-color: #2e282a;
  font-family: "Anton", sans-serif;
}

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  transform: rotateX(-90deg);
  transform-style: preserve-3d;
}

.numbers {
  height: 200px;
  width: 50px;
  padding: 0;
  position: relative;
  margin: auto;
  list-style-type: none;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
  transition: all ease 0.5s;
  display: inline-block;
}

.numbers li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50%;
  width: 0;
  transform-style: preserve-3d;
  transform-origin: bottom;
  box-sizing: border-box;
}

.numbers li span {
  height: 50px;
  width: 50px;
  display: inline-block;
  border-radius: 2px;
  text-align: center;
  font-size: 5rem;
  line-height: 50px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translateX(-50%) translateY(-40px) rotateX(90deg) rotate(90deg);
}

.numbers li:nth-child(1) {
  transform: rotate(0deg);
}

.numbers li:nth-child(2) {
  transform: rotate(-36deg);
}

.numbers li:nth-child(3) {
  transform: rotate(-72deg);
}

.numbers li:nth-child(4) {
  transform: rotate(-108deg);
}

.numbers li:nth-child(5) {
  transform: rotate(-144deg);
}

.numbers li:nth-child(6) {
  transform: rotate(-180deg);
}

.numbers li:nth-child(7) {
  transform: rotate(-216deg);
}

.numbers li:nth-child(8) {
  transform: rotate(-252deg);
}

.numbers li:nth-child(9) {
  transform: rotate(-288deg);
}

.numbers li:nth-child(10) {
  transform: rotate(-324deg);
}

.numbers.hours li span {
  color: #76b041;
}

.numbers.minutes li span {
  color: #17bebb;
}

.numbers.seconds li span {
  color: #ffc914;
}
JavaScript
$(document).ready(function () {

    const getFirstDigit = (x) => parseInt(x / 10);
    const getLastDigit = (x) => parseInt(x % 10);

    setInterval(() => {
        var today = new Date();
        var hours = today.getHours();
        var minutes = today.getMinutes();
        var seconds = today.getSeconds();

        $(".secondsLast").css({
            'transform': 'rotateY(90deg) rotate(' + getLastDigit(seconds) * 36 + 'deg)',
        });
        $(".secondsFirst").css({
            'transform': 'rotateY(90deg) rotate(' + getFirstDigit(seconds) * 36 + 'deg)',
        });

        $(".minutesLast").css({
            'transform': 'rotateY(90deg) rotate(' + getLastDigit(minutes) * 36 + 'deg)',
        });
        $(".minutesFirst").css({
            'transform': 'rotateY(90deg) rotate(' + getFirstDigit(minutes) * 36 + 'deg)',
        });

        $(".hoursLast").css({
            'transform': 'rotateY(90deg) rotate(' + getLastDigit(hours) * 36 + 'deg)',
        });
        $(".hoursFirst").css({
            'transform': 'rotateY(90deg) rotate(' + getFirstDigit(hours) * 36 + 'deg)',
        });

    }, 1000);
});

实现思路拆分

CSS 部分
@import url("https://fonts.googleapis.com/css?family=Anton"); 

引入Google字体“Anton”。

body {
  background-color: #2e282a;
  font-family: "Anton", sans-serif;
}

设置页面背景颜色和字体。

.container {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  transform: rotateX(-90deg);
  transform-style: preserve-3d;
}

定义时钟容器的样式。

.numbers {
  height: 200px;
  width: 50px;
  padding: 0;
  position: relative;
  margin: auto;
  list-style-type: none;
  transform-style: preserve-3d;
  transform: rotateY(90deg);
  transition: all ease 0.5s;
  display: inline-block;
}

定义数字的样式。

.numbers li {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 50%;
  width: 0;
  transform-style: preserve-3d;
  transform-origin: bottom;
  box-sizing: border-box;
}

定义数字列表项的样式。

.numbers li span {
  height: 50px;
  width: 50px;
  display: inline-block;
  border-radius: 2px;
  text-align: center;
  font-size: 5rem;
  line-height: 50px;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  transform: translateX(-50%) translateY(-40px) rotateX(90deg) rotate(90deg);
}

定义数字的样式。

.numbers.hours li span {
  color: #76b041;
}

定义小时数字的颜色。

.numbers.minutes li span {
  color: #17bebb;
}

定义分钟数字的颜色。

.numbers.seconds li span {
  color: #ffc914;
}

定义秒钟数字的颜色。

JavaScript 部分
$(document).ready(function () {
 const getFirstDigit = (x) => parseInt(x / 10);
 const getLastDigit = (x) => parseInt(x % 10);
 setInterval(() => {
  var today = new Date();
  var hours = today.getHours();
  var minutes = today.getMinutes();
  var seconds = today.getSeconds();

  $(".secondsLast").css({
   'transform': 'rotateY(90deg) rotate(' + getLastDigit(seconds) * 36 + 'deg)',
  });
  $(".secondsFirst").css({
   'transform': 'rotateY(90deg) rotate(' + getFirstDigit(seconds) * 36 + 'deg)',
  });
  $(".minutesLast").css({
   'transform': 'rotateY(90deg) rotate(' + getLastDigit(minutes) * 36 + 'deg)',
  });
  $(".minutesFirst").css({
   'transform': 'rotateY(90deg) rotate(' + getFirstDigit(minutes) * 36 + 'deg)',
  });
  $(".hoursLast").css({
   'transform': 'rotateY(90deg) rotate(' + getLastDigit(hours) * 36 + 'deg)',
  });
  $(".hoursFirst").css({
   'transform': 'rotateY(90deg) rotate(' + getFirstDigit(hours) * 36 + 'deg)',
  });
 }, 1000);
});
当文档加载完成后,设置定时器每秒更新时钟。
© 版权声明
THE END
喜欢就支持一下吧
点赞14 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容