原生js可愛糖果數字時間特效

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

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>js多彩的數字時鐘_何問起</title><base target="_blank" />
    <style> 
a{color:blue;}</style>
</head>
<body>
    <div><h1>JS實現多彩的數字時鐘</h1></div>
    <div id="time"></div>
    <div><br /><br /><a href="http://hovertree.com">何問起</a> <a href="http://hovertree.com/h/bjaf/o0yqj1ly.htm">說明</a> 
 <a href="http://hovertree.com/texiao/">特效</a></div>
    <script>
    function getTime(){
        var date = new Date();
        var hours =formatTime(date.getHours());
        var minutes = formatTime(date.getMinutes());
        var seconds = formatTime(date.getSeconds());
         
var $time = document.getElementById('time');
        $time.innerHTML=hours +"<img src='images/hm.png' style='margin:0 10px;' width='12' height='40'/>"+ minutes+"<img style='margin:0 10px;'  src='images/ms.png' width='12' height='40'/>"+ seconds;

        setTimeout("getTime()",500);

    }
    function formatTime(i){
        if(i<10&&i==1){
            i=  "<img src='images/0.png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";
        }else if(i<10&&i!=1){
            i= "<img src='images/0.png' width='40' height='60'/>" + "<img src='images/"+i+".png' width='40' height='60'/>";
        }else{

            var j= i.toString().charAt(0);
            var z =i.toString().charAt(1);
           if(j<10 && z<10&&j!=1&&z!=1){
               i = "<img src='images/"+j+".png' width='40' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>";
            }else if(j<10 && z<10&&j==1&&z!=1){

               i = "<img src='images/1.png' width='20' height='60'/>" + "<img src='images/"+z+".png' width='40' height='60'/>";

           }else if(j<10 && z<10&&z==1&&j!=1){
                   i =  "<img src='images/"+j+".png' width='40' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";

           }else if(j<10 && z<10&&(j==1&&z==1)){
               i="<img src='images/1.png' width='20' height='60'/>"+"<img src='images/1.png' width='20' height='60'/>";
           }
        }

        return i;
    }
    getTime();
    </script>
</body>
</html>

原生js可愛糖果數字時間特效

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="vi

原生js用圖片做時間

har 分享圖片 minutes ets nload span minute color 效果今天寫一個時間例子，用圖片組成時分秒。具體來看代碼，當然今天的寫法只是一種，還有很多種實現方法，來看布局： <p id="times"></p> <

原生JS實現各種經典網頁特效——Banner圖滾動、選項卡切換、廣告彈窗等

在製作網頁過程中，我們可能會遇到各種常用的經典網頁特效，比如Banner圖片滾動、選項卡迴圈播放、右下角廣告彈窗、評論提交展示、選項動態增刪、剪刀石頭布小遊戲等等等。。。是不是感覺都見到過這些場景、那些這些場景都是如何實現的呢？今天，小瑞老師就一口氣把所有經典網頁特效效果送給大家！！！

簡單原生JS編寫顯示系統時間的幾種方法

上程式碼：<div id="Show_Time"></div> <script type="text/javascript"> function getdate() { var date =

原生js建立虛擬數字鍵盤輸入

使用google瀏覽器訪問效果圖如下：以下是index.html文件原始碼： <span style="background-color: rgb(255, 255, 255);

原生JS封裝時間運動函數

條件 back 偏移量 span 習慣 css int nbsp bsp /*講時間運動之前先給大家復習一下運動函數通常大家都會寫運動框架，一個定時器(Timer),一個步長(step 就是每次運動的距離)，一個當前位置(current)一個目標位置(target),然

原生JS寫了一個小demo，根據輸入的數字生成不同背景顏色的小方塊兒~

top == UNC 定位元素 demo TE tostring eight 地方昨天練習寫了這個小demo，個人覺得通過設置定位元素left和top的值，來實現換行的功能，這種方法很巧妙~ 另外，如下代碼中的隨機顏色的獲取，還請各位前輩多多指教：需要改進的地方；或者有

原生js實現返回頂部特效

程序 mar document timer margin con lse hid 監聽 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

原生js仿網易雲輪播特效

原理：運用兩張圖片切換可視區域向左走或向右走要跳轉的圖片定位在可視區域的左邊或右邊然後用緩動動畫實現切換重點：緩動動畫 js實現步驟：1、獲取所需元素 2、建立指示器 3.讓第一個選中 4.新增事件 5、切換索引 6、自動輪播 1、獲取所需元素 var slider=$(

原生JS投票特效

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS+CSS實現投票效果 - 何問起</title> <link rel="s

H5+原生js 雪花特效

概述隨著前端技術的發展，越來越多的H5技術被應用到實際開發中，本次實現的是螢幕實現雪花飄落特效。 2 效果圖如下： 3 主要功能實現雪花飄落。。。。後續功能可以自己酌情新增 4實現方式首先，我們需要一個容器，在這裡只需要一個div就可以

用原生js實現數字自相加

</pre><pre name="code" class="javascript"> <div> <input type="text" id="num"

原生js 放大鏡特效

最近在做ecshop的二次開發，遇到一些jquery外掛與ecshop的衝突，調整衝突的需要修改的地方又太多，修改起來得不償失，故做了一個原生的js實現商品詳情頁面的放大鏡效果，以避免衝突！下面介紹一下程式碼及實現過程：首先，建立fangda.html檔案在檔案頭

原生js實現拖動滑塊驗證

cnblogs tcc mvt wms 網站 hnu 按鈕 itl rip 拖動滑塊驗證是現在的網站隨處可見的，各式各樣的拖動法都有。下面實現的是某寶的拖動滑塊驗證： <!DOCTYPE html> <html lang="en"> <he

0510日重點：原生js修改豆瓣電影api 在angularjs裏運用出現的bug

http ava move var cti tps 上下 console date 用$http.jsonp調用豆瓣電影api，會出現返回數據格式錯誤的bug。在控制器裏加上下面的代碼，才能正常獲取到數據。 function jsonp(url, ca

原生JS的HTTP請求

font sch 原生 office 請求 ref html sof nbsp ar xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(

基於原生JS+node.js+mysql打造的簡易前後端分離用戶登錄系統

power 3.2 80端口文檔 type ima 原生倉庫 json 一、登錄頁面這個沒什麽說的，就放兩張圖二、服務器端用express（文檔）搭建服務器，數據褲用mysql(基礎語句），新建一個users，再新建一張users表，我們用這張表。服務器主要是

使用原生JS封裝Tap事件，解決移動端300ms延遲

itl dia can 開發閉包 tcl type 移動端 com 為了防止誤操作，移動端iOS操作系統針對原生click事件做了300ms的延遲，這在一定程度上影響了我們的使用體驗。 GitHub項目地址：https://github.com/Simon

原生JS Ajax 請求

else 對象 amp pan stat func ext val hang 　　　　　　　var username = document.getElementById(‘username‘).value; var password = docum

原生js實現outerWidth()方法，用到getComputedStyle

turn left func ltview wid nts dst fault 方法 function getTrueStyle(obj,attr){ if(obj.currentStyle){ //ie return obj.currentStyle[at

原生js可愛糖果數字時間特效

相關推薦