外部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啊@。@ ！！
页:
[1]