實時顯示時間（HTML+JS）

阿新 • • 發佈：2019-02-16

方法一：

<!--setInterval實時顯示時間-->
<p id="time1" style="color: blueviolet;"></p>
<script>
    function mytime(){
        var a = new Date();
        var b = a.toLocaleTimeString();
        var c = a.toLocaleDateString();
        document.getElementById("time1").innerHTML = c+"&nbsp" 
+b;
        }
    setInterval(function() {mytime()},1000);
</script>

方法二：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta 
 http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript">
function getTime() {

    var dateObj = new Date();

    var year = dateObj.getFullYear();//年
    var month = dateObj.getMonth()+1;//月  (注意：月份+1)
    var date = dateObj.getDate();//日
    var day = dateObj.getDay();
    var 
 weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    var week = weeks[day];//根據day值，獲取星期陣列中的星期數。
    var hours = dateObj.getHours();//小時
    var minutes = dateObj.getMinutes();//分鐘
    var seconds = dateObj.getSeconds();//秒

    if(month<10){
        month = "0"+month;
    }
    if(date<10){
        date = "0"+date;
    }
    if(hours<10){
        hours = "0"+hours;
    }
    if(minutes<10){
        minutes = "0"+minutes;
    }
    if(seconds<10){
        seconds = "0"+seconds;
    }

    var newDate = year+"年"+month+"月"+date+"日"+hours+":"+minutes+":"+seconds+"&nbsp &nbsp"+week;
    document.getElementById("date1").innerHTML = "時間顯示：" + newDate;//在div中寫入時間
    setTimeout('getTime()', 500);//每隔500ms執行一次getTime()
}
</script>

<title>實時顯示時間</title>
</head>
<body onload="getTime()">
    <div id="date1"></div>
</body>
</html>

區別：
*setInterval在執行完一次程式碼之後，經過了那個固定的時間間隔，它還會自動重複執行程式碼。
而setTimeout只執行一次那段程式碼。*

實時顯示時間（HTML+JS）

方法一：  <p id="time1" style="color: blueviolet;"></p> <

圖片輪播的實現（html js）

1.簡單實現 1）實現思想：通過輪播次數來決定顯示那一張首先，可以用簡單的div 包含img的框架來實現，我們為他新增按鈕，每個按鈕對應不同的圖片，那麼，每點選一次，將要顯示的圖片的style.dispay屬性設定為'block'將不顯示的圖片的display設定為none，可以實現簡單的按

列印笑臉（html+js）

效果圖： html主要是引用 <!DOCTYPE html> <html> <head> <title>列印笑臉</tit

JS 實現定時操作隱藏顯示圖片（setInterval() clearInterval()）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> function init()

html文字超出部分顯示省略號（偶爾失效）

之前每次寫文字超出顯示省略號的樣式都是在網上百度的這次也是但效果沒有達到預期的那樣（就是失敗了。。。。）這是我百度到的程式碼 <title>文字超過兩行或三行就顯示省略號<

js生成當前時間（layui可用）

有一個需要注意的地方，在實際開發中，涉及到生成時間，時間除了在前臺需要使用者填的時間，必須在資料庫生成，因為每個人的電腦時間可能不一樣。會BUG等。所以時間要在資料庫生成（預設SYSTEM）。下面是js自動生成時間的方法： <script

JS實現實時顯示時間

在之前的專案中有做到需要在網頁中實時顯示當前時間，實現的效果如圖所示： 1. html結構 <div class="col-xs-12 col-sm-6"> <i class="fa fa-plus-square-o" aria-hidden="tr

Koa與Node.js開發實戰（2）——使用Koa中介軟體獲取響應時間（視訊演示）

學習架構：在實戰專案中，經常需要記錄下伺服器的響應時間，也就是從伺服器接收到HTTP請求，到最終返回給客戶端之間所耗時長。在Koa應用中，利用中介軟體機制可以很方便的實現這一功能。程式碼如下所示： 01 const koa = require('koa');

在瀏覽器中顯示TXT 文字中的換行（html/txt）

