一、动态创建列表

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<h1>动态创建列表</h1>
<ul class="list"></ul>

<script>
  var listEl = document.querySelector(".list")

  var isFlag = true
  while (isFlag) {
    var message = prompt("请输入信息:")
    if (!message) {
      isFlag = false
    } else {
      var liEl = document.createElement("li")
      liEl.textContent = message
      listEl.append(liEl)
    }
  }  
</script>

二、动态时间

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<h1 class="time"></h1>

<script>
  /* 封装补零工具函数 */
  function padLeft(content, count, padStr) {
    count = count || 2
    padStr = padStr || "0"
    content = String(content)
    return content.padStart(count, padStr)
  }

  /* 获取dom元素 */
  var timeEl = document.querySelector(".time")

  /* 实时更新 */
  setInterval(function () {
    var date = new Date()

    var year = date.getFullYear()
    var month = padLeft(date.getMonth())
    var day = padLeft(date.getDate())
    var hour = padLeft(date.getHours())
    var minute = padLeft(date.getMinutes())
    var second = padLeft(date.getSeconds())

    timeEl.textContent = `${year}-${month}-${day} ${hour}:${minute}:${second}`
  }, 1000)
</script>

三、倒计时

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<style>
  .countdown {
    color: red;
    font-size: 20px;
  }

  .countdown .time {
    display: inline-block;
    background-color: #f00;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
  }
</style>

<div class="countdown">
  <span class="time hour"></span>
  <span class="split">:</span>
  <span class="time minute"></span>
  <span class="split">:</span>
  <span class="time second"></span>
</div>

<script>
  /* 封装补零工具函数 */
  function padLeft(content, count, padStr) {
    count = count || 2
    padStr = padStr || "0"
    content = String(content)
    return content.padStart(count, padStr)
  }

  /* 获取元素 */
  var hourEl = document.querySelector(".hour")
  var minuteEl = document.querySelector(".minute")
  var secondEl = document.querySelector(".second")

  setInterval(function () {
	/* 现在的时间 */
    var nowDate = new Date()
	/* 截至的时间*/
    var endDate = new Date()
	/* 设置截至的时间*/
    endDate.setHours(24)
    endDate.setMinutes(0)
    endDate.setSeconds(0)
    endDate.setMilliseconds(0)

	/* 截止时间与现在时间的差 */
    var intervalTime = Math.floor((endDate.getTime() - nowDate.getTime()) / 1000)
    var hour = Math.floor(intervalTime / 3600)
    var minute = Math.floor((intervalTime / 60) % 60)
    var second = Math.floor(intervalTime % 60)

    // 设置内容
    hourEl.textContent = padLeft(hour)
    minuteEl.textContent = padLeft(minute)
    secondEl.textContent = padLeft(second)
  }, 1000)
</script>