2. 程式人生 > >web前端複習(二):js日期操作,實現時間顯示和倒計時效果

web前端複習(二):js日期操作,實現時間顯示和倒計時效果

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

雖然jquery框架的封裝使得幾行程式碼就可以完成js的複雜功能的實現,但是jquery併為日期定製操作,所以日期的操作還是得使用js原生實現

下面我們就來簡單實現js日期操作,程式碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
 
 content="text/html; charset=utf-8" />
<title>js日期操作</title>
</head>
<script src="jquery-1.12.4.min.js"></script>
<script>

function checkTime(time){//校驗時間,小於10前面加0
    if(time<10)return "0"+time;
    return time;
    }
function checkHour(hour){//12小時制
    if(hour>12)return
 
 "下午 "+(hour-12);
    return "上午 "+hour;
    }
function showTime(){
var date=new Date();


var weekDay=["星期日","星期一","星期二","星期三","星期日四","星期五","星期六"];
    $("#time").html(date.getFullYear()+"年 " +checkTime(date.getMonth()+1)+"月"+checkTime(date.getDate())+"日 "+weekDay[date.getDay()]+"<br/>"+checkHour(date.getHours())+"時"
 
+checkTime(date.getMinutes())+"分"+checkTime(date.getSeconds())+"秒"
    );  
setTimeout('showTime()',500);
}   
function countDown(end){//傳入終止時間
    //獲取當前時間和截止時間的毫秒值
    var endTime=new Date(end).getTime();
    var nowTime=new Date().getTime();
    //計算時間差秒數
    var countTime=(endTime-nowTime)/1000;
    //計算時間差天數
    var day=parseInt(countTime/(60*60*24));
    //計算時間差小時數
    var hour=parseInt(countTime/(60*60)%24);
    var minutes=parseInt(countTime/60%60);
    var seconds=parseInt(countTime%60)
    if(countTime<=0)$('#countDown').html("倒計時結束");
    $('#countDown').html("倒計時:"+checkTime(day)+"天 "+checkTime(hour)+"小時 "+checkTime(minutes)+"分鐘 "+checkTime(seconds)+" 秒");
    //alert("倒計時:"+checktime(day)+"天 "+checkTime(hour)+"小時 "+checkTime(minutes)+"分鐘 "+checkTime(seconds)+" 秒")
    setTimeout("countDown('2016/07/01,12:00:00')",500);
    }
</script>
<body onload="countDown('2016/07/01,12:00:00'),showTime()">
顯示時間實現
<p style="color:red;display:block;font-size:1.2em;text-align:center;height:25px;line-height:25px;" id="time"></p>
<hr />
<p style="color:red;display:block;font-size:1.2em;text-align:center;height:25px;line-height:25px;" id="countDown"></p>
</body>
</html>

思想:總的來說就是js中的Date物件的操作:

**獲取年的資訊:getFullYear,getYear
獲取月:getMonth,注意從0開始,要加一
獲取天:getDate
獲取小時:getHour
獲取分鐘:getMinutes
獲取秒:getSeconds
獲取時間毫秒數:getTime**

注意要點:就是小時,分鐘,天數,月數小於標準格式為兩位,還有就是12小時制或者24小時制的問題,簡單實現:如下

function checkTime(time){//校驗時間,小於10前面加0
    if(time<10)return "0"+time;
    return time;
    }
function checkHour(hour){//12小時制
    if(hour>12)return "下午 "+(hour-12);
    return "上午 "+hour;
    }

相關推薦

web前端複習(二):js日期操作,實現時間顯示和倒計時效果

雖然jquery框架的封裝使得幾行程式碼就可以完成js的複雜功能的實現,但是jquery併為日期定製操作,所以日期的操作還是得使用js原生實現 下面我們就來簡單實現js日期操作,程式碼如下: &

js日期操作

http 操作 src 字符串 local console mil 圖片 部分 var myDate = new Date();myDate.getFullYear(); //獲取完整的年份(4位,1970-????)myDate.getMonth();

web前端知識梳理——js

1 圖片輪播 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //

web前端，常用js方法封裝

