JS css3圆形虚线时钟ui特效特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

15 57 20



特效描述:圆形虚线 时钟ui。原生Javascript基于css3制作简易的圆形虚线的时钟,默认获取电脑本地时间时钟代码。

代码结构

1. 引入CSS

<link type="text/css" href="css/style.css" rel="stylesheet" />

2. HTML代码

<div class="clock">
	<ul class="mark">
		<script>
			{
				let i = 0;
				let html = '';
				while (i < 60) {
					let n = i / 5 % 12;
					n = n === 0 ? 12 : n;
					let bold = isInt(n);
					html +=
						`<li class="${bold ? ' bold': ''}" style="transform: translateY(250px) rotate(${i * 6}deg);"></li>`;
					i++;
				}
				document.write(html);
			}
		</script>
	</ul>
	<script>
		{
			let angle = 30,
				x = 110,
				y = -190,
				i = 1,
				html = '';
			html += `<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;
			while (i++ < 12) {
				let pos = rotate(x, y, angle);
				x = pos.x;
				y = pos.y;
				html += `<div class="numbers" style="transform: translate(${x}px, ${y}px);">${i}</div>`;
			}
			document.write(html);
		}
	</script>
	<div class="time">
		<div id="date"></div>
		<div id="now"></div>
		<div id="day"></div>
	</div>
	<div class="hour-hand" id="h"></div>
	<div class="minute-hand" id="m"></div>
	<div class="second-hand" id="s"></div>
	<div class="center"></div>
</div>
<script>
{
	let f = (e, i) => (i != 0 && e < 10 ? '0' + e : e);
	setInterval(() => {
		let t = new Date();
		rotateElement(h, t.getHours() * 30 + t.getMinutes() / 60 * 30);
		rotateElement(m, t.getMinutes() * 6 + t.getSeconds() / 60 * 6);
		rotateElement(s, t.getSeconds() * 6 + t.getMilliseconds() / 1000 * 6);
		date.innerHTML = [t.getFullYear(), t.getMonth() + 1, t.getDate()].map(f).join('-');
		day.innerHTML = '星期' + '日一二三四五六' [t.getDay()];
		now.innerHTML = [t.getHours(), t.getMinutes(), t.getSeconds()].map(f).join(':');
	}, 1000 / 60);
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 时间轴 日历选择器 时间日期插件 日历日期时间

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到