首页 > 作文

jq动画插件,自制基于vue的圆形时钟

更新时间:2023-04-07 04:35:43 阅读: 评论:0

首先附上jq插件库,里面的东西太炫了,建议学前端的可以看看学习下:/d/file/titlepic/pp<!doctype html>
<html>
  <head>
  <meta chart=”utf-8″>
  <title></title>
  <script src=”https://cdn.bootcss.com/vue/2.6.10/vue.min.js”></script>
  <style>
    *{题林西壁
      margin: 0;padding: 0;
    }
    body{
      background-color: #000000;
    }

    /* transition(过渡),平滑过渡主要靠这个属性
    语法:transition: property duration timing-function delay;
    property(设置过渡效果的 css 属性的名称)
    duration(完成过渡效果需要多少秒或毫秒)
    function(速度效果的速度曲线)
    delay(过渡效果何时开始)
    */
    .c,.min,.hou,.wee,.day,.mon,.yea{
      position: absolute;
      top: 700px;
      left: 800px;
      transition:transform 1s;
      color: #999999;
      text-align: center;
    }
    .nowtime,.yea{
      color: #ff0000;
      font-size: 18px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <!–
    梳理一下几个点:
    v-for(item,index) in num:
      item是从1-num,index是从0-num-1,所以下面用到item和index的地方可以相互替换,只要别忘了+1-1

    v-bind:calss:
      给当前时间绑定样式,用于区别其他时间
      想让当前时间始终处于最右边:
      顺时针:逆时针旋转(num-当前时间)*度数
      逆时针:顺时针旋转(当前时间)*度数
      比如:nowtime:60-item==c,就表示顺时针情况下,当前秒c想处于最右边,就需要逆时针旋转item*度数

    v-bind:style:
      translate平移后,rotate旋转角度使之对准圆心

    此处不涉及平滑过渡,在样式里:transition:transform 1s;
  –>
  <div id=”app”>
    <div class=”c” style=”width: 100px; “
      v-for=”(item,index) in 60″
      v-bind:class=”direct==0?{nowtime:60-item==c}:{nowtime:item==c}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(s_r,item+c,60)+’px,’+ytrans(s_r,item+c,60)+’px) rotate(‘+dtrans(item+c,60)+’deg)’}:{transform:’translate(‘+xtrans(s_r,item-c,60)+’px,’+ytrans(s_r,item-c,60)+’px) rotate(‘+dtrans(item-c-180,60)+’deg)’}”>{{direct==0?60-item:item-1}}秒</div>

    <div class=”min” style=”width: 100px; “
      v-for=”(item,index) in 60″
      v-bind:class=”direct==0?{nowtime:60-item==min}:{nowtime:item==min}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(i_r,item+min,60)+’px,’+ytrans(i_r,item+min,60)+�跨年说说暖心话语对象7;px) rotate(‘+dtrans(item+min,60)+’deg)’}:{transform:’translate(‘+xtrans(i_r,item-min,60)+’px,’+ytrans(i_r,item-min,60)势在必行近义词+’px) rotate(‘+dtrans(item-min,60)+’deg)’}”>{{direct==0?60-item:item-1}}分</div>

    <div class=”hou” style=”width: 100px; “
      v-for=”(item,index) in 24″
      v-bind:class=”direct==0?{nowtime:24-item==hou}:{nowtime:item==hou}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(h_r,item+hou,24)+’px,’+ytrans(h_r,item+hou,24)+’px) rotate(‘+dtrans(item+hou,24)+’deg)’}:{transform:’translate(‘+xtrans(h_r,item-hou,24)+’px,’+ytrans(h_r,item-hou,24)+’px) rotate(‘+dtrans(item-hou,24)+’deg)’}”>{{direct==0?24-item:item-1}}点</div>

    <div class=”wee” style=”width: 100px; “
      v-for=”(item,index) in 7″
      v-bind:class=”direct==0?{nowtime:7-item==wee}:{nowtime:item==wee}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(w_r,item+wee,7)+’px,’+ytrans(w_r,item+wee,7)+’px) rotate(‘+dtrans(item+wee,7)+’deg)’}:{transform:’translate(‘+xtrans(w_r,item-wee,7)+’px,’+ytr语文教学计划ans(w_r,item-wee,7)+’px) rotate(‘+dtrans(item-wee,7)+’deg)’}”>星期{{direct==0?week[7-item]:week[item-1]}}</div>

    <div class=”day” style=”width: 100px; “
      v-for=”(item,index) in 31″
      v-bind:class=”direct==0?{nowtime:31-index==day}:{nowtime:index==day}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(d_r,index+day,31)+’px,’+ytrans(d_r,index+day,31)+’px) rotate(‘+dtrans(index+day,31)+’deg)’}:{transform:’translate(‘+xtrans(d_r,index-day,31)+’px,’+ytrans(d_r,index-day,31)+’px) rotate(‘+dtrans(index-day,31)+’deg)’}”>{{direct==0?31-index:index+1}}号</div>

    <div class=”mon” style=”width: 100px; “
      v-for=”(item,index) in 12″
      v-bind:class=”direct==0?{nowtime:12-index==mon+1}:{nowtime:index==mon+1}”
      v-bind:style=”direct==0?{transform:’translate(‘+xtrans(m_r,index+mon+1,12)+’px,’+ytrans(m_r,index+mon+1,12)+’px) rotate(‘+dtrans(index+mon+1,12)+’deg)’}:{transform:’translate(‘+xtrans(m_r,index+mon-1,12)+’px,’+ytrans(m_r,index+mon-1,12)+’px) rotate(‘+dtrans(index+mon-1,12)+’deg)’}”>{{direct==0?12-index:index+1}}月</div>

    <!–点击年份可进行逆时针旋转–>
    <div class=”yea” style=”padding-left:1%” @click=”change”>{{yea}}年</div>

  </div>
  <script>
    var mv=new vue({
      el:’#app’,
      data:{
        direct:0, //顺时针

        pi:math.pi,

        c:0, min:0, hou:0, day:0, wee:0, mon:0, yea:0,

        s_r:600, i_r:500, h_r:400, w_r:300, d_r:200, m_r:100,

        week:[‘日’,’一’,’二’,’三’,’四’,’五’,’六’]
      },
      created() {
        this.timender=tinterval(()=>{
          var date=new date();
          this.yea=date.getfullyear();
          this.mon=date.getmonth();
          this.day=date.getdate();
          this.wee=date.getday();
          this.hou=date.gethours();
          this.min=date.getminutes();
          this.c=date.getconds()
        },1000)
      },
      methods:{
        xtrans(r,k,l){ return r*math.cos(2*k*this.pi/l) },
        ytrans(r,k,l){ return r*math.sin(2*k*this.pi/l) },
        dtrans(k,l){ return k*360/l },

        change(){ this.direct = this.direct == 0 ? 1 : 0 }
      }
    })
  </script>
</body>
</html>

你还可以在其他页面引用它并为他添加样式,我前面的有篇文章有讲到过

<!doctype html>
<html>
<head>
  <meta chart=”utf-8″>
  <title></title>
  <script src=”http://libs.baidu.com/jquery/2.0.0/jquery.js”></script>
  <style>
    div.mon{
      background: #e8e8ed;
    }
    div.day{
      background: #e8d5ed;
    }
初二地理知识点    div.wee{
      background: #e8e4d8;
    }
    div.hou{
      background: #e8e4b8;
    }
    div.min{
      background: #cbe4f5;
    }
    div.c{
      background: #b0e4f5;
    }
  </style>
</head>
<body>
  <div id=”clock”></div>
</body>
</html>
<script>
$(document).ready(function(){
  $(“#clock”).load(“clock.html”);
});
</script>

本文借鉴于:https://blog.csdn.net/n994298535/article/details/89436283,大家可以去看看

本文发布于:2023-04-07 04:35:40,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/a9ab52c3d42fe44e5cb4741e3e2b4562.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:jq动画插件,自制基于vue的圆形时钟.doc

本文 PDF 下载地址:jq动画插件,自制基于vue的圆形时钟.pdf

标签:逆时针   度数   时间   样式
相关文章
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图