网页小技巧之日历

最新推荐文章于 2023-09-22 11:10:05 发布

枫雨血痕

最新推荐文章于 2023-09-22 11:10:05 发布

阅读量391

点赞数

分类专栏： javascript 前端文章标签：网页小技巧 JavaScript

本文链接：https://blog.csdn.net/lyxuefeng/article/details/81149876

版权

前端同时被 2 个专栏收录

42 篇文章 2 订阅

订阅专栏

javascript

40 篇文章 1 订阅

订阅专栏

思路：使用日期函数Date()获得当前的年月日和星期
关键知识：
日期函数Date()
获取日期和时间
getDate() 获取日 1-31
getDay () 获取星期 0-6
getMonth () 获取月 0-11
getFullYear ()   获取完整年份（浏览器都支持）
getHours ()   获取小时 0-23
getMinutes ()   获取分钟 0-59
getSeconds ()   获取秒 0-59
getMilliseconds () 获取当前的毫秒
getTime ()   返回累计毫秒数(从1970/1/1午夜)

具体代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>日历</title>
  <style type="text/css">
      .box {
          width: 200px;
          height: 250px;
          margin: 100px auto;
          background: #369;
      }
      .box p{
        text-align: center;
        color: #fff;
        font-size: 12px;
        height: 50px;
        line-height: 50px;

      }
      .box span{
          width: 100px;
          height: 100px;
          font-size: 60px;
          background: yellowgreen;
          color: #000;
          text-align: center;
          line-height: 100px;
          display: block;
          margin: 0 auto;
      }
  </style>
</head>
<body>
    <div class="box" id="box">
        <p></p>
        <span></span>
    </div>
</body>
<script type="text/javascript">
    var box = document.getElementById('box');
    var boys = box.children;//得到id为box的标签的所有标签
    var date = new Date();//创建并声明一个日期函数，然后赋值
    var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    boys[0].innerHTML = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate()+' '+arr[date.getDay()];//给p标签添加'xx-xx-xx 星期x'格式的日期
    //注意获得的月份是0-11,星期是阿拉伯数字
    boys[1].innerHTML = date.getDate();//显示日期
</script>
</html>

具体效果可见：日历

枫雨血痕

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页小技巧之日历

思路：使用日期函数Date()获得当前的年月日和星期关键知识：日期函数Date()获取日期和时间getDate() 获取日 1-31getDay () 获取星期 0-6 getMonth () 获取月 0-11getFullYear () 获取完...
复制链接

扫一扫