你说什么？你要在网页上画出一个优雅的iOS时钟。没错，这是真的

本文链接：https://blog.csdn.net/qq_38902844/article/details/106163445

说明

本程序的HTML/CSS/JS 代码分别保存在index.html / index.css / index.js 文件中，而index.css 和 index.js 文件又分别保存在 css 和 js 文件中，具体效果如下图所示
本程序使用Chrome/Firefox/360浏览器/Opera浏览器打开后，显示效果全部正常，效果图见下方

效果图

精细效果图
Chrome浏览器打开效果图
Firefox浏览器打开效果图
360浏览器打开效果图
Opera浏览器打开效果图

源代码

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=I, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>iOS时钟</title>
    <!-- CSS文件是保存在css文件夹下的-->
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <div class="clock">
        <!-- 表盘 -->
        <ul class="dial">
            <!-- 表盘上的数字由JS动态生成 -->
        </ul>
        <!-- 中间的圆点 -->
        <div class="point"></div>
        <!-- 时分秒针 -->
        <div class="hour"></div>
        <div class="minute"></div>
        <div class="second"></div>
    </div>
    <!-- JS文件是保存在js文件夹下的-->
    <script src="js/index.js"></script>
</body>
</html>

CSS 代码

*{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}
.clock{
    position: relative;
    width: 230px;
    height: 230px;
    margin: 300px auto;
    border-radius: 40px;
    background-color: #000;
}
/* 圆形白色表盘 */
.dial{
    position: relative;
    top: 15px;
    left: 15px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: #fff;
}
li{
    position: absolute;
    /* 首先让所有数字都原来12的位置，然后再旋转 */
    top: 0;
    left: 50%;
    width: 30px;
    margin-left: -15px;

    font-size: 20px;
    text-align: center;
    /* 改变旋转中心为表盘的圆心 */
    /* 移动的相对原点是li元素的左上角 */
    transform-origin: 15px 100px;
}
/* span元素是行内元素，无法旋转 */
li span{
    display: inline-block;
}

/* 圆点 */
.point{
    /* 相当于clock进行定位 */
    position: absolute;
    /* 水平垂直居中 */
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);

    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;

}
.hour{
    position: absolute;
    left: 50%;
    margin-left: -2px;
    /* 230/2-70=45px */
    top: 65px;
    width: 4px;
    height: 50px;
    background-color: #000;

    /* 改变圆心（相对于自身） */
    transform-origin: center bottom;
    transform: rotate(30deg);
}
.minute{
    position: absolute;
    left: 50%;
    margin-left: -1.5px;
    top: 45px;
    width: 3px;
    height: 70px;
    background-color: #000;
    transform-origin: center bottom;
    transform: rotate(60deg);
}
.second{
    position: absolute;
    left: 50%;
    margin-left: -1px;
    top: 35px;
    width: 2px;
    height: 90px;
    background-color: orange;
    transform-origin: center 80px;
    transform: rotate(0deg);
}

JS代码


// 获取表盘
var dial = document.querySelector(".dial");
// 获取时分秒针
var oHour = document.querySelector(".hour");
var oMinute = document.querySelector(".minute");
var oSecond = document.querySelector(".second");
var total = 12;

// 初始化函数
function init(){
    var str = '';
    for(var i=1; i<=total; i++){
        str += '<li class="num" style="transform: rotate(' + i*30 + 'deg)"> \
                    <span style="transform: rotate(' + (-i)*30 + 'deg)" >' + i + '</span> \
                </li>';
    }
    dial.innerHTML = str;
    // 开启定时器，定时调用draw函数
    setInterval(draw,1000/60);
}

init();

function draw(){
    // 获取当前日期时间 
    var date = new Date();

    // 获取秒和毫秒
    var second = date.getSeconds();
    var msec = date.getMilliseconds();
    // 把毫秒转化成秒，和秒拼在一起，如：23.456
    var fillSecond = second + msec/1000;
    // 每秒秒针转6度
    oSecond.style.transform = 'rotate(' + fillSecond*6 + 'deg)';

    var minute = date.getMinutes();
    var fillMinute = minute + second/60;
    // 一分钟也就转6度
    oMinute.style.transform = 'rotate(' + fillMinute*6 + 'deg)';

    var hour = date.getHours();
    var fillHour = hour + minute/60;
    // 一小时转30度
    oHour.style.transform = 'rotate(' + fillHour*30 + 'deg)';
}