記事本，word等以回車換行。html以<br/>或<div><p>等會形成一行。如何統一txt與 html，就是在普通txt的開頭加一個pre標籤。這樣，作為txt，它仍能在文字編輯器中，方便地閱讀、編輯、搜尋。同時，又能在瀏覽器下直

spring boot 學習筆記（003）靜態資源（html/js等檔案）

用spring boot啟動的web站點，靜態資源放在工程的哪裡呢？ html / js 等靜態資源。找了半天，說的高深的多，但是預設配置怎麼放，好辛苦。找到了就不值一提了。在工程下，直接建一個 "static"目錄。資源都放裡面。然後，就能訪問了。用瀏覽器

webuploader+springmvc實現多檔案上傳（html+js+css原創，後臺程式碼借鑑）

———————-css—————————- /*新增圖片按鈕*/ .add_resume_item { cursor: pointer; } /*遮罩層*/ .zpzs_gray { position: fixed; left: 0; to

微信內分享網頁，顯示圖片（PHP+JS版本）

1、先登入微信公眾平臺進入“公眾號設定”的“功能設定”裡填寫“JS介面安全域名”。 2、需要指定微信公眾號的ID 和密碼（後面設定會用到）。 3、需要三個PHP檔案 3.1 jssdk.php <?php class JSSDK { private $ap

關於iOS專案中引入Html5檔案（html/js/css）的路徑問題

iOS專案中使用專案中的html js css 檔案時，有時會遇到引用路徑出錯的問題，導致html js css image檔案無法載入的情況。那麼，引入H5相關檔案的正確操作方式如下，這樣就不會出現資原始檔無法引入並正常使用的情況： 1 在專案目錄下建立存放Html5

登陸網頁模板 - 1 （HTML+CSS）

pre com href tom .cn clas 網頁模板 html 輸入一個用HTML和CSS寫的簡單登錄頁面，主要是用CSS來進行修飾美化的這個登陸界面有輸入賬號和密碼的表單，還有登陸和註冊兩個按鍵，點擊按鍵分別會輸出“您已成功登陸，稍後會跳轉到您需

封裝的一套簡單輕量級JS 類庫（RapidDevelopmentFramework.JS）

需要 and arr ucc rda 找到目的 tco 類庫 1.最近好久沒有更新自己的博客了，一直在考慮自己應該寫一些什麽。4.2日從蘇州回到南京的路上感覺自己的內心些崩潰和失落，我就不多說了? 猛然之間我認為自己需要找一下內心的平衡。決定開發屬於自己一套快速開發的JS

數字鍵盤（純js）

outb htm -a 字符 cit style elements nim 實現實現的要求：第一位不能是0 不能同時出現兩個"." 最後一位不能是"." 只能輸入n位小數註意：在ios中input會出現光標，可以加上

用css實現文本不換行切超出限制時顯示省略號（小tips）

max 省略號 over 顯示寬度 width code wid ellipsis div{ max-width: 500px; text-overflow: ellipsis; overflow: hidden; white-spac

web前端面試題整理（HTML篇）

pad 關閉選擇 words vid onunload adding per end 1. h5的改進: 新元素畫布canvas: HTML5 <canvas>元素用於圖形的繪制，通過腳本 (通常是JavaScript)來完成音頻audio視頻vid

CSS深入理解之overflow（HTML/CSS）

clas alt span doc 邊距蘊含 top overflow 會同簡介 overflow看上去其貌不揚，其中蘊含的知識點還是很多的,有很多鮮為人知的特性表現。 overflow基本屬性值 1、visible（默認） 2、hidden 3、scroll 4、

MFC與Webbrowser交互（通過JS）

omv .cn amp c++ ocs scrip spa script files 最近修改老舊的MFC項目，用的網頁做界面，和HTML交互采用的是COM方式，繁瑣，醜陋又性能低，於是考慮利用js來進行界面交互，查了一天的資料，現在整理如下，供後來需要的人參考，雖然大概幾

實時顯示時間（HTML+JS）

相關推薦