0 0 7 5 ★ 教你打造一款'骚气'小时钟

不二如是 · 发表于 2017-4-16 11:50:01

购买主题 已有 4 人购买 本主题需向作者支付 3 鱼币 才能浏览

alltolove · 发表于 2017-4-16 14:46:57

忒复杂了也

rollerpig · 发表于 2017-11-16 21:16:10

居然没看懂

露水之余 · 发表于 2018-8-8 20:39:32

看不懂

不二如是 · 发表于 2018-8-9 16:02:48

测试一下～

a211827754 · 发表于 2018-9-10 18:01:50

报告老师你这 ‘表’ 不动啊！我来弄个动的！
外部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啊@  。@ ！！

QBR · 发表于 2024-12-21 18:00:51

学习了

图示动态的咋代码是静态的
修改了一下

<!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>

复制代码

账号		自动登录	找回密码
密码			立即注册

不二如是不二如是当前离线 UID 378930 日志相册贡献荣誉积分 60743 狗仔卡	发表于 2017-4-16 11:50:01 \| 显示全部楼层 \|阅读模式购买主题已有 4 人购买本主题需向作者支付 3 鱼币才能浏览本帖被以下淘专辑推荐: · JavaScript - 庖丁解牛\|主题: 312, 订阅: 597
	小甲鱼最新课程 -> https://ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

[庖丁解牛] 0 0 7 5 ★ 教你打造一款'骚气'小时钟

本帖被以下淘专辑推荐:

浏览过的版块