cari

Rumah >hujung hadapan web >tutorial js >Kesan jam dilaksanakan oleh jQuery css (serasi dengan semua pelayar)_jquery

Kesan jam dilaksanakan oleh jQuery css (serasi dengan semua pelayar)_jquery

WBOY
WBOYasal
2016-05-16 15:17:321752semak imbas

Contoh dalam artikel ini menerangkan kesan jam yang dilaksanakan oleh jQuery css. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Tangkapan skrin kesan berjalan adalah seperti berikut:

Tidak banyak pengubahsuaian di sini, fungsi ini dilaksanakan secara ringkas Selain itu, kaedah setTimeout js digunakan Apabila masa yang lama, akan ada kelewatan tertentu. Penentukuran jam! Haha, ada kesilapan, saya tidak membetulkannya untuk anda.

Kod khusus adalah seperti berikut: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
  <script type="text/javascript" >
    var addRadian = Math.PI / 30;
    var wrapper = null;
    var minutes = 0;
    var hours = 0;
    var secondsLineLength = 14;
    var secondLineLength = 20;
    function cloneObj(obj1) {
      var tempObj = {};
      for (var i in obj1) {
        if (obj1.hasOwnProperty(i)) {
          tempObj[i] = obj1[i];
        }
      }
      return tempObj;
    }
    function createMinute(po, r, text) {
      var minute = [];
      minute.push('<div class="minute" style="left:');
      minute.push(po.x);
      minute.push('px; top:');
      minute.push(po.y);
      minute.push('px;" >');
      minute.push(text);
      minute.push('</div>');
      wrapper.append(minute.join(''));
    }
    function createHour(po, r, text) {
      var minute = [];
      minute.push('<div class="hour" style="left:');
      minute.push(po.x);
      minute.push('px; top:');
      minute.push(po.y);
      minute.push('px;" >');
      minute.push(text);
      minute.push('</div>');
      wrapper.append(minute.join(''));
    }
    function initSeconds(text, center, range) {
      var now_seconds = new Date().getSeconds();
      now_seconds = now_seconds > 0 &#63; now_seconds - 1 : 0;
      for (var i = 0; i < secondsLineLength + 1; i++) {
        createFlower(center, '●', range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength &#63; true : false);
      }
    }
    function initMinutes(r, text, center) {
      var x = 0,
        y = 0;
      for (var i = 0; i < 60; i++) {
        x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); 
        createMinute({x: x,y: y}, r, text);
      }
      minutes = new Date().getMinutes();
      waldedMinute(minutes);
    }
    function initHours(r, text, center) {
      var x = 0,
        y = 0;
      for (var i = 0; i < 60; i+=5) {
        x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength);
        createHour({ x: x, y: y }, r, text);
      }
      hours = new Date().getHours();
      waldedHour(hours);
    }
    function waldedMinute(index) {
      var index = Math.floor((index % 60)) > 0 &#63; Math.floor((index % 60)) + 1 : 0;
      wrapper.find(".minute:lt(" + index + ")").css('color', "green");
      if (index > 0) {
        wrapper.find(".minute:eq(0)").css('color', '#DDDDDD');
      }
    }
    function waldedHour(index) {
      var index = Math.floor((index%12)) > 0 &#63; Math.floor((index%12)) + 1:0;
      wrapper.find(".hour:lt(" + index + ")").css('color', "green");
      if(index > 0) {
        wrapper.find(".hour:eq(0)").css('color', '#494949');
      }
    }
    function animation(obj, r, radian, range, center, text, last) {
      logNowTime();
      radian += addRadian;
      var x = center.x - Math.cos(radian) * r;
      var y = center.y - Math.sin(radian) * r;
      obj.css({ "left": x, "top": y });
      if (last && radian > Math.PI * 5 / 2 - 0.1) {
        radian = Math.PI / 2;
        minutes++;
        if (minutes < 60) {
        } else {
          if (minutes % 60 == 0) {
            hours++;
            if (hours % 12 != 0) {
            } else {
              wrapper.find(".hour").css('color', "#494949");
            }
            waldedHour(hours);
          } else {
            wrapper.find(".minute").css('color', "#DDDDDD");   
          }
        }
        waldedMinute(minutes); 
      }
      setTimeout(function () {
        animation(obj, r, radian, range, center, text, last);
      }, 1000);
    }
    function createFlower(center, text, range, r, radian, autoAnimate, last) {
      var flower = [];
      flower.push('<div class="second"');
      flower.push(' style="left:');
      flower.push(center.x);
      flower.push('px; top:');
      flower.push(center.y);
      flower.push('px;');
      flower.push(autoAnimate &#63; '" >' : 'color:red;" >');
      flower.push(text);
      flower.push('</div>');
      flower = $(flower.join(''));
      flower.appendTo(wrapper);
      //var r = (index + 1) * secondLineLength;
      if (autoAnimate) {
        animation(flower, r, radian, range, center, text, last);
      }
    }
    // 查看当前时间
    function logNowTime() {
      var date = new Date(),
        hour = date.getHours(),
        minute = date.getMinutes(),
        second = date.getSeconds();
      hour = hour < 10 &#63; "0" + hour : hour;
      minute = minute < 10 &#63; "0" + minute : minute;
      second = second < 10 &#63; "0" + second : second;
      $("#time").html("当前时间-" + hour + ":" + minute + ":" + second);
    }
    $(document).ready(function () {
      wrapper = $("#wrapper"),
        width = wrapper.width(),
        height = wrapper.height(),
        offLeft = parseInt(wrapper.offset().left),
        range = {
          x: offLeft,
          y: 0,
          x1: offLeft + width,
          y1: height
        },
        center = {
          x: Math.round(width / 2) + offLeft,
          y: Math.round(height / 2)
        };
      initHours(secondLineLength * secondsLineLength + 40, '●', center);
      initMinutes(secondLineLength * secondsLineLength + 20, '●', center);
      initSeconds('●', center, range);
    });  
  </script>
  <style type="text/css" >
    body { margin:0; padding:0; }
    #wrapper { margin:0 auto; width:1000px; height:780px; background:black; }
    .second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; } 
    .minute { color:#DDDDDD; position:absolute;}
    .hour { color:#494949; position:absolute;}
    #time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; }
  </style>
</head>
<body>
<div id="time"></div>
<div id="wrapper" >
</div>
</body>
</html>

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan kesan khas jQuery boleh menyemak topik khas di tapak ini: "Ringkasan kesan khas klasik biasa jQuery" dan "Ringkasan animasi jQuery dan penggunaan kesan khas"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Cara menangkap dan melaporkan ralat JS menggunakan kemahiran window.onerror_javascriptArtikel seterusnya：Cara menangkap dan melaporkan ralat JS menggunakan kemahiran window.onerror_javascript

Artikel berkaitan

Lihat lagi