外部css：
#clock img{
width: 50px;
height: auto;
}
#clock{
text-align: center;
border: 3px dotted #67B168;
border-radius: 20px;
margin: 44px;
padding: 22px;
background-image:
linear-gradient(90deg, transparent 79px, rgb(171, 206, 212) 79px, rgb(171, 206, 212) 81px, transparent 81px),
linear-gradient(rgb(238, 238, 238) 0.1em, transparent 0.1em);
background-size: 100% 1.2em;
background-color: rgb(255, 255, 255);
}
html body 部分:
<body onload="clockFunction()">
<div id="clock">
<span id="clock1"></span>
</div>
</body>
外部JS：
setInterval(function clockFunction () {
var filePrefix = "<img src='img/num"; //前缀
var fileSuffix = ".jpg' />"; //后缀
var myDate = new Date();
showTime(myDate);
function showTime(myDate){
var x = document.getElementById("clock1");
var dateStr = "";
var year = myDate.getFullYear();
var month = myDate.getMonth()+1;
var mydate = myDate.getDate();
var hour = myDate.getHours();
var minute = myDate.getMinutes();
var second = myDate.getSeconds();
dateStr = dateStr + num2Image(year) + "<img src='img/year.jpg' />" +
num2Image(fixTime(month)) + "<img src='img/month.jpg' />" +
num2Image(fixTime(mydate)) + "<img src='img/date.jpg' />" +
num2Image(fixTime(hour)) + "<img src='img/hour.jpg' />" +
num2Image(fixTime(minute)) + "<img src='img/minute.jpg' />" +
num2Image(fixTime(second)) + "<img src='img/second.jpg' /><hr />" ;
x.innerHTML = dateStr;
function num2Image(num){
var str = num.toString();
var result = "";
for(var i = 0; i < str.length; i++){
var c = str.charAt(i);
//常用批量添加图片
result = result + filePrefix + c + fileSuffix;
}
return result;
}
function fixTime(time){
if( time < 10){
return "0"+time;
}
return time;
}
}
},1000);
搞定，不要告诉我不会链接外部css样式和js啊@。@ ！！ 学习了{:10_333:}
图示动态的咋代码是静态的
修改了一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态时钟</title>
<style>
img {
width: 38px;
height: auto;
}
body {
text-align: center;
border: 3px dotted;
}
</style>
</head>
<body>
<!-- 容器，用于动态显示时间 -->
<div id="timeContainer"></div>
<script>
let filePrefix = "<img src='img/num"
let fileSuffix = ".jpg'/>"
//动态更新时间
function updateTime() {
let myDate = new Date()
showTime(myDate)
}
//显示时间
function showTime(myDate) {
let dateStr = "";
let year = myDate.getFullYear();
let month = myDate.getMonth() + 1;
let date = myDate.getDate();
let hour = myDate.getHours();
let minute = myDate.getMinutes();
let second = myDate.getSeconds();
//加载月日年时分秒
dateStr = dateStr + num2Image(year) + "<img src='img/year.jpg'/>"
+ num2Image(fixTime(month)) + "<img src='img/month.jpg'/>"
+ num2Image(fixTime(date)) + "<img src='img/date.jpg'/>"
+ num2Image(fixTime(hour)) + "<img src='img/hour.jpg'/>"
+ num2Image(fixTime(minute)) + "<img src='img/minute.jpg'/>"
+ num2Image(fixTime(second)) + "<img src='img/second.jpg'/><br/>";
// 将生成的内容插入到页面的容器中
document.getElementById("timeContainer").innerHTML = dateStr;
}
//数字转为图片
function num2Image(num) {
let str = num.toString()
let result = ""
for (let i = 0; i < str.length; i++) {
let c = str.charAt(i)
result = result + filePrefix + c + fileSuffix
}
return result
}
//补零处理
function fixTime(time) {
if (time < 10) {
return "0" + time
}
return time
}
//每隔一秒动态刷新时间
setInterval(updateTime, 1000)
updatetime()
</script>
</body>
</html>
页:
[1]