漂亮的15款HTML5时钟特效代码

创客云


15款基于canvas时钟特效是一款通过配置参数来生成15种不同外观的网页时钟。HTML5的强大不仅在于可以让网页元素更加灵活多变,更在于它可以很方便的实现网页动画的特效,可以让你的网站更加富有现代化特色。

代码结构

  1. <link rel="stylesheet" type="text/css" href="css/zzsc.css">
  2. <script src="js/canvas_clock.js"></script>
  3. <div class="zzsc-content">
  4.     <canvas id="clock1_" width="200px" height="200px">
  5.     </canvas>
  6.     <canvas id="clock2_" width="200px" height="200px">
  7.     </canvas>
  8.     <canvas id="clock3_" width="200px" height="200px">
  9.     </canvas>
  10.     <canvas id="clock4_" width="200px" height="200px">
  11.     </canvas>
  12.     <canvas id="clock5_" width="200px" height="200px">
  13.     </canvas>
  14.     <canvas id="clock6_" width="200px" height="200px">
  15.     </canvas>
  16.     <canvas id="clock7_" width="200px" height="200px">
  17.     </canvas>
  18.     <canvas id="clock8_" width="200px" height="200px">
  19.     </canvas>
  20.     <canvas id="clock9_" width="200px" height="200px">
  21.     </canvas>
  22.     <canvas id="clock10_" width="200px" height="200px">
  23.     </canvas>
  24.     <canvas id="clock11_" width="200px" height="200px">
  25.     </canvas>
  26.     <canvas id="clock12_" width="200px" height="200px">
  27.     </canvas>
  28.     <canvas id="clock13_" width="200px" height="200px">
  29.     </canvas>
  30.     <canvas id="clock14_" width="200px" height="200px">
  31.     </canvas>
  32.     <canvas id="clock15_" width="200px" height="200px">
  33.     </canvas>
  34. </div>
  35. <script>
  36.       clockd1_={
  37.               "indicate": true,
  38.               "indicate_color": "#222",
  39.               "dial1_color": "#666600",
  40.               "dial2_color": "#81812e",
  41.               "dial3_color": "#9d9d5c",
  42.               "time_add": 1,
  43.               "time_24h": true,
  44.               "date_add":3,
  45.               "date_add_color": "#999",
  46.              };
  47.       clockd2_={
  48.               "indicate": true,
  49.               "dial1_color": "#666600",
  50.               "time_24h": true,
  51.               "timeoffset":0,
  52.               "date_add":3,
  53.               "date_add_color": "#999",
  54.              };
  55.       clockd3_={
  56.               "indicate": true,
  57.               "indicate_color": "#222",
  58.               "dial1_color": "#666600",
  59.               "dial2_color": "#81812e",
  60.               "dial3_color": "#9d9d5c",
  61.               "time_add": 1,
  62.               "time_24h": true,
  63.               "date_add":3,
  64.               "date_add_color": "#999",
  65.              };
  66.       clockd4_={
  67.               "indicate": true,
  68.               "indicate_color": "#222",
  69.               "dial1_color": "#666600",
  70.               "date_add":3,
  71.               "date_add_color": "#999",
  72.              };
  73.       clockd5_={
  74.               "indicate": true,
  75.               "indicate_color": "#222",
  76.               "dial1_color": "#666600",
  77.               "dial2_color": "#81812e",
  78.               "dial3_color": "#9d9d5c",
  79.               "time_add": 1,
  80.               "time_24h": true,
  81.               "date_add":3,
  82.               "date_add_color": "#999",
  83.              };
  84.       clockd6_={
  85.               "indicate": true,
  86.               "indicate_color": "#222",
  87.               "dial1_color": "#666600",
  88.               "dial2_color": "#81812e",
  89.               "dial3_color": "#9d9d5c",
  90.               "time_add": 1,
  91.               "time_add_color": "#ccc",
  92.               "time_24h": true,
  93.               "timeoffset":0,
  94.               "date_add":3,
  95.               "date_add_color": "#999",
  96.              };
  97.       clockd7_={
  98.               "indicate": true,
  99.               "indicate_color": "#222",
  100.               "dial1_color": "#666600",
  101.               "dial2_color": "#81812e",
  102.               "dial3_color": "#9d9d5c",
  103.               "time_add": 1,
  104.               "time_24h": true,
  105.               "date_add":3,
  106.               "date_add_color": "#999",
  107.              };
  108.       clockd8_={
  109.               "indicate": true,
  110.               "indicate_color": "#222",
  111.               "dial1_color": "#666600",
  112.               "dial2_color": "#81812e",
  113.               "dial3_color": "#9d9d5c",
  114.               "time_add": 1,
  115.               "time_24h": true,
  116.               "date_add":5,
  117.               "date_add_color": "#999",
  118.              };
  119.       clockd9_={
  120.               "indicate": true,
  121.               "indicate_color": "#222",
  122.               "dial1_color": "#666600",
  123.               "dial2_color": "#81812e",
  124.               "dial3_color": "#9d9d5c",
  125.               "time_add": 1,
  126.               "time_24h": true,
  127.               "date_add":3,
  128.               "date_add_color": "#999",
  129.              };
  130.       clockd10_={
  131.               "indicate": true,
  132.               "indicate_color": "#222",
  133.               "dial1_color": "#666600",
  134.               "dial2_color": "#81812e",
  135.               "dial3_color": "#9d9d5c",
  136.               "time_add": 1,
  137.               "time_24h": true,
  138.               "track": "#4b4b00",
  139.              };
  140.       clockd11_={
  141.               "dial1_color": "#666600",
  142.               "time_24h": true,
  143.               "date_add":3,
  144.               "date_add_color": "#999",
  145.              };
  146.       clockd12_={
  147.               "indicate": true,
  148.               "indicate_color": "#222",
  149.               "dial1_color": "#666600",
  150.               "dial2_color": "#81812e",
  151.               "dial3_color": "#9d9d5c",
  152.               "time_add": 1,
  153.               "time_24h": true,
  154.               "date_add":3,
  155.               "date_add_color": "#999",
  156.              };
  157.       clockd13_={
  158.               "indicate": true,
  159.               "indicate_color": "#222",
  160.               "dial1_color": "#666600",
  161.               "dial2_color": "#81812e",
  162.               "dial3_color": "#9d9d5c",
  163.               "time_add": 1,
  164.               "time_24h": true,
  165.               "date_add":3,
  166.               "date_add_color": "#999",
  167.              };
  168.       clockd14_={
  169.               "indicate": true,
  170.               "indicate_color": "#222",
  171.               "dial1_color": "#666600",
  172.               "time_add": 1,
  173.               "time_24h": true,
  174.               "date_add":3,
  175.               "date_add_color": "#999",
  176.              };
  177.       clockd15_={
  178.               "indicate": true,
  179.               "indicate_color": "#222",
  180.               "dial1_color": "#666600",
  181.               "dial2_color": "#81812e",
  182.               "dial3_color": "#9d9d5c",
  183.               "time_add": 1,
  184.               "time_24h": true,
  185.               "date_add":3,
  186.               "date_add_color": "#999",
  187.              };
  188.       var c = document.getElementById('clock1_');
  189.       cns1_ = c.getContext('2d');
  190.       var c = document.getElementById('clock2_');
  191.       cns2_ = c.getContext('2d');
  192.       var c = document.getElementById('clock3_');
  193.       cns3_ = c.getContext('2d');
  194.       var c = document.getElementById('clock4_');
  195.       cns4_ = c.getContext('2d');
  196.       var c = document.getElementById('clock5_');
  197.       cns5_ = c.getContext('2d');
  198.       var c = document.getElementById('clock6_');
  199.       cns6_ = c.getContext('2d');
  200.       var c = document.getElementById('clock7_');
  201.       cns7_ = c.getContext('2d');
  202.       var c = document.getElementById('clock8_');
  203.       cns8_ = c.getContext('2d');
  204.       var c = document.getElementById('clock9_');
  205.       cns9_ = c.getContext('2d');
  206.       var c = document.getElementById('clock10_');
  207.       cns10_ = c.getContext('2d');
  208.       var c = document.getElementById('clock11_');
  209.       cns11_ = c.getContext('2d');
  210.       var c = document.getElementById('clock12_');
  211.       cns12_ = c.getContext('2d');
  212.       var c = document.getElementById('clock13_');
  213.       cns13_ = c.getContext('2d');
  214.       var c = document.getElementById('clock14_');
  215.       cns14_ = c.getContext('2d');
  216.       var c = document.getElementById('clock15_');
  217.       cns15_ = c.getContext('2d');
  218.       clock_conti(200,cns1_,clockd1_);
  219.       clock_digital(200,cns2_,clockd2_);
  220.       clock_norm(200,cns3_,clockd3_);
  221.       clock_binary(200,cns4_,clockd4_);
  222.       clock_follow(200,cns5_,clockd5_);
  223.       clock_circles(200,cns6_,clockd6_);
  224.       clock_dots(200,cns7_,clockd7_);
  225.       clock_roulette(200,cns8_,clockd8_);
  226.       clock_num(200,cns9_,clockd9_);
  227.       clock_planets(200,cns10_,clockd10_);
  228.       clock_digitalran(200,cns11_,clockd11_);
  229.       clock_bars(200,cns12_,clockd12_);
  230.       clock_grow(200,cns13_,clockd13_);
  231.       clock_random(200,cns14_,clockd14_);
  232.       clock_reverse(200,cns15_,clockd15_);
  233. </script>
  234. <div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  235. </div>
演示地址 免费下载
本文由 CityMall 整理发布如需转载,请注明出处:https://www.22vd.com/60104.html
云模板

发表评论