html编写时间和日期?

html编写时间和日期?,第1张

效果图:

代码截图:(关键部分用框框标出)

源码:

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Document</title>

</head>

<body>

  <div>

      <span id="date"></span><br>

      <span id="week"></span>

  </div>

  <script>

      var showDate = document.getElementById('date') // 获取页面元素

      var showWeek = document.getElementById('week') // 获取页面元素

      var time = new Date()

      var year = time.getFullYear() //获取年份

      var month = correctDate(time.getMonth() + 1) //获取月份

      var day = correctDate(time.getDate())  //获取日期

      var date = "今天是" + year + "年" + month + "月" + day + "日"

      var week = time.getDay() // 获取星期几,返回的是0/1/2/3/4/5/6 0代表周日

      var weeks = [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六"]

      var toWeek = weeks[week] // 获取今日星期

      showDate.innerHTML = date // 将日期显示在页面

      showWeek.innerHTML = toWeek // 将星期显示在页面

      /* 这是一个规范数字的函数:

          当时间小于10时,在数字前面加上0,统一都是用两个数字表示,

          比如3月5日就显示03月05日

      */

      function correctDate(date){

          if(date<10){

              return '0'+date

          }

          return date

      }

  </script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

 <!-- 给两个Select标签一个id方便Javascript定位 -->

<label for="yselect">年份:</label>

<select id="yselect">

    <option value=""></option>

</select>

<label for="mselect">月份:</label>

<select id="mselect">

    <option value=""></option>

</select>

<script>

 let YearSelect = document.querySelector('#yselect')

 //定位年份

 for (let i = 2018 i > 1918 i--) {//从2018一直输出到1919

 let tmpElement = document.createElement('option')

 //创建一个选项元素

 tmpElement.value = i

 //赋值(Post等表单 *** 作输送的赋值)

 tmpElement.id = "yoption" + i

 //给id方便以后 *** 作

 tmpElement.innerText = i

 //填上内容方便用户选择

 YearSelect.appendChild(tmpElement)

 //将元素扔到年份选择标签的最下面的元素,保证是第一个是2018最后一个是1919

 }

 let MonthSelect=  document.querySelector('#mselect')

 for (let i = 12 i > 0 i--) {

 let tmpElement = document.createElement('option')

 tmpElement.value = i

 tmpElement.id = "moption" + i

 tmpElement.innerText = i

 MonthSelect.appendChild(tmpElement)

 }

 //同理

</script>

</body>

</html>


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7652066.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存