CSS3+jQuery實現時鐘外掛

阿新 • • 發佈：2019-01-18

簡潔程式碼如下：

<link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-2.1.4.min.js"></script>
<script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>

< 
div id="hoverclock"></div>
<script>
$("#hoverclock").hoverclock({
"h_width":500,
"h_height":500,
//"h_hourNumSize": "80",
// "h_hourNumRadii": "200",
// "h_hourNumShow": false,
// "h_minuteNumShow":false,
"h_hourNumColor": "deeppink",
"h_backColor": "yellow",
// "h_borderColor": "gold",
//"h_frontColor":"red", 

"h_linkText": "HoverClock"
});
</script>

效果圖圖下：

完整程式碼如下：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8">
    <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" />
    <script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js 
"></script>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }

        div {
            padding: 0px;
        }
    </style><meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>HoverClock - HoverTree</title><base target="_blank" />
</head>

<body>
    <div style="width:500px;margin:10px auto;">
        <div id="hoverclock">
        </div>
        <div><br /><a href="http://hovertree.com/h/bjaf/hoverclock.htm">Help</a> <a href="http://hovertree.com/texiao/hoverclock/">Demo 1</a> <a href="http://hovertree.com/texiao/hoverclock/demo2.htm">Demo 2</a>
<a href="http://hovertree.com/texiao/hoverclock/demo3.htm">Demo 3</a> <a href="http://hovertree.com/texiao/hoverclock/demo4.htm">Demo 4</a></div>
    </div>
    <script src="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.js"></script>
    <script>
        $("#hoverclock").hoverclock({
            "h_width":500,
            "h_height":500,
            //"h_hourNumSize": "80",
            // "h_hourNumRadii": "200",
            // "h_hourNumShow": false,
            // "h_minuteNumShow":false,
            "h_hourNumColor": "deeppink",
            "h_backColor": "yellow",
            // "h_borderColor": "gold",
            //"h_frontColor":"red",
            "h_linkText": "HoverClock"
        });
    </script>
</body>
</html>

CSS3+jQuery實現時鐘外掛

簡潔程式碼如下： <link rel="stylesheet" href="http://hovertree.com/texiao/hoverclock/jquery.hoverclock.2.1.0.css" /> <script src="http://hovertree

jquery實現時鐘

時鐘的實現主要是利用定時器每一秒獲取一下時間，小於10自動補零，關鍵程式碼如下 $(function () { setInterval(function(){ var hours = new Date().getHours(); v

計算器html5+css3+jQuery實現

下載地址：https://download.csdn.net/download/qq_31674229/10277981 小弟在面試中遇到一個前端的問題，公司採取的是機試，共有三個問題。簡單的排序，敲敲程式碼，就搞定。建立兩個執行緒，分別對資料進行操作。考察的是執行緒的使用。（

CSS3+jQuery實現3D輪播圖

1、HTML和css程式碼部分 <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script> <sty

easyui快捷鍵實現增刪改(jquery.hotkeys.js外掛)

第一步：下載 jquery.hotkeys.js外掛 http://plugins.jquery.com/hotkeys/ 第二步：js引入  <script type="text/jav

分別使用js和JQuery的validate外掛實現簡單的表單校驗

1.1html 在input標籤後面使用<span>標籤顯示校驗資訊，使用onfocus（聚焦）和onblur（離焦）事件實現動態顯示提示資訊。 <form action="#" method="get" onsubmit="return checkForm()">

jQuery實現一個簡單的數字時鐘

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®

JQuery實現文字無縫滾動效果(Marquee外掛)

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo使用方法如下：1、載入javascript。<scripttype="te

JQuery實現文字無縫滾動效果 Marquee外掛

推薦一個JQuery的無縫文字滾動效果，同時也可以滾動圖片，也叫做跑馬燈效果。此jquery外掛，依託jquery庫，能實現各種滾動效果，且讓HTML程式碼符合W3C標準。官方演示，如下： Demo 使用方法如下： 1、載入javascript。 &

jquery 模仿時鐘顯示效果 clockPlugin外掛

clockPlugin相容性 clockPlugin外掛是在jQuery的基礎上開發的，所以clockPlugin使用需事先引入jQuery。 clockPlugin下載連結：https://p

HTML5 實現小車動畫效果(Canvas/CSS3/JQuery)

HTML5正在變得越來越流行。在這個移動裝置日益增長的時代，對來自Adobe的Flash外掛的改造需求也正在快速增長。因為就在最近，Adobe宣佈Flash將不再支援移動裝置。這意味著，Adobe自身也認為對移動裝置來講HTML5是一項重要的技術。而桌面系統的改變也是遲早的

jquery周曆外掛jqueryweekcalendar漢化實現【帶節日】

最近接到一項工作任務，需要展示並列印一週內24小時的排班資訊，便想到使用jquery周曆外掛實現，下面是效果圖尚未經過美工打磨。下面說下，實現過程。一、依賴的js檔案 <link rel='stylesheet' type='text/css' href='&l

jquery實現分頁外掛

做個記錄備份下/** * Created by lgy on 2017/12/19. * page外掛 */ (function ($) { $.fn.lgypage = function (options) { //初始化引數

JS+JQuery實現前端省、市、區三級聯動（外掛）

大家在做web開發的時候，肯定會在前端程式碼裡面遇到選擇省市區（縣）的功能，比如建立使用者、編輯使用者時，使用者選擇所在地等。好了多餘的話不多說了，我們進入正題吧！首先，在前端頁面裡面編寫HTML程式碼：<div id="city"> <select

用ajax+jquery+json+css3+html5實現登入、註冊、以及主頁面的增刪改查

主要思路在登入介面，輸入使用者名稱和密碼，失焦的時候，判斷輸入的使用者名稱和密碼是否符合相應的正則表示式的要求。如果符合，就傳送ajax請求到服務端，服務端接受到請求，就把從頁面中傳來的資料和json檔案裡面的資料進行對比，如果有相同的資料，就返回1，通過

jQuery的uploadify外掛實現檔案跨域上傳

1、jQuery的uploadify外掛官網地址： http://www.uploadify.com/documentation/ 2、按照官網要求下載指定的js，css程式碼與swf檔案 <script src="uploadify/jquery.uploadi

利用jquery的imgAreaSelect外掛實現圖片裁剪示例

原文連結：http://www.cnblogs.com/mizzle/archive/2011/10/13/2209891.html 將使用者上傳的圖片進行裁剪再儲存是現在web2.0應用中常常處理的工作，現在藉助jquery的imgareaselect外掛再配合PHP的G

CSS3和jQuery實現的自定義美化Checkbox

效果圖：是不是比預設的好看多了，個人的審美觀應該還是可以的。接下來我們一起來看看實現這款美化版Checkbox的原始碼。主要思路是利用隱藏原來的checkbox和radiobox，用一個div來模擬checkbox/radiobox，並使用jQuery來完成選擇切換時的動畫效果。先來看看H

jQuery使用ajaxfileupload外掛實現ajax檔案上傳

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"

用jQuery寫擴充套件外掛實現語音播報

用jQuery寫的擴充套件外掛，主要是用來語音播報。介面呼叫百度翻譯的介面，所以存在url引數長度問題。百度介面本身也不允許長文字呼叫，只能短文字呼叫。初始引數詳解： "speech": true, //通過點選連結播報，還是直接播報 "lang": "zh",

CSS3+jQuery實現時鐘外掛

相關推薦