搜尋總結了一些前端日常開發中，常用的一些方法封裝 var myJs = { /* * 格式化日期 * @param dt 日期物件 * @returns {string} 返回值是格式化的字串日期 */ getDate

web前端利用turf.js生成等值線、等值面

layer json數據 pmc grid idt http rop www ide 樣例如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

js日期操作,某天的N天后,一個月後的日期

  var date = new Date(); var tomorrow = date.setDate(new Date().getDate() + 10); //10天后的日期 console.log(date);   參考 : h

web前端常見二十道面試題

01 作用域 var num1 = 55; var num2 = 66; function f1(num, num1){ // var num = 55; // var num1 = 66; num = 100; num1 = 100; num2

Web前端複習——Javascript複習（函式+分支結構）

1、函式    指的是為一個任務進行封裝在一個程式碼塊中。 （1）函式使用：宣告、定義和呼叫 function 函式名([引數變數列表]){ 函式體：包含任務的步驟清單(程式碼塊) [return 返

前端MVC，JS模板替換實現原理

// model var data = { name: "splendid", age: 21, height: 173, weight: 60, hobby: "閱讀" }; // contr

使用React前端框架結合js-ipfs-api實現IPFS的文字資料流傳輸

本文我們將通過React這個js前端框架來實現一個簡易的頁面，通過官方提供的js-ipfs-api，我們可以在頁面的文字框中輸入任意文字，然後提交上傳到IPFS節點網路中，再利用hash引數把上傳的文字資料顯示出來。 React簡介及安裝 React是由

Web前端開發實戰6：CSS實現導航選單結合二級下拉式選單的簡單變換

       前面幾篇博文都在講導航選單和二級下拉式選單，其實有很多方法都可以實現的，具體的情況還要視情況而定。 在後面學習到jQuery框架之後，會有更豐富的動畫效果，由於在學習Ajax和jQuery的初步階段，對於很多的複雜的導 航菜單和二級下拉式選單沒法做，但是學習了

前端面試：js的繼承實現

前言 JS作為面向物件的弱型別語言，繼承也是其非常強大的特性之一。那麼如何在JS中實現繼承呢？讓我們拭目以待。 JS繼承的實現方式 既然要實現繼承，那麼首先我們得有一個父類，程式碼如下： // 定義一個動物類 function Animal (name) { // 屬性 this.name =

Web前端複習——Javascript複習（2）

1、變數+資料型別 （1）變數 定義what——記憶體中儲存1個數據的儲存空間，再起一個名字 何時用when——程式中的資料都要先用變數儲存，再處理 如何使用how——宣告 賦值 取值     宣告：

好程式設計師web前端教程分享js檔案引用編碼方式

開發十年，就只剩下這套架構體系了！ >>>   

web前端【第十三篇】jQuery擴展和事件

.text .get lap lose remove 沖突 viewport 賦值 edit 一、jQuery事件 常用事件 blur([[data],fn]) 失去焦點 focus([[data],fn]) 獲取焦點（ 搜索框例子） change([[d

web前端課程技術分享之關於rem布局和vw布局的理解

phone 都是 vma 通過 改變 之前 控制 wid font 通過rem來實現響應式布局： 首先來看，什麽是rem單位。rem是一個靈活的、可擴展的單位，由瀏覽器轉化像素並顯示。與em單位不同，rem單位無論嵌套層級如何，都只相對於瀏覽器的根元素（HTML元素）的fo

pandas的時間序列:日期操作、時間序列平滑

  基礎操作 1）將“字元型別的日期列”轉化成“時間索引（DatetimeIndex）”   u  首先，利用 pandas 的to_datetime 方法，把 "date" 列的字元型別資料解析成 datetime 物件。然後，把 "date" 列用作索引。 df['

JQuery 定時操作實現圖片顯示與隱藏

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src=

JS遞迴實現階乘和菲波那切數列

當我們需要使用遞迴來完成某些操作的時候，我們先要了解什麼是遞迴 什麼是遞迴？ 遞迴，就是在執行的過程中呼叫自己。 一般來說，遞迴需要有邊界條件、遞迴前進段和遞迴返回段。 當邊界條件不滿足時，遞迴前進；當邊界條件滿足時，遞迴返回。 舉個例子： 1 function fun(){ 2

js 實現時間的翻牌效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http: