H5C3时钟实例(rem适配)

1.原理分析和效果图

先上效果图:
H5C3时钟实例(rem适配)_第1张图片

屏幕适配上使用rem适配,假设用户的手机屏幕最下宽度是375px,而谷歌浏览器最小的字体大小为12px,所以我以375px为标准尺寸进行rem适配,即375px的屏幕设置html标签字体大小为12px,随着屏幕宽度增大,1rem也随之增大

表盘使用的是圆角,使之展现为正圆的效果。刻度条其实是几条div通过rotate产生的,但是中间用一个遮罩盖住了(粉色区域)
H5C3时钟实例(rem适配)_第2张图片

页面初始化后开启定时器,每秒钟获取一次当前时间,解析时分秒,计算相应的角度值,将其应用到相关元素上

2.完整代码




    
    
    
    时钟
    
    


    
12
3
6
9
2019-4-18
星期四

你可能感兴趣的:(H5C3时钟实例(rem适配))