百度前端學院參考答案：第二十五天到第二十七天 倒數開始 滴答滴 滴答滴（2）

来源:https://www.cnblogs.com/Joe-and-Joan/archive/2018/12/09/10093449.html
-Advertisement-
Play Games

編碼 現在我們要做一個稍微複雜的東西，如下HTML，有一堆Select用於選擇日期和時間，在選擇後，實時在 id 為 result-wrapper 的 p 標簽中顯示所選時間和當前時間的差值。 使用上方的HTML結構（可以根據需要自行微調）為基礎編寫JavaScript代碼 當變更任何一個selec ...


編碼

現在我們要做一個稍微複雜的東西，如下HTML，有一堆Select用於選擇日期和時間，在選擇後，實時在 id 為 result-wrapper 的 p 標簽中顯示所選時間和當前時間的差值。

<select id="year-select">
    <option value="2000">2000</option>
    <option value="2001">2001</option>
    <option value="2002">2002</option>
    ……
    <option value="2032">2002</option>
</select>

<select id="month-select">
    <option value="1">1</option>
    <option value="2">2</option>
    ……
    <option value="12">12</option>
</select>

<select id="day-select">
    <option value="1">1</option>
    <option value="2">2</option>
    ……
    <option value="31">31</option>
</select>

<select id="hour-select">
    <option value="0">00</option>
    <option value="1">01</option>        
    ……
    <option value="23">23</option>
</select>

<select id="minite-select">
    <option value="0">0</option>
    <option value="1">1</option>
    ……
    <option>59</option>
</select>

<select id="second-select">
    <option value="0">0</option>
    <option value="1">1</option>
    ……
    <option>59</option>
</select>

<p id="result-wrapper">現在距離 2001年1月1日星期X HH:MM:SS 還有 X 天 X 小時 X 分 X 秒</p>
  • 使用上方的HTML結構（可以根據需要自行微調）為基礎編寫JavaScript代碼
  • 當變更任何一個select選擇時，更新 result-wrapper 的內容
  • 當所選時間早於現在時間時，文案為 現在距離 "所選時間" 已經過去 xxxx
  • 當所選時間晚於現在時間時，文案為 現在距離 "所選時間" 還有 xxxx
  • 註意當前時間經過所選時間時候的文案變化
  • 註意選擇不同月份的時候，日期的可選範圍不一樣，比如1月可以選31天，11月只有30天，註意閏年
  • 同樣，需要註意，通過優雅的函數封裝，使得代碼更加可讀且可維護
  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="utf-8" />
  6     <title>函數和時鐘練習2</title>
  7 
  8 </head>
  9 
 10 <body>
 11     <select id="year-select">
 12         <option value="">請選擇年份</option>
 13 
 14     </select>
 15 
 16     <select id="month-select">
 17         <option value=" ">請選擇月份</option>
 18 
 19     </select>
 20 
 21     <select id="day-select">
 22         <option value=" ">請選擇日期</option>
 23 
 24     </select>
 25 
 26     <select id="hour-select">
 27         <option value=" ">請選擇小時</option>
 28 
 29     </select>
 30 
 31     <select id="minute-select">
 32         <option value=" ">請選擇分鐘</option>
 33 
 34     </select>
 35 
 36     <select id="second-select">
 37         <option value=" ">請選擇秒數</option>
 38 
 39     </select>
 40 
 41     <p id="result-wrapper">現在距離 2001年1月1日星期X HH:MM:SS 還有 X 天 X 小時 X 分 X 秒</p>
 42     <script>
 43         var year = document.getElementById("year-select");
 44         var month = document.getElementById("month-select");
 45         var day = document.getElementById("day-select");
 46         var hour = document.getElementById("hour-select");
 47         var minute = document.getElementById("minute-select");
 48         var second = document.getElementById("second-select");
 49         var result = document.getElementById("result-wrapper");
 50 
 51         function startTime() {
 52             var x = new Date();
 53             var y = x.getFullYear();
 54             for (i = (y - 30); i < (y + 30); i++) {
 55                 year.options.add(new Option(i + "年", i));
 56             }
 57             for (i = 1; i < 13; i++) {
 58                 month.options.add(new Option(i + "月", i));
 59             }
 60             for (i = 0; i < 24; i++) {
 61                 hour.options.add(new Option(i + "時", i));
 62             }
 63             for (i = 0; i < 60; i++) {
 64                 minute.options.add(new Option(i + "分", i));
 65             }
 66             for (i = 0; i < 60; i++) {
 67                 second.options.add(new Option(i + "秒", i));
 68             }
 69             //這樣是局部變數私有的數組    var Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
 70             Days = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; //這才是全局變數
 71         }
 72 
 73         function addZero(a) {
 74             if (a < 10) {
 75                 a = "0" + a;
 76             }
 77             return a;
 78         }
 79 
 80         function getWeekday(weekday) {
 81             var arr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
 82             return arr[weekday];
 83         }
 84 
 85         function optionsClear(e) {
 86             e.options.length = 1;
 87         }
 88 
 89         function writeDay(n) {
 90             optionsClear(day); //清除原來已有的數組
 91             for (i = 1; i < n + 1; i++) {
 92                 day.options.add(new Option(i + "日", i));
 93             }
 94         }
 95 
 96         function isLeapYear(year) {
 97             return ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0);
 98         }
 99 
100         year.onchange = function () {
101             var MMvalue = month.options[month.selectedIndex].value;
102             var n = Days[MMvalue - 1];
103             if (MMvalue == 2 && isLeapYear(year.value)) //判斷是否為閏年，是的話2月份+1天。
104                 n++;
105             writeDay(n);
106         }
107         month.onchange = function () {
108             var YYvalue = year.options[year.selectedIndex].value;
109             var n = Days[month.value - 1];
110             if (month.value == 2 && isLeapYear(YYvalue))
111                 n++;
112             writeDay(n);
113         }
114         if (document.attachEvent) {
115             window.attachEvent("onload", startTime);
116         } else {
117             window.addEventListener("load", startTime);
118         }
119 
120         function getTimeSelect() {
121             var str = year.value + "/" + month.value + "/" + day.value;
122             var timeselect = new Date(str);
123             return year.value + "年" + month.value + "月" + day.value + "日" + getWeekday(timeselect.getDay()) + hour.value +
124                 ":" + minute.value + ":" + second.value;
125         }
126 
127         function getTimeDistance() {
128             var now = new Date();
129             var timeSelectStr = year.value + "/" + month.value + "/" + day.value + " " + hour.value + ":" + minute.value +
130                 ":" + second.value;
131             var selectTime = new Date(timeSelectStr);
132             var secondDistance = now.getTime() - selectTime.getTime();
133             if (secondDistance < 0) {
134                 secondDistance = -secondDistance; //轉換為正整數方便計算
135                 var str = "還有";
136             } else {
137                 var str = "已經過去"
138             }
139             var daym = secondDistance / 86400000;
140             var hourm = (secondDistance % 86400000) / 3600000;
141             var minutem = ((secondDistance % 86400000) % 3600000) / 60000;
142             var secondm = (((secondDistance % 86400000) % 3600000) % 60000) / 1000;
143             return str + parseInt(daym) + "天" + parseInt(hourm) + "小時" + parseInt(minutem) + "分" + parseInt(secondm) +
144                 "秒";
145         }
146 
147         function showDate() {
148             result.innerHTML = "現在距離" + getTimeSelect() + getTimeDistance();
149         }
150         setInterval(showDate, 1000);
151         
152     </script>
153 </body>
154 
155 </html>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql設置大小寫敏感
    問題:新安裝的資料庫,訪問的時候後臺報錯找不表,發現是數據查詢語句對大小寫敏感. 1.關閉MySQL服務 2.在服務運行目錄找到my.ini或者my.cnf文件 打開文件， 3.找到[mysqld]在下麵增加一行 4.lower_case_table_names=1 （0:大小寫敏感;1:大小寫不敏 ...
  • <MySQL>入門一
    1. 資料庫表 1.1 員工表 1.2 部門表 1.3 工作表 1.4 位置表 2. 基礎查詢（select） 2.1 查詢單個欄位 2.2 查詢多個欄位 2.3 查詢所有欄位 2.4 查詢常量值、表達式 2.5 查詢函數 2.6 起別名（如果查詢的欄位有重名，可以使用起別名區分，別名中有特殊符號， ...
  • 從零學習Fluter(五):Flutter中手勢滑動拖動已經網路請求
    從六號開始搞Flutter，到今天寫這篇blog已經過了4天時間，文檔初步瀏覽了一遍，寫下了這個demo。demo源碼分享在github上，現在對flutter有種說不出的喜歡了。大家一起搞吧！ 廢話不多說，開始不如正題： 一：單擊，雙擊，長按->傳動的手勢效果，另外這裡用來Fluttertoast ...
  • Android開發——獲得Json數據，並顯示圖片
    流程介紹 1. 使用 網路框架進行 請求，獲得 數據 //一個封裝好的工具類的靜態方法 public static void sendOkHttpRequest(final String address, final okhttp3.Callback callback) { OkHttpClient ...
  • android 記一次解決鍵盤遮擋問題
    文章鏈接： "https://mp.weixin.qq.com/s/1gkMtLu0BTXOUOj6isDjUw" 日常android開發過程中，會遇到編輯框輸入內容彈出軟鍵盤，往往會出現鍵盤遮擋內容，或者出現頁面整體上移的，或多或少在體驗上都不是很優雅，今天提供個方法是自行控制頁面上移距離，竟可能 ...
  • react源碼總覽(翻譯)
    用react也有段時間了, 是時候看看人家源碼了. 看源碼之前看到官方文檔有這麼篇文章介紹其代碼結構了, 為了看源碼能順利些, 遂決定將其翻譯來看看, 小弟英語也是半瓢水, 好多單詞得查詞典, 不當之處請批評. 直接從字面翻譯的, 後面看源碼後可能會在再修改下. ...
  • 如何發佈一個完整Node.js Module
    本文會透過以下幾個段落，讓各位一步一步學習如何寫一個自已的Node.js Module並且發佈到npm package上 Node.js Module 結構 我們先建立一個 NodeModuleDemo 的資料夾 ，接下來利用 npm init 進行初始化 (這裡不用特別設置，一路按 Enter 到 ...
  • JavaScript 執行環境及作用域
    執行環境是JavaScrpt 最重要的概念之一，執行環境定義了變數或函數有權訪問的其它數據，決定了它們各自的行為。每個執行環境都有一個與之關聯的變數對象，或者說一個執行環境就是一個對象。環境中定義的所有變數和函數都保存在這個對象中。雖然我們編寫的代碼無法訪問這個對象，但解析器在處理數據時會在後臺使用 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類