JavaScript客戶端時間線

eb瀏覽器創建Document對象,并且開始解析Web頁面,解析HTML元素和它們的文本內容后添加Element對象和Text節點到文檔中.在這個階段document.readystate屬性的值是”loading”.
當HTML解析器遇到沒有async和defer屬性的<script>元素時,它把這些元素添加到文檔中,然后執行行內或外部腳本.這些腳本會同步執行,并且在腳本下載(如果需要)和執行時解析器會暫停.這樣腳本就可以用document.write()來把文本插入到輸入流中.解析器恢復時這些文本會成為文檔的一部分.同步腳本經常簡單定義函數和注冊后面使用的注冊事件處理程序,但它們可以遍歷和操作文檔樹,因為在它們執行時已經存在了.這樣,同步腳本可以看到它自己的<script>元素和它們之前的文檔內容.
當解析器遇到設置了async屬性的<script>元素時,它開始下載腳本文本,并繼續解析文檔.腳本會在它下載完成后盡快執行,但是解析器沒有停下來等它下載.異步腳本禁止使用document.write()方法.它們可以看到自己的<script>元素和它之前的所有文檔元素,并且可能或干脆不可能訪問其他的文檔內容.
當文檔完成解析,document.readyState屬性變成“interactive”.
所有有defer屬性的腳本,會按它們在文檔的里的出現順序執行.異步腳本可能也會在這個時間執行.延遲腳本能訪問完整的文檔樹,禁止使用document.write()方法.
瀏覽器在Document對象上觸發DOMContentLoaded事件.這標志著程序執行從同步腳本執行階段轉換到了異步事件驅動階段.但要注意,這時可能還有異步腳本沒有執行完成.
這時,文檔已經完全解析完成,但是瀏覽器可能還在等待其他內容載入,如圖片.當所有這些內容完成載入時,并且所有異步腳本完成載入和執行,document.readyState屬性改變為“complete”,Web瀏覽器觸發Window對象上的load事件.
從此刻起,會調用異步事件,以異步響應用戶輸入事件、網絡事件、計時器過期等.

David Flanagan. JavaScript權威指南

JavaScript時間線

原文:https://os-note.com/articles/client-side-javascript-timeline.html

例簡介

本文介紹利用JQ實現拖動選擇時間段的示例，該實例可默認顯示設置的時間段、可拖動多個時間段、可伸縮時間段、可合并時間段并能導出所有時間段的詳細信息，效果如下：

實現過程

1、先實現頁面效果，文件*.html和*.css代碼如下：

Tips：css代碼聯合效果比較好理解。

<!DOCTYPE html>
<html>


<head>
  <meta charset="utf-8" />
  <title>拖動選擇時間段</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
</head>


<body>
  <div class="kaoqing" id="demo1"></div>
  <button id="getdata">獲得數據</button>
  <div id="answer"></div>
  <script src="js/jquery-1.9.1.min.js"></script>
  <script src="js/drag.js"></script>
  <script>
  $(function() {
    // 開始時間和結束時間的日期應該是同一天，不支持跨天,
    // 日期格式要標準，yyyy-MM-dd hh:mm:ss
    // 已選擇的時間段
    var data3 = [{
      startime: '2020-10-19 01:30:00',
      endtime: '2020-10-19 02:00:00'
    }, {
      startime: '2020-10-19 16:30:00',
      endtime: '2020-10-19 20:30:00'
    }];
    // data3 = [];
    var juicy = $("#demo1").initJuicy({
      height: 650,
      mondayDate: '2020-10-19',
      timedata: data3,
      status: true, //false表示不能編輯，true可以編輯
    });
    $("#getdata").click(function() {
      var backdata = juicy.getdata();
      $("#answer").html(JSON.stringify(backdata))
    })
  })
</script>
</body>


</html>

/*拖動時間段*/
.bar {
  background-color: #fff;
  border: 1px solid #555;
  position: relative;
  height: 601px;
  width: 770px;
  float: right;
}


/*刻度*/
.day {
  position: relative;
  height: 600px;
  box-sizing: border-box;
  width: 20px;
  float: left;
}


.day .hour {
  position: absolute;
  border-top: 1px solid red;
  width: 20px;
}


.day .halfhour {
  position: absolute;
  border-top: 1px solid #555;
  height: 7px;
  width: 20px;
  top: 12px;
}


.day .hour:after {
  position: absolute;
  top: 0;
  font: 11px/1 sans-serif;
}


.day .hour:nth-of-type(1):after {
  content: "0";
}


.day .hour:nth-of-type(2):after {
  content: "1";
}


.day .hour:nth-of-type(3):after {
  content: "2";
}


.day .hour:nth-of-type(4):after {
  content: "3";
}


.day .hour:nth-of-type(5):after {
  content: "4";
}


.day .hour:nth-of-type(6):after {
  content: "5";
}


.day .hour:nth-of-type(7):after {
  content: "6";
}


.day .hour:nth-of-type(8):after {
  content: "7";
}


.day .hour:nth-of-type(9):after {
  content: "8";
}


.day .hour:nth-of-type(10):after {
  content: "9";
}


.day .hour:nth-of-type(11):after {
  content: "10";
}


.day .hour:nth-of-type(12):after {
  content: "11";
}


.day .hour:nth-of-type(13):after {
  content: "12";
}


.day .hour:nth-of-type(14):after {
  content: "13";
}


.day .hour:nth-of-type(15):after {
  content: "14";
}


.day .hour:nth-of-type(16):after {
  content: "15";
}


.day .hour:nth-of-type(17):after {
  content: "16";
}


.day .hour:nth-of-type(18):after {
  content: "17";
}


.day .hour:nth-of-type(19):after {
  content: "18";
}


.day .hour:nth-of-type(20):after {
  content: "19";
}


.day .hour:nth-of-type(21):after {
  content: "20";
}


.day .hour:nth-of-type(22):after {
  content: "21";
}


.day .hour:nth-of-type(23):after {
  content: "22";
}


.day .hour:nth-of-type(24):after {
  content: "23";
}


.day .hour:nth-of-type(25):after {
  content: "24";
}


.day .hour:after {
  text-indent: -0.5em;
}


.weekday {
  position: relative;
  padding-right: 10px;
  height: 650px;
  width: 800px;
}


.bar div {
  display: inline-block;
}


.item {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: blue;
  width: 100%;
}


.bdown {
  width: 100%;
  height: 10px;
  background: transparent;
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: 1;
}


.bup {
  width: 100%;
  height: 10px;
  background: transparent;
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 1;
}

2、接下來實現交互邏輯，文件*.js代碼實現如下：

Tips：函數作用已有備注，可自行調試理解。

JavaScript 中，您可以使用 date 對象有效地處理應用程序中的日期、時間和時區。

Date 對象可幫助您有效地操作數據、處理各種與日期相關的任務，并在創建實際應用程序時執行一些計算。

（本文內容參考：java567.com）

在線咨詢

上一篇：老牌開源Office操作組件NPOI現已支持.NET Core
下一篇：HTML基礎教程：框架基礎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript客戶端時間線

例簡介

實現過程

您的項目需求