筑坐极_js时钟表

web部分：

<body>
<div class="circle">
  <div class="origin"></div>
  <div class="second"></div>
  <div class="minute"></div>
  <div class="hour"></div>
  <div class="date-info" id="date-info">
    <p class="showTime"></p>
  </div>
  <div class="time-info"></div>
</div>
</body>

css部分：

需要利用position中的relative/absolute为指针定位,利用transform使指针进行旋转,transform-origin用来确定指针的原点

<style type="text/css">
  .circle {
    width: 400px;
    height: 400px;
    border: 2px solid black;
    border-radius: 50%;
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    background-image: url("../../assets/表盘.jpg");
    background-size: 400px 400px;
  }

  .date-info {
    /*outline-width: 8px;
    */
    width: 190px;
    height: 30px;
    margin: 140px 120px;
  }

  .time-info {
    width: 240px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    position: absolute;
    top: 233px;
    left: 80px;
    z-index: 11;
    background-color: #555;
    padding: 0;
    box-shadow: 0px 0px 9px 2px #222 inset;
  }

  .second {
    width: 2px;
    height: 150px;

    transform-origin: 50% 100%;
    background: gold;
    position: absolute;
    top: 50px;
    left: 200px;

    /*transform:rotate(12deg) ;*/
  }

  .minute {
    width: 3px;
    height: 140px;

    transform-origin: 50% 100%;
    background: blanchedalmond;
    position: absolute;
    top: 60px;
    left: 200px;

    /*transform:rotate(12deg) ;*/
  }

  .hour {
    width: 3px;
    height: 90px;

    transform-origin: 50% 100%;
    background: black;
    position: absolute;
    margin: 111px 0 0 200px;

    /*transform:rotate(12deg) ;*/
  }

  .origin {
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #000;
    position: absolute;
    top: 196px;
    left: 196px;
    z-index: 14;
  }
</style>

js：

<script type="text/javascript">
  //获取当前时间 年月日时分秒
  function getTime() {
    var time = new Date();
    //console.log(time)//Thu Jul 01 2021 20:22:41 GMT+0800 (中国标准时间)
    var year = time.getFullYear();
    // console.log('年份：', year);//年份： 2021
    var month = ((time.getMonth() + 1) < 10) ? "0" + (time.getMonth() + 1) : (time.getMonth() + 1);
    // console.log('月份：', month); //月份： 07
    var day = (time.getDate() < 10) ? "0" + time.getDate() : time.getDate();
    // console.log('日期: ', day);//日期: 01
    var hour = (time.getHours() < 10) ? "0" + time.getHours() : time.getHours();
    // console.log(hour + '点')//20点
    var minute = (time.getMinutes() < 10) ? "0" + time.getMinutes() : time.getMinutes();
    // console.log(minute + '分钟')//47分钟
    var second = (time.getSeconds() < 10) ? "0" + time.getSeconds() : time.getSeconds();
    // console.log(second + '秒')//9秒
    // var now = [year + '年' + month + '月' + day + '日' + hour + '时' + minute + '分' + second + '秒'];
    var now = [year, month, day, hour, minute, second];
    // console.log(now);
    // console.log(now)//["2021年07月02日20时54分15秒"]
    return now;
  }

  //执行时钟的时分秒指针
  function clock() {
    $(".second").css({"transform": "rotate(" + getTime()[5] * 6 + "deg)"});//秒针
    $(".minute").css({"transform": "rotate(" + getTime()[4] * 6 + "deg)"});//分针
    $(".hour").css({"transform": "rotate(" + (getTime()[3] + getTime()[4] / 60) * 30 + "deg)"});//时针
  }

  //显示农历时间,通过导入lunar包计算农历日期: lunar.js出处（https://blog.jjonline.cn/userInterFace/173.html）
  function chineseDate() {
    var date = calendar.solar2lunar(getTime()[0], getTime()[1], getTime()[2]);
    var chineseMon = date.IMonthCn;
    var chineseDay = date.IDayCn;
    var lunarCalendar = "今天是农历" + chineseMon + chineseDay + "日";
    return lunarCalendar;
  }

  //显示数字时间
  function digitTime() {
    var nowTime = [getTime()[0] + '年' + getTime()[1] + '月' + getTime()[2] + '日' + getTime()[3] + '时' + getTime()[4] + '分' + getTime()[5] + '秒'];
    return nowTime;
  }

  //此函数调用了数字时间、时钟指针、日历时间
  window.onload = function () {
    clock();
    $('.showTime').text(chineseDate());
    $('.time-info').text(digitTime());
    setInterval(function () {
      clock();
      $('.showTime').text(chineseDate());
      $('.time-info').text(digitTime());
    }, 1000)
  }
</script>

示例显示如图：

js时钟表

js时钟表

朱明*

js

时钟表包含数字时间及阳历、阴历的显示

2021.07.01

745人

朱明*

天津市宁河县

Hot:16029

朱明*

当前作品暂无评分

还未获得评语哦~