罗盘文字时钟js实现代码(好像某音比较火)

原生抖音罗盘时钟代码
给大家分享这款就是通过原生j来s实现的文字时钟源码,有喜欢的朋友可以下载,无需安装,上传访问即可使用

页面罗盘文字时钟http://shizhong.74ka.cn/

上代码

// 利用时间对象获得 当前 时间

// var now = new Date();

var yearText = [”] var monthText = [“一月”, “二月”, “三月”, “四月”, “五月”, “六月”, “七月”, “八月”, “九月”, “十月”, “十一月”, “十二月”];

var dayText = [“一号”, “二号”, “三号”, “四号”, “五号”, “六号”, “七号”, “八号”, “九号”, “十号”, “十一号”, “十二号”, “十三号”, “十四号”, “十五号”, “十六号”, “十七号”, “十八号”, “十九号”, “二十号”, “二十一号”, “二十二号”, “二十三号”, “二十四号”, “二十五号”, “二十六号”, “二十七号”, “二十八号”, “二十九号”, “三十号”, “三十一号”];

var weekText = [“星期日”, “星期一”, “星期二”, “星期三”, “星期四”, “星期五”, “星期六”];

var hourText = [“零点”, “一点”, “两点”, “三点”, “四点”, “五点”, “六点”, “七点”, “八点”, “九点”, “十点”, “十一点”, “十二点”, “十三点”, “十四点”, “十五点”, “十六点”, “十七点”, “十八点”, “十九点”, “二十点”, “二十一点”, “二十二点”, “二十三点”];

var minuteText = [“零分”, “一分”, “二分”, “三分”, “四分”, “五分”, “六分”, “七分”, “八分”, “九分”, “十分”, “十一分”, “十二分”, “十三分”, “十四分”, “十五分”, “十六分”, “十七分”, “十八分”, “十九分”, “二十分”, “二十一分”, “二十二分”, “二十三分”, “二十四分”, “二十五分”, “二十六分”, “二十七分”, “二十八分”, “二十九分”, “三十分”, “三十一分”, “三十二分”, “三十三分”, “三十四分”, “三十五分”, “三十六分”, “三十七分”, “三十八分”, “三十九分”, “四十分”, “四十一分”, “四十二分”, “四十三分”, “四十四分”, “四十五分”, “四十六分”, “四十七分”, “四十八分”, “四十九分”, “五十分”, “五十一分”, “五十二分”, “五十三分”, “五十四分”, “五十五分”, “五十六分”, “五十七分”, “五十八分”, “五十九分”];

var secondsText = [“一秒”, “二秒”, “三秒”, “四秒”, “五秒”, “六秒”, “七秒”, “八秒”, “九秒”, “十秒”, “十一秒”, “十二秒”, “十三秒”, “十四秒”, “十五秒”, “十六秒”, “十七秒”, “十八秒”, “十九秒”, “二十秒”, “二十一秒”, “二十二秒”, “二十三秒”, “二十四秒”, “二十五秒”, “二十六秒”, “二十七秒”, “二十八秒”, “二十九秒”, “三十秒”, “三十一秒”, “三十二秒”, “三十三秒”, “三十四秒”, “三十五秒”, “三十六秒”, “三十七秒”, “三十八秒”, “三十九秒”, “四十秒”, “四十一秒”, “四十二秒”, “四十三秒”, “四十四秒”, “四十五秒”, “四十六秒”, “四十七秒”, “四十八秒”, “四十九秒”, “五十秒”, “五十一秒”, “五十二秒”, “五十三秒”, “五十四秒”, “五十五秒”, “五十六秒”, “五十七秒”, “五十八秒”, “五十九秒”, “六十秒”];

var clock; var yearList = []; var monthList = []; var dayList = []; var weekList = []; var hourList = []; var minuteList = [];

var secondsList = [];

/** * 分析,完成效果: * 1. 实现时钟排列 * * 步骤: * 1. 初始化,渲染dom * 2. 实现随着时间高亮 * 3. 添加动画,使之移动 */

var textList = [ [yearText, yearList], [monthText, monthList], [dayText, dayList], [weekText, weekList], [hourText, hourList], [minuteText, minuteList], [secondsText, secondsList], ] window.onload = function () { init(); setTimeout(function () { initTransition(); }, 0) setTimeout(function () { var timeArr = [0, 0, 0, 0, 0, 0, 0] rotateTransition(timeArr) setInterval(function () { runtime() }, 1000) }, 1000)

// setInterval(function () { // runtime() // }, 100) }; // 初始化函数 // function init() { // clock = document.getElementById(‘clock’); // // 生成标签 存放文字展示 // for (var i = 0; i < textList.length; i++) { // for (var j = 0; j < textList[i][0].length; j++) { // var temp = createLabel(textList[i][0][j]); // clock.appendChild(temp); // // 将生成的标签存放在数组list中 // textList[i][1].push(temp); // } // } // } function init() { clock = document.querySelector(‘#clock’); for (var i in textList) { for (var j in textList[i][0]) { var temp = createLabel(textList[i][0][j]); // 将生成的标签存放在数组list中 clock.appendChild(temp); textList[i][1].push(temp); } } console.log(textList); } // 创建标签并将文字填充标签内 接收参数为文字内容 function createLabel(text) { var div = document.createElement(‘div’); div.classList.add(‘label’); div.innerText = text; return div; } // 获得时间 function runtime() { var now = new Date(); // 获得月 日期 小时 分钟 秒钟 var month = now.getMonth(); var day = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var seconds = now.getSeconds(); var timeArr = [0, month, day-1, week, hour, minute, seconds] console.log(timeArr) clearColor(); rotateTransition(timeArr); addColor(timeArr); } // 为时间添加样式 function addColor(timeArr) { // var label = document.querySelectorAll(‘.label’) // for (var i in timeArr) { // var len = i > 1 ? textList[i – 1][0].length : 0; // var num = timeArr[i]; // var index = len + num; // label[index].classList.add(‘now’) // // console.log(label[index]) // } for (var i = 1; i < timeArr.length; i++) { var index = timeArr[i]; // for (var j = 0; j < timeArr.length; j++) { // var temp = textList[i][1][j]; // // var deg = 360 / textList[i][0].length * j; // var deg = 360 / textList[i][0].length * (j – timeArr[i]); // temp.style.transform = temp.style.transform.replace(/-?\d+deg/, deg + ‘deg’); // // console.log(temp) // } textList[i][1][index].classList.add(‘now’) } } // 清除现在时间颜色 function clearColor() { var now = document.querySelectorAll(‘.now’); now.forEach(function (item) { item.classList.remove(‘now’); }) } // 初始展开 function initTransition() { for (var i in textList) { for (var item of textList[i][1]) { item.style.transform = ‘translate(‘ + i * 80 + ‘px,-50%)’ item.style.transformOrigin = -(i * 80) + ‘px 50%’; } } } // 扇形展开 function rotateTransition(timeArr) { for (var i in textList) { for (var j in textList[i][1]) { var temp = textList[i][1][j]; var deg = 360 / textList[i][0].length * (j – timeArr[i]); temp.style.transform = ‘translate(‘ + i * 80 + ‘px,-50%)’ + ‘ rotate(‘ + deg + ‘deg)’; } } }

html写法 直接调用

<!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> <link rel=”stylesheet” href=”style.css”> </head> <body> <div id=”clock”></div> <script src=”index.js”></script> </body> </html>

CSS样式表

*{ margin:0; padding:0; } html,body{ width:100%; height:100%; background-color: #000; overflow: hidden; } #clock { position: relative; width: 100%; height: 100%; background: black; } .label{ position: absolute; top: 50%; left: 50%; display:inline-block; color:#4d4d4d; text-align: center; padding:0 5px; font-size:19px; transition:all 1s; transform: translate(-50%,-50%); transform-origin: 0% 0%; } .now{ color: #fff; } 

好了将这三个文件直接上传至网站根目录即可

也可以通过下面的代码直接调用

<!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>Document</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<div id=”clock”></div>
<script src=”http://shizhong.74ka.cn/index.js”></script>
</body>
</html>

 

<script src=”http://shizhong.74ka.cn/index.js”></script>