首页> 基础笔记 >JS/JQ基础学习 >经典案例 经典案例
JavaScript实例：构建一个简易时钟
作者：小萝卜 2023-03-21 【 javascript 】 浏览 628
简介JavaScript实例：构建一个简易时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时间对象</title>
<style type="text/css">
#time{width:200px;height:100px;background:cyan;text-align:center;line-height:100px;border-radius:20%;}
</style>
</head>
<body>
<!-- innerHTML -->
<div id="time"></div>
<script type="text/javascript">
setInterval(function(){
//创建时间对象 june july
var d = new Date();// 默认当前客户端电脑的时间 monday tuesday wednesday thursday friday saturday sunday
// var d = new Date(2011,10,11,11,11,11);//月份的索引是从0开始的
//获取年份
var year = d.getFullYear();//year年 getElementById
//获取月份
var month = d.getMonth()+1;//month月 7 => '07'
if(month < 10){
month = '0'+month;// '07'
}
//获取日期
var day = d.getDate();//date日期
if(day < 10){
day = '0'+day;
}
//获取小时
var hours = d.getHours();//hour小时 复数
if(hours < 10){
hours = '0'+hours;
}
//获取分钟
var minutes = d.getMinutes();//minute 分钟
if(minutes < 10){
minutes = '0'+minutes;
}
//获取秒数
var seconds = d.getSeconds();//second秒
if(seconds < 10){
seconds = '0'+seconds;
}
//获取星期数
var week = d.getDay();
//拼接时间字符串
var str = year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
//设置文本
var t = document.getElementById('time');
t.innerHTML = str;
//修改div的背景颜色 background:rgb(0,0,0);
var r = rand(0,255);
var b = rand(0,255);
var g = rand(0,255);
t.style.background = "rgb("+r+","+g+","+b+")";
},1000);//时间单位为毫秒 1秒 = 1000毫秒
//作业: 加上星期字符串
function rand(m,n){
return Math.ceil(Math.random()*(n-m+1))+(m-1);
}
</script>
</body>
</html>
很赞哦！ (0)
