H5C3时钟实例(rem适配)
1.原理分析和效果图
先上效果图：
屏幕适配上使用rem适配，假设用户的手机屏幕最下宽度是375px，而谷歌浏览器最小的字体大小为12px，所以我以375px为标准尺寸进行rem适配，即375px的屏幕设置html标签字体大小为12px，随着屏幕宽度增大，1rem也随之增大
表盘使用的是圆角，使之展现为正圆的效果。刻度条其实是几条div通过rotate产生的，但是中间用一个遮罩盖住了（粉色区域）
页面初始化后开启定时器，每秒钟获取一次当前时间，解析时分秒，计算相应的角度值，将其应用到相关元素上
2.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>时钟</title>
<style>
html{
font-size: 10px;
}
*{
margin: 0;
padding: 0;
}
.clock{
margin: 5rem auto;
width: 28rem;
height:28rem;
border:10px solid #ccc;
border-radius: 50%;
position: relative;
max-width: 640px;
}
.clock > .line{
position: absolute;
width: 0.8rem;
height: 100%;
background-color: #ccc;
left: 50%;
transform-origin: center center;
transform: translate(-50%,0);
}
.clock > .line:nth-of-type(1){
transform: translate(-50%,0) rotate(30deg);
}
.clock > .line:nth-of-type(2){
transform: translate(-50%,0) rotate(60deg);
}
.clock > .line:nth-of-type(3){
width: 1rem;
transform: translate(-50%,0) rotate(90deg);
}
.clock > .line:nth-of-type(4){
transform: translate(-50%,0) rotate(120deg);
}
.clock > .line:nth-of-type(5){
transform: translate(-50%,0) rotate(150deg);
}
.clock > .line:nth-of-type(6){
width: 1rem;
transform: translate(-50%,0) rotate(180deg);
}
.clock > .cover{
position: absolute;
background-color: #fff;
width: 25rem;
height: 25rem;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 10;
border-radius: 50%;
}
.clock > .cover > .mark{
position: absolute;
width: 4rem;
height: 3rem;
line-height: 3rem;
z-index: 50;
text-align: center;
font-size: 3rem;
font-weight: bold;
}
.clock > .cover > .mark:nth-of-type(1){
top: 0;
left: 50%;
transform: translate(-50%,0);
}
.clock > .cover > .mark:nth-of-type(2){
top: 50%;
right: 0;
transform: translate(0,-50%);
}
.clock > .cover > .mark:nth-of-type(3){
bottom:0;
left: 50%;
transform: translate(-50%,0);
}
.clock > .cover > .mark:nth-of-type(4){
top: 50%;
left: 0;
transform: translate(0,-50%);
}
.clock > .cover > .weekday,
.clock > .cover > .date{
position: absolute;
width: 12rem;
height: 2rem;
line-height: 2rem;
z-index: 50;
text-align: center;
font-size: 2rem;
font-weight: bold;
left: 50%;
transform: translate(-50%,0);
}
.clock > .cover > .date{
top:20%;
}
.clock > .cover > .weekday{
bottom:20%;
}
.clock > .hour{
position: absolute;
background-color: rgba(255,0,0,0.5);
width: 0.6rem;
height: 8rem;
left: 50%;
bottom: 50%;
transform: translate(-50%,0);
z-index: 20;
transform-origin: center bottom;
}
.clock > .minute{
position: absolute;
background-color: rgba(0,255,0,0.5);
width: 0.4rem;
height: 9rem;
left: 50%;
bottom: 50%;
transform: translate(-50%,0);
z-index: 30;
transform-origin: center bottom;
}
.clock > .second{
position: absolute;
background-color: rgba(0,0,255,0.5);
width: 0.3rem;
height: 10rem;
left: 50%;
bottom: 50%;
transform: translate(-50%,0);
z-index: 40;
transform-origin: center bottom;
}
.clock > .origin{
position: absolute;
background-color: #ccc;
width: 2rem;
height: 2rem;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
z-index: 50;
border-radius: 50%;
}
</style>
<script>
// 设定rem
setRem();
window.onload=function(){
//设置定时器才指针走起来
setInterval(function(){
setClock();
},1000);
}
function setRem(){
// 设置能适配的最小屏幕宽度（375宽度对应12px 满屏为31.25rem）
var min = 375
// 设置能适配的最大屏幕宽度
var max = 640
if(window.screen.width >= max){
//超过640的宽度一览表按640处理 12是因为谷歌浏览器最小字体是12px
document.documentElement.style.fontSize = max/min * 12 + "px";
}else{
document.documentElement.style.fontSize = window.screen.width/min * 12 + "px";
}
}
function setClock(){
//获取指针对应的dom元素
var hourHand = document.querySelector('.hour');
var minuteHand = document.querySelector('.minute');
var secondHand = document.querySelector('.second');
var date = new Date();
//获取时分秒
var hour = date.getHours()%12;
var minute = date.getMinutes();
var second = date.getSeconds();
//根据当前时间获取各指针的初始角度值
var hourDeg = hour/12*360 + minute/60*30;
var minuteDeg = minute/60*360;
var secondDeg = second/60*360;
//将角度值应用到时钟上
hourHand.style.transform = `translate(-50%,0) rotate(${hourDeg}deg)`;
minuteHand.style.transform = `translate(-50%,0) rotate(${minuteDeg}deg)`;
secondHand.style.transform = `translate(-50%,0) rotate(${secondDeg}deg)`;
//获取日期
var year = date.getFullYear();
var month = date.getMonth() + 1;
var d = date.getDate();
var dateStr = `${year}-${month}-${d}`;
if( dateStr != document.querySelector('.date').innerHTML ){
document.querySelector('.date').innerHTML = dateStr;
}
//获取星期
var weekday = date.getDay();
var weekdayArr=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var weekdayStr = document.querySelector('.weekday').innerHTML;
if( weekdayStr != weekdayArr[weekday] ){
document.querySelector('.weekday').innerHTML = weekdayArr[weekday];
}
}
</script>
</head>
<body>
<div class="clock">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="cover">
<div class="mark">12</div>
<div class="mark">3</div>
<div class="mark">6</div>
<div class="mark">9</div>
<div class="date">2019-4-18</div>
<div class="weekday">星期四</div>
</div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="origin"></div>
</div>
</body>
</html>
H5C3时钟实例(rem适配)的更多相关文章
- em与rem之间的区别以及移动设备中的rem适配方案
em与rem之间的区别: 共同点: 它们都是像素单位 它们都是相对单位 不同点: em大小是基于父元素的字体大小 rem大小是基于根元素(html)的字体的大小 实例: <!DOCTYPE ht ...
- 移动端使用rem适配及相关问题
移动端适配方案,说多也很多.可以使用百分比布局,但百分比与em都是基于父元素进行计算的,在实际应用中不是很方便.使用rem不仅可以设置字体大小,块大小也可以设置.而且可以良好的适配各种终端,所以这方案 ...
- rem适配
//REM适配new function() { var _self = this; _self.width = 640; // 设置默认最大宽度 _self.fontSize = 100; // 默认 ...
- webapp思路和rem适配极其viewport
webapp在制作时候,页面上要加入viewport标签,用来进行适配; viewport的meta标签,指的是在移动端显示的时候,viewport是多大?移动端的浏览器是屏幕宽,viewport一般 ...
- 一步步教你使用rem适配不同屏幕的移动设备
1.先说说几个前端常用的几个单位的概论: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch ...
- 谈谈我的移动端rem适配方案
最近有点怀疑人生,毕竟一个人写前端,有时候会怀疑自己理解的一些东西包括用法有没有符合标准.趁着这阵子闲下来,翻了翻别人的rem适配博客,发现有点绕口,怪自己是个强迫症,啥都要自己去试试结果并从中理解, ...
- js动态计算移动端rem适配问题
第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...
- 移动端 rem适配方法
rem适配 一, 网易适配方法 屏幕宽度/设计稿rem宽度=页面动态font-size值(如:375/7.5=50) document.documentElement. ...
- H5移动端rem适配
/** * 移动端自适应 */ <meta name="viewport" content="width=device-width,user-scalable=no ...
- 移动端最强适配（rem适配之px2rem）&& 移动端结合Vuex实现简单loading加载效果
一.rem之px2rem适配 前言:相信许多小伙伴上手移动端时面对各式各样的适配方案,挑选出一个自己觉得简便.实用.高效的适配方案是件很纠结的事情. 深有体会... 经过多个移动端项目从最初的 vie ...
随机推荐
- 全面升级，票据识别新纪元：合合信息TextIn多票识别2.0
票据识别 - 自动化业务的守门员 发票.票据识别,是OCR技术和RPA.CMS系统结合的一个典型场景,从覆盖率.覆盖面的角度来说,应该也是结合得最成功的场景之一. 旧瓶装新酒,已经成熟的产品何苦费 ...
- Azure – Azure Active Directory
前言 虽然它好像是快过时了, 但目前还得用到. 先不研究新的先. Azure 的 service 如果要通过 API 调用的话, 就需要 Azure Active Directory (Azure A ...
- java 线程、进程及相关知识点 《笔记一》
一.线程.进程 线程,就是是进程的一个单位,程序最小执行单位. 进程,就是一个执行中的应用程序:由此可见,进程是由很多线程组成的: 线程生命周期,就是管杀也管埋的过程,生老病死: 线程的5个状态: 新 ...
- 暑假集训CSP提高模拟4
A.White and Black 暴力的 \(O(nq)\) 做法比较显然,因为对于根节点来说,只有它自己可以改变自己的颜色,因此如果它是黑色则一定需要更改自己,同时把更改传下去(应该没有那种每次真 ...
- Kubernetes基础（Pod？Label？Namespace？Deployment？Service？）（十二）
上面我们都是在架构层面了解 Kubernetes,但是似乎没有发现关于容器的说明,Kubernetes 作为容器编排引擎,那么他是怎么去对容器进行编排的呢?在 Kubernetes 集群中抽象了很多集 ...
- 【USB3.0协议学习】Topic4·USB3.0的Port Connect State Machine和设备枚举
上一节的文章[USB3.0协议学习]Topic2·USB3.0的LTSSM分析中我们详细分析了USB3.0协议中的链路训练状态机(LTSSM)的各状态和跳转条件,覆盖了所有LTSSM状态.本文我们将从 ...
- 如何使用hardware breakpoint
要使用内核的硬件断点(hardware breakpoint)来定位内核模块中的内存访问问题,你可以通过以下步骤进行设置和调试. 1. 确定要监控的内存地址 首先,你需要确定你想要监控的内存地址.这可 ...
- 对3D图像进行裁剪
在对医学图像进行深度学习的过程中,我们会遇到图片过大,导致train的过程中网络会瘫痪,所以我们会考虑到对图像进行分割.比如一张155x240x240的图像,我们可以将他分割成一系列128x128x1 ...
- 9月《中国数据库行业分析报告》已发布，47页干货带你详览 MySQL 崛起之路！
为了帮助大家及时了解中国数据库行业发展现状.梳理当前数据库市场环境和产品生态等情况,从2022年4月起,墨天轮社区行业分析研究团队出品将持续每月为大家推出最新<中国数据库行业分析报告>,持 ...
- 默认nginx.conf
user nginx; worker_processes auto; error_log /var/log/nginx/error.log notice; pid /var/run/nginx.pid ...