JS时间与日期对象

清疚 2022-11-21 11:45 172阅读 0赞

# 显示当前系统的日期时间 #

html部分  
定义一个按钮和一个盒子  
按钮用来点击  
盒子用来显示时间

<button>点击显示时间</button>
     <div>时间框</div>

效果图如下所示：

![在这里插入图片描述][20201101161121520.png_pic_center]

js部分代码如下：

<script>
    
                //获取元素
                var btn = document.querySelector("button");
                var div = document.querySelector('div');
    
                //注册事件
                btn.onclick = function () { 
                        div.innerText = showDate();
                        btn.innerText = "时间已显示";
                }
    
                //定义方法
                function showDate() { 
                    //获取日期的内置对象
                    var date = new Date();
                    var year = date.getFullYear();
                    var month = date.getMonth()+1;
                    var dates = date.getDate();
                    dates = dates < 10 ? "0" + dates : dates;
                    var weekday = date.getDay();
                    var arr = ['星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
                    //获取时间的内置对象
                    var time = new Date();
                    var h = time.getHours();
                    h = h < 10 ? "0" + h : h;
                    var m = time.getMinutes();
                    m = m < 10 ? "0" + m : m;
                    var s = time.getSeconds();
                    s = s <10 ?  "0" + s : s;
    
                    return "现在是：" +'\n'+ year +"年"+ month +"月"+ dates + "号" + arr[weekday] + '\n' + h +"时" + m + "分" + s + "秒";
                }
    
        </script>

整体实现效果如下：日期+时间  
![在这里插入图片描述][2020110116134446.png_pic_center]

[20201101161121520.png_pic_center]: /images/20221120/c14498042e9748458e0972cebde3ddbd.png
[2020110116134446.png_pic_center]: /images/20221120/b8ca85ee45e74cbc98f03f1a8d60b651.png

发表评论取消回复

表情：

评论列表（有 0 条评论，172人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS时间与日期对象

显示当前系统的日期时间 html部分定义一个按钮和一个盒子按钮用来点击盒子用来显示时间 <button>点击显示时间</button>

清疚/ 2022年11月21日 11:45/ 0 赞/ 173 阅读

相关 js时间戳与日期格式之间的转换

将时间戳转换为日期格式 var date = new Date(时间戳);获取一个时间对象。下面是获取时间日期的方法下面是获取时间日期的方法。

蔚落/ 2022年08月04日 10:59/ 0 赞/ 308 阅读

相关日期与时间

纸上得来终觉浅 1.String与Date与Calendar之间的转换 public class time { public static void ma

秒速五厘米/ 2022年07月25日 16:46/ 0 赞/ 236 阅读

相关 Js获取处理日期时间

var myDate = new Date();myDate.getYear(); //当前年份(2位) myDate.getFullYear(); //获取完整的年份(4位

客官°小女子只卖身不卖艺/ 2022年06月18日 01:18/ 0 赞/ 347 阅读

相关 js_日期与时间

1. 日期 var oTime = new Date();// 也可以去掉new document.write(oTime); 输出： ![2018050908350

妖狐艹你老母/ 2022年05月25日 05:43/ 0 赞/ 198 阅读

相关 js获取日期和时间

[Js获取当前日期时间及其它操作][Js] var myDate = new Date(); myDate.getYear(); //获取当前年份(2位

桃扇骨/ 2022年05月24日 13:51/ 0 赞/ 455 阅读

相关ｊｓ　之时间日期

日期： ------- var box = new Date(); //实例化一个日期对象 alert(box); 不同浏览器获取的

朴灿烈づ我的快乐病毒、/ 2022年05月19日 06:23/ 0 赞/ 231 阅读

相关 js获取时间戳与日期格式化

js获取时间戳与日期格式化 Date 对象用于处理日期和时间。创建 Date 对象的语法： // 创建Date对象 var d = new Date

╰半橙微兮°/ 2022年04月25日 02:36/ 0 赞/ 446 阅读

相关 JS获取当前日期时间

废话不多说直接上代码啦： var myDate = new Date(); var year = myDate.getFullYear();//获取当前年

分手后的思念是犯贱/ 2022年04月23日 08:30/ 0 赞/ 499 阅读

相关 js之时间日期格式化

简单格式化时间基础 > 不同格式需要在转化下 function getCurrentTime() { let keep = ''

末蓝、/ 2022年01月21日 00:04/ 0 赞/ 394 阅读