画一个时钟(html+css+js)

这是一个很简约的时钟。。。。。。。

效果:

代码:

javascript 复制代码
<template>
  <div class="demo-box">
    <div class="clock">
      <ul class="mark">
        <li
            v-for="(rotate, index) in rotatedAngles"
            :key="index"
            :class="{ 'bold': index % 5 === 0 }"
            :style="{ transform: `translateY(90px) rotate(${rotate}deg)` }"
        ></li>
      </ul>
      <div id="min"></div>
      <div id="hour"></div>
      <div id="sec"></div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, computed} from 'vue';

let timer = null

const rotatedAngles = computed(() => {
  return Array.from({length: 60}, (_, index) => index * 6);
})

const startTime = () => {
  const min = document.getElementById('min')
  const sec = document.getElementById('sec')
  const hour = document.getElementById('hour')

  const now = new Date()
  const s = now.getSeconds()
  const then = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0)
  const diffInMil = now.getTime() - then.getTime()
  const h = diffInMil / (1000 * 60 * 60)
  const m = h * 60;

  if (hour || min || sec) {
    hour.style.transform = `rotate(${h * 30}deg)`;
    min.style.transform = `rotate(${m * 6}deg)`;
    sec.style.transform = `rotate(${s * 6}deg)`;
  }
}

onMounted(() => {
  startTime()
  timer = setInterval(() => {
    setTimeout(startTime, 0)
  }, 1000)
})

</script>

<style scoped lang="scss">
.demo-box {
  width: 800px;
  margin: 100px auto;
}

ul li {
  list-style: none;
}

@mixin center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.clock {
  width: 180px;
  height: 180px;
  position: relative;
}

.mark {
  width: 180px;
  height: 180px;
  position: relative;
}

//画刻度尺
.mark li {
  position: absolute;
  width: 6px;
  height: 2px;
  background: #666;
  border-radius: 1px;
  transform-origin: 90px;
}

.mark li.bold {
  width: 12px;
  height: 4px;
  margin-top: -1px;
  background: #000;
  border-radius: 2px;
}

#sec {
  //中心圆点
  @include center;
  background: #303030;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  z-index: 3;

  &:before,
  &:after {
    display: block;
    content: "";
    position: absolute;
  }

  //秒针
  &:after {
    width: 2px;
    height: 4.4em;
    top: -4.3em;
    background: #303030;
    left: 0;
    right: 0;
    margin: 0 auto;
    border-radius: 1px;
  }
}

#min,
#hour {
  @include center;
  z-index: 2;
  background: #303030;
  transform-origin: bottom center;
}

//分针
#min {
  width: 4px;
  height: 4.2em;
  top: -4.2em;
  border-radius: 4px;
}

//时针
#hour {
  width: 4px;
  height: 3em;
  top: -3em;
  border-radius: 4px;
}
</style>
相关推荐
噢,我明白了2 小时前
同源策略:为什么XMLHttpRequest不能跨域请求资源?
javascript·跨域
Hello_WOAIAI2 小时前
批量将 Word 文件转换为 HTML:Python 实现指南
python·html·word
sanguine__2 小时前
APIs-day2
javascript·css·css3
关你西红柿子2 小时前
小程序app封装公用顶部筛选区uv-drop-down
前端·javascript·vue.js·小程序·uv
济南小草根3 小时前
把一个Vue项目的页面打包后再另一个项目中使用
前端·javascript·vue.js
小木_.3 小时前
【python 逆向分析某有道翻译】分析有道翻译公开的密文内容,webpack类型,全程扣代码,最后实现接口调用翻译,仅供学习参考
javascript·python·学习·webpack·分享·逆向分析
LUwantAC3 小时前
CSS(一):选择器
前端·css
Aphasia3113 小时前
一次搞懂 JS 对象转换,从此告别类型错误!
javascript·面试
m0_748256563 小时前
Vue - axios的使用
前端·javascript·vue.js
m0_748256344 小时前
QWebChannel实现与JS的交互
java·javascript·交互