基本信息
源码名称：js+css+html实现罗马时钟
源码大小：2.92KB
文件格式：.rar
开发语言：js
更新时间：2020-08-13
友情提示：（无需注册或充值，赞助后即可获取资源下载链接）
嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300
本次赞助数额为： 3 元×
微信扫码支付：3 元
×
请留下您的邮箱，我们将在2小时内将文件发到您的邮箱
源码介绍
罗马时钟
var monthText = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"];
var dayText = ["01号", "02号", "03号", "04号", "05号", "06号", "07号","08号", "09号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号", "21号", "22号", "23号", "24号", "25号", "26号", "27号", "28号", "29号", "30号", "31号"];
var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var hourText = ["00点", "01点", "02点", "03点", "04点", "05点", "06点", "07点", "08点", "09点", "10点", "11点", "12点", "13点", "14点", "15点", "16点", "17点", "18点", "19点", "20点", "21点", "22点", "23点"];
var minuteText = ["60分", "01分", "02分", "03分", "04分", "05分", "06分", "07分", "08分", "09分", "10分","11分", "12分", "13分", "14分", "15分", "16分", "17分", "18分", "19分", "20分","21分", "22分", "23分", "24分", "25分", "26分", "27分", "28分", "29分", "30分","31分", "32分", "33分", "34分", "35分", "36分", "37分", "38分", "39分", "40分","41分", "42分", "43分", "44分", "45分", "46分", "47分", "48分", "49分", "50分","51分", "52分", "53分", "54分", "55分", "56分", "57分", "58分", "59分"];
var secondsText = ["60秒", "01秒", "02秒", "03秒", "04秒", "05秒", "06秒", "07秒", "08秒", "09秒", "10秒","11秒", "12秒", "13秒", "14秒", "15秒", "16秒", "17秒", "18秒", "19秒", "20秒","21秒", "22秒", "23秒", "24秒", "25秒", "26秒", "27秒", "28秒", "29秒", "30秒","31秒", "32秒", "33秒", "34秒", "35秒", "36秒", "37秒", "38秒", "39秒", "40秒","41秒", "42秒", "43秒", "44秒", "45秒", "46秒", "47秒", "48秒", "49秒", "50秒","51秒", "52秒", "53秒", "54秒", "55秒", "56秒", "57秒", "58秒", "59秒"];
var clock;
// 存放dom元素的数组
var monthList = [];
var dayList = [];
var weekList = [];
var hourList = [];
var minuteList = [];
var secondsList = [];
// 当前展示是否为圆形
var isCircle = false;
//二维数组 存放文字内容及页面显示标签
var textSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondsText, secondsList]
];
window.onload = function () {
init();
// 每隔100ms获得 当前时间 更新页面时间显示
setInterval(function () {
runTime();
}, 100);
// 在变成圆形之前先进性修改定位
changePosition();
// 延迟2000ms变成圆形
setTimeout(function () {
changeCircle();
}, 2000);
}
// 初始化函数
function init() {
clock = document.getElementById('clock');
// 生成标签 存放文字展示
for (var i = 0; i < textSet.length; i ) {
for (var j = 0; j < textSet[i][0].length; j ) {
var temp = createLabel(textSet[i][0][j]);
clock.appendChild(temp);
// 将生成的标签存放在数组list中
textSet[i][1].push(temp);
}
}
}
// 创建标签并将文字填充标签内 接收参数为文字内容
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();
// 初始化时间颜色 同时将走过时间设置为灰色
initStyle();
// 设置当前时间为白色
// 将当前时间月份存放在数组中
var nowValue = [month, day - 1, week, hour, minute, seconds];
for (var i = 0; i < nowValue.length; i ) {
var num = nowValue[i];
textSet[i][1][num].style.color = '#fff';
}
// 变成圆形
if (isCircle) {
// 确定圆心
var widthMid = document.body.clientWidth / 2;
var heightMid = document.body.clientHeight / 2;
// 将每一个dom元素确定到圆的位置
for (var i = 0; i < textSet.length; i ) {
for (var j = 0; j < textSet[i][0].length; j ) {
// 加算出每一个元素的位置 x y 坐标
// 每一个圆的半径与时分秒的位置有关
var r = (i 1) * 35 50 * i;
// 计算每一个平均的角度 再将每一个单位对齐 然后转化成弧度
var deg = 360 / textSet[i][1].length * (j - nowValue[i]) ;
// 计算出每一个dom元素的坐标
var x = r * Math.sin(deg * Math.PI / 180) widthMid;
var y = heightMid - r*Math.cos(deg * Math.PI / 180);
// 设置样式
var temp = textSet[i][1][j];
temp.style.transform = 'rotate(' (-90 deg ) 'deg)';
temp.style.left = x 'px';
temp.style.top = y 'px';
}
}
}
}
function initStyle() {
// 将所有标签置为灰色
// 利用取出dom元素
var label = document.getElementsByClassName('label');
for (var i = 0; i < label.length; i ) {
label[i].style.color = '#4d4d4d';
}
// 利用二维数组存放dom元素的数组
// for (var i = 0 ; i < textSet.length ; i ) {
// for (var j = 0 ; j < textSet[i][0].length ; j ) {
// textSet[i][1][j].style.color = "#4d4d4d";
// }
// }
}
// 修改position
function changePosition() {
for (let i = 0; i < textSet.length; i ) {
for (let j = 0; j < textSet[i][1].length; j ) {
// 先获得原来的位置 再修改position 设置left top
let tempX = textSet[i][1][j].offsetLeft "px";
let tempY = textSet[i][1][j].offsetTop "px";
// console.log(textSet[i][1][j]);
// 利用let 防止闭包
setTimeout(function () {
textSet[i][1][j].style.position = "absolute";
textSet[i][1][j].style.left = tempX;
textSet[i][1][j].style.top = tempY;
}, 50);
}
}
}
function changeCircle() {
isCircle = true;
clock.style.transform = "rotate(90deg)";
}
罗马时钟
var monthText = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"];
var dayText = ["01号", "02号", "03号", "04号", "05号", "06号", "07号","08号", "09号", "10号", "11号", "12号", "13号", "14号", "15号", "16号", "17号", "18号", "19号", "20号", "21号", "22号", "23号", "24号", "25号", "26号", "27号", "28号", "29号", "30号", "31号"];
var weekText = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
var hourText = ["00点", "01点", "02点", "03点", "04点", "05点", "06点", "07点", "08点", "09点", "10点", "11点", "12点", "13点", "14点", "15点", "16点", "17点", "18点", "19点", "20点", "21点", "22点", "23点"];
var minuteText = ["60分", "01分", "02分", "03分", "04分", "05分", "06分", "07分", "08分", "09分", "10分","11分", "12分", "13分", "14分", "15分", "16分", "17分", "18分", "19分", "20分","21分", "22分", "23分", "24分", "25分", "26分", "27分", "28分", "29分", "30分","31分", "32分", "33分", "34分", "35分", "36分", "37分", "38分", "39分", "40分","41分", "42分", "43分", "44分", "45分", "46分", "47分", "48分", "49分", "50分","51分", "52分", "53分", "54分", "55分", "56分", "57分", "58分", "59分"];
var secondsText = ["60秒", "01秒", "02秒", "03秒", "04秒", "05秒", "06秒", "07秒", "08秒", "09秒", "10秒","11秒", "12秒", "13秒", "14秒", "15秒", "16秒", "17秒", "18秒", "19秒", "20秒","21秒", "22秒", "23秒", "24秒", "25秒", "26秒", "27秒", "28秒", "29秒", "30秒","31秒", "32秒", "33秒", "34秒", "35秒", "36秒", "37秒", "38秒", "39秒", "40秒","41秒", "42秒", "43秒", "44秒", "45秒", "46秒", "47秒", "48秒", "49秒", "50秒","51秒", "52秒", "53秒", "54秒", "55秒", "56秒", "57秒", "58秒", "59秒"];
var clock;
// 存放dom元素的数组
var monthList = [];
var dayList = [];
var weekList = [];
var hourList = [];
var minuteList = [];
var secondsList = [];
// 当前展示是否为圆形
var isCircle = false;
//二维数组 存放文字内容及页面显示标签
var textSet = [
[monthText, monthList],
[dayText, dayList],
[weekText, weekList],
[hourText, hourList],
[minuteText, minuteList],
[secondsText, secondsList]
];
window.onload = function () {
init();
// 每隔100ms获得 当前时间 更新页面时间显示
setInterval(function () {
runTime();
}, 100);
// 在变成圆形之前先进性修改定位
changePosition();
// 延迟2000ms变成圆形
setTimeout(function () {
changeCircle();
}, 2000);
}
// 初始化函数
function init() {
clock = document.getElementById('clock');
// 生成标签 存放文字展示
for (var i = 0; i < textSet.length; i ) {
for (var j = 0; j < textSet[i][0].length; j ) {
var temp = createLabel(textSet[i][0][j]);
clock.appendChild(temp);
// 将生成的标签存放在数组list中
textSet[i][1].push(temp);
}
}
}
// 创建标签并将文字填充标签内 接收参数为文字内容
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();
// 初始化时间颜色 同时将走过时间设置为灰色
initStyle();
// 设置当前时间为白色
// 将当前时间月份存放在数组中
var nowValue = [month, day - 1, week, hour, minute, seconds];
for (var i = 0; i < nowValue.length; i ) {
var num = nowValue[i];
textSet[i][1][num].style.color = '#fff';
}
// 变成圆形
if (isCircle) {
// 确定圆心
var widthMid = document.body.clientWidth / 2;
var heightMid = document.body.clientHeight / 2;
// 将每一个dom元素确定到圆的位置
for (var i = 0; i < textSet.length; i ) {
for (var j = 0; j < textSet[i][0].length; j ) {
// 加算出每一个元素的位置 x y 坐标
// 每一个圆的半径与时分秒的位置有关
var r = (i 1) * 35 50 * i;
// 计算每一个平均的角度 再将每一个单位对齐 然后转化成弧度
var deg = 360 / textSet[i][1].length * (j - nowValue[i]) ;
// 计算出每一个dom元素的坐标
var x = r * Math.sin(deg * Math.PI / 180) widthMid;
var y = heightMid - r*Math.cos(deg * Math.PI / 180);
// 设置样式
var temp = textSet[i][1][j];
temp.style.transform = 'rotate(' (-90 deg ) 'deg)';
temp.style.left = x 'px';
temp.style.top = y 'px';
}
}
}
}
function initStyle() {
// 将所有标签置为灰色
// 利用取出dom元素
var label = document.getElementsByClassName('label');
for (var i = 0; i < label.length; i ) {
label[i].style.color = '#4d4d4d';
}
// 利用二维数组存放dom元素的数组
// for (var i = 0 ; i < textSet.length ; i ) {
// for (var j = 0 ; j < textSet[i][0].length ; j ) {
// textSet[i][1][j].style.color = "#4d4d4d";
// }
// }
}
// 修改position
function changePosition() {
for (let i = 0; i < textSet.length; i ) {
for (let j = 0; j < textSet[i][1].length; j ) {
// 先获得原来的位置 再修改position 设置left top
let tempX = textSet[i][1][j].offsetLeft "px";
let tempY = textSet[i][1][j].offsetTop "px";
// console.log(textSet[i][1][j]);
// 利用let 防止闭包
setTimeout(function () {
textSet[i][1][j].style.position = "absolute";
textSet[i][1][j].style.left = tempX;
textSet[i][1][j].style.top = tempY;
}, 50);
}
}
}
function changeCircle() {
isCircle = true;
clock.style.transform = "rotate(90deg)";
}