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客户端时间线

例简介

实现过程

您的项目需求