Django之时钟插件的使用
程序员文章站
2022-04-27 08:53:12
...
<link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/inc/jquery.hoverclock.css" media="screen"
type="text/css"/>
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
<script src="http://hovertree.com/texiao/hoverclock/inc/jquery.hoverclock.js"></script>
<script>
$(function () {
$("#hoverclock").hoverclock({
"h_height": "180", "h_width": "180",
//"h_backColor": "orange",
"h_radius": "50%",
"h_linkText": ""
});
});
</script><!--时钟-->
<div id="hoverclock"
style="width: 180px; height: 180px; position: relative; background-color: transparent; border-radius: 50%; border: 1px solid transparent;">
<div class="hoverclockfill">
<div class="hoverclockreference"></div>
<div class="hoverclockentity" style="transform: scale(0.608);">
<div class="hoverclocktext"
style="width: 180px; position: absolute; left: -90px; top: 9px;"><a
href="http://hovertree.com/texiao/hoverclock/" target="_blank"
id="hoverclocklink" title=""
style="color: deeppink; font-size: 16px;"></a>
</div>
<div class="hoverclockcentre">
<div class="hoverclockdynamic">
<div class="hoverclockanchor" style="transform: rotate(6deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(12deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(18deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(24deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: -116.9px; left: 67.5px; color: darkgreen;">05
</div>
<div class="hoverclockanchor" style="transform: rotate(36deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(42deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(48deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(54deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: -67.5px; left: 116.9px; color: darkgreen;">10
</div>
<div class="hoverclockanchor" style="transform: rotate(66deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(72deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(78deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(84deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 0px; left: 135px; color: darkgreen;">15
</div>
<div class="hoverclockanchor" style="transform: rotate(96deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(102deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(108deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(114deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 67.5px; left: 116.9px; color: darkgreen;">20
</div>
<div class="hoverclockanchor" style="transform: rotate(126deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(132deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(138deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(144deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 116.9px; left: 67.5px; color: darkgreen;">25
</div>
<div class="hoverclockanchor" style="transform: rotate(156deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(162deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(168deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(174deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 135px; left: 0px; color: darkgreen;">30
</div>
<div class="hoverclockanchor" style="transform: rotate(186deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(192deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(198deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(204deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 116.9px; left: -67.5px; color: darkgreen;">35
</div>
<div class="hoverclockanchor" style="transform: rotate(216deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(222deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(228deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(234deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 67.5px; left: -116.9px; color: darkgreen;">40
</div>
<div class="hoverclockanchor" style="transform: rotate(246deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(252deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(258deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(264deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: 0px; left: -135px; color: darkgreen;">45
</div>
<div class="hoverclockanchor" style="transform: rotate(276deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(282deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(288deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(294deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: -67.5px; left: -116.9px; color: darkgreen;">50
</div>
<div class="hoverclockanchor" style="transform: rotate(306deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(312deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(318deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(324deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: -116.9px; left: -67.5px; color: darkgreen;">55
</div>
<div class="hoverclockanchor" style="transform: rotate(336deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(342deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(348deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor" style="transform: rotate(354deg);">
<div class="hoverclockelement hoverclockminute-line"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockminute-text"
style="top: -135px; left: 0px; color: darkgreen;">60
</div>
<div class="hoverclockhour-text hour-1"
style="top: -90.9px; left: 52.5px; color: darkgreen;">1
</div>
<div class="hoverclockhour-text hour-2"
style="top: -52.5px; left: 90.9px; color: darkgreen;">2
</div>
<div class="hoverclockhour-text hour-3"
style="top: 0px; left: 105px; color: darkgreen;">3
</div>
<div class="hoverclockhour-text hour-4"
style="top: 52.5px; left: 90.9px; color: darkgreen;">4
</div>
<div class="hoverclockhour-text hour-5"
style="top: 90.9px; left: 52.5px; color: darkgreen;">5
</div>
<div class="hoverclockhour-text hour-6"
style="top: 105px; left: 0px; color: darkgreen;">6
</div>
<div class="hoverclockhour-text hour-7"
style="top: 90.9px; left: -52.5px; color: darkgreen;">7
</div>
<div class="hoverclockhour-text hour-8"
style="top: 52.5px; left: -90.9px; color: darkgreen;">8
</div>
<div class="hoverclockhour-text hour-9"
style="top: 0px; left: -105px; color: darkgreen;">9
</div>
<div class="hoverclockhour-text hour-10"
style="top: -52.5px; left: -90.9px; color: darkgreen;">10
</div>
<div class="hoverclockhour-text hour-11"
style="top: -90.9px; left: -52.5px; color: darkgreen;">11
</div>
<div class="hoverclockhour-text hour-12"
style="top: -105px; left: 0px; color: darkgreen;">12
</div>
</div>
<div class="hoverclockexpand hoverclockexpand hoverclockcircle-1"></div>
<div class="hoverclockanchor hoverclockhour"
style="transform: rotate(460.445deg);">
<div class="hoverclockelement hoverclockthin-hand"
style="background-color: green;"></div>
<div class="hoverclockelement hoverclockfat-hand"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor hoverclockminute"
style="transform: rotate(5525.34deg);">
<div class="hoverclockelement hoverclockthin-hand"
style="background-color: green;"></div>
<div class="hoverclockelement hoverclockfat-hand hoverclockminute-hand"
style="background-color: darkgreen;"></div>
</div>
<div class="hoverclockanchor hoverclocksecond"
style="transform: rotate(331520deg);">
<div class="hoverclockelement hoverclocksecond-hand"
style="background-color: orangered;"></div>
</div>
<div class="hoverclockexpand hoverclockexpand hoverclockcircle-2"></div>
<div class="hoverclockexpand hoverclockexpand hoverclockcircle-3"></div>
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/inc/jquery.hoverclock.css"
media="screen" type="text/css">
<br>
<!--时钟-->推荐阅读
-
在JS中操作时间之getUTCMilliseconds()方法的使用
-
在JavaScript中操作时间之getUTCDate()方法的使用
-
在JavaScript中处理时间之setMinutes()方法的使用
-
CKeditor富文本编辑器使用技巧之添加自定义插件的方法
-
JS中处理时间之setUTCMinutes()方法的使用
-
在JavaScript中操作时间之getYear()方法的使用教程
-
python开发之IDEL(Python GUI)的使用方法图文详解
-
Python的Django框架中使用SQLAlchemy操作数据库的教程
-
Java语言基础之List集合以及Set集合的使用
-
Django使用详解:ORM 的反向查找(related_name)