2. 程式人生 > >js學習總結----Date和應用

js學習總結----Date和應用

阿新 • • 發佈：2017-06-21
color spa += form format second fun ext 效果

獲取當前自己電腦的時間：不能做重要的用途，例如淘寶秒殺

　　var time = new Date(); // 時間格式數據 （對象數據類型）

　　下面是格式化時間的方法　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body,div,ul,li{
            margin:0;
            padding: 
 
0;
            font-family: Arial;
            font-size:24px;
            -webkit-user-select:none;
        }
        #div1{
            width:600px;
            height:50px;
            line-height:50px;
            padding:0 10px;
            text-align: center;
            border:1px solid #008cd7;
            background:
 
-webkit-linear-gradient(top left,#08bece,#9acd32,#ffe0e9);
            margin:10px auto;
        }
        
    </style>
</head>
<body>
    <div id=‘div1‘>北京時間</div>

    <script type=‘text/javascript‘>

        var oDiv = document.getElementById(‘div1‘);
        oDiv.innerHTML 
 
+=formatTime();
        function formatTime(){
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth()+1;//0-11代表我們的1-12月
            var day = time.getDate();
            var w = time.getDay();//0-6之間 代表周日-周六
            var wstr = "日一二三四五六";
            var week = wstr.charAt(w)
            var hours = time.getHours();
            var minutes = time.getMinutes();
            var seconds = time.getSeconds();
            var mlSeconds = time.getMilliseconds();

            return year+"年"+zero(month)+"月"+zero(day)+"日 星期"+week+" "+zero(hours)+"時"+zero(minutes)+"分鐘"+zero(seconds)+"秒";
        }

        function zero(value){
            return value<10?"0"+value:value
        }
    </script>
</body>
</html>

效果如下：　

　　技術分享

將時間格式的字符標準化

技術分享

倒計時小案例：

　　主要獲取時間的代碼如下

　　　　需要先獲取當前時間和目標時間的毫秒數 通過getTime(),然後計算兩個的差值

　　技術分享

　　最後進行代碼拼接就可以了。

js學習總結----Date和應用

相關推薦

js學習總結----Date和應用

color spa += form format second fun ext 效果 獲取當前自己電腦的時間：不能做重要的用途，例如淘寶秒殺 　　var time = new Date(); // 時間格式數據 （對象數據類型） 　　下面是格式化時間的方法　 <!D

js學習總結----call和apply和bind的區別

style 效果 兩個 是我 define 學習 處理 blog call() apply和call的方法是一模一樣的，都是用來改變方法的this關鍵字，並且把方法執行:而且在嚴格模式和非嚴格模式下對於第一個參數是null/undefined這種情況的規律是一樣的； bin

js學習總結----url和http的基礎知識

html zha ron 文本 ftp 資源定位符 指定 會有 端口號 URI/URL/URN URI = URL+URN 統一資源標識符（統一資源信息） URL:統一資源定位符 ->http://v.qq.com:80/index.html?name=zhangsa

js學習總結----ajax中的http請求方式及同步編程和異步編程

功能 依然 interval 需要 發送請求 console dom 屬於 相關 一、請求方式 var xhr = createXHR(); xhr.open("get","/getList?num=12",true); xhr.open("post","/getList

個人js學習總結-陣列內容的新增和刪除的方法-push（）、unshift()、pop（）、shift（）

<script> var arr = [1,2,3,4,5]; //新增陣列內容 //1、使用push（）可以向陣列的末尾新增一個及一個以上的元素，並返回新的長度，把6放到最後面 arr.push(6); console.log(arr.push(6));//返回

js學習總結----經典小案例之選項卡

scrip ges div 視頻內容 mil line 學習總結 images ul li <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

js學習總結----函數

索引 知識 結束 開始 總結 小括號 接收 ons 設定 一、函數基本知識 1、function:函數->具備某個功能的一個方法。方法本身是沒有什麽意義的，只有執行這個方法實現了對應的功能才有自己的價值。 2、函數由兩部分組成:創建一個函數、執行這個函數 　 fun

js學習總結----深入擴展原型鏈模式常用的六種繼承方式

模式 temp 枚舉 又是 reat 缺點 解決 his obj 一、可枚舉和不可枚舉 for in 循環在遍歷的時候，默認的話可以把自己私有的和它所屬類原型上的擴展的屬性和方法都可以遍歷到，但是一般情況下，我們遍歷一個對象只需要遍歷私有的即可，我們可以使用以下的判斷進行處

js學習總結----函數的三種角色

也有 {} pro -- 之間 fin bsp fine ons 註意：Function.prototype是函數數據類型的值，但是相關操作和之前的一模一樣->Empty/anonymous 函數本身也會有一些自己的屬性： length ：形參的個數 nam

js學習總結----call方法深入

pro 是我 學習總結 type 模擬 eva -- tex span 　　　　 var obj = {name:"張三"} function fn(){ console.log(this) } fn

js學習總結----正則的作用

prot ole -- ons 一個 創建 區別 regexp 我們 一、正則:就是一個規則，用來處理字符串的一個規則（正則就是用來處理字符串的） 　　處理: 　　1）、匹配 判斷一個字符串是否符合我們制定的規則->test　 reg.test(str)　 　　

js學習總結----小案例之跑馬燈

htm function 微博 border ron == 內容 rip gree 具體代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

js學習總結----設置元素的樣式值setcss

默認 div function ret ttr lte fun wid ott 在JS給元素設置樣式屬性值，我們只能通過curEle.style[attr] = value 這種方式給元素設置行內樣式 下面封裝一個給當前元素的某一個樣式屬性設置值的方法（增加在行內樣式上的）

js學習總結----動畫之在指定時間內實現單方向勻速運動

mar eight 思想 offset line ack css += hang 具體代碼如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g

js學習總結----輪播圖的插件化封裝

rem class 私有屬性 display settime req rda als image 具體代碼如下: ~function(){ function AutoBanner(curEleId,ajaxURL,interval){ //把之前存

js學習總結----jQuery之動畫 ajax 事件

win 學習總結 top 上一個 淡出 set 返回 ati var <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

js學習總結----核心解讀

log style 簡單 對象 charset color pan 通過 const 下面是對jquery源碼的簡單解讀: <!DOCTYPE html> <html lang="en"> <head> <meta cha

js學習總結----DOM2兼容處理順序問題

all for his 當前 this code use func 指向 解決順序問題:我們不用瀏覽器自帶的事件池了，而是自己模擬標準瀏覽器的事件池實現，具體代碼如下: /* bind:處理DOM2級事件綁定的兼容性問題（綁定方法） @parameter:

js學習總結----ajax兼容處理及惰性思想

null XML catch 學習總結 function logs nbsp class 重寫 封裝代碼如下: // var xhr = null; // //為了兼容IE6及更低的版本：如果第一個不支持，則瀏覽器會報錯，後面就不在執行了 // try{ // x

js學習總結----crm客戶管理系統之node編寫API接口

準備 獲取 ring length urn 使用 col asc ati 具體API代碼如下 var http = require(‘http‘), url = require(‘url‘), fs = require(‘fs‘); var server