操作元素之改变元素内容

最新推荐文章于 2023-02-23 10:27:14 发布

不是码农的程序猿

最新推荐文章于 2023-02-23 10:27:14 发布

阅读量100

点赞数

分类专栏： JavaScript-DOM 文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_50926516/article/details/112724722

版权

HTML JavaScript 按钮点击系统时间前端开发

关键词由CSDN通过智能技术生成

JavaScript-DOM 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div,p{
            width: 300px;
            height: 30px;
            line-height: 30px;
            color:black;
            background-color: pink;
        }
    </style>
</head>
<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>直接显示时间</p>
    
    <script>
        //1.获取元素
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        //2. 注册事件
        btn.onclick = function() {
            div.innerText = getDate();
        }

        function getDate() {
            var date = new Date()

            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var dates = date.getDate();
            var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];
        }
        //直接显示
        var p = document.querySelector('p');
        p.innerText = getDate();
    </script>
    
</body>
</html>

不是码农的程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
操作元素之改变元素内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div,p{
复制链接

扫一扫