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 日志相册贡献荣誉积分 58884 狗仔卡	发表于 2017-4-16 11:50:01 \| 显示全部楼层 \|阅读模式购买主题已有 4 人购买本主题需向作者支付 3 鱼币才能浏览本帖被以下淘专辑推荐: · JavaScript - 庖丁解牛\|主题: 312, 订阅: 597
	想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
	回复使用道具举报置顶卡千斤顶显身卡

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

本帖被以下淘专辑推荐: