时钟，HTML/Vue代码在线实时编辑、预览

格式化

支持Emmet，输入 p 后按 Tab键试试吧！

            
                1
2
3
4
5

            
            <!-- 示例代码 -->
<div class="time" :style="{'--percent': percent}">
  {{time}}
</div>

<style>

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

            
            /* 示例代码 */
body {
  margin: 0;
  padding: 0;
  font-size: 30vw;
  font-family: Consolas;
  color: white;
}

.time {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to right, #006400, #006400 calc(var(--percent, 0%) - 1%), #004B00 calc(var(--percent, 0%) + 1%))
}

格式化

            
                1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

            
            // 示例代码
import { ref, computed } from 'vue'

const now = ref(new Date());

setInterval(() => {
  now.value = new Date();
}, 335);

const pad = n => (n < 10 ? `0${n}` : `${n}`)
const percent = computed(() => `${(now.value.getSeconds() / 60 * 100).toFixed(2)}%`);
const time = computed(() => {
  return `${pad(now.value.getHours())}:${pad(now.value.getMinutes())}`;
})

预览

控制台