1.一些DOM操作元素案例

最新推荐文章于 2023-04-27 19:13:37 发布

置顶菜鸟小黄

最新推荐文章于 2023-04-27 19:13:37 发布

阅读量342

点赞数

文章标签： javascript dom html css

本文链接：https://blog.csdn.net/weixin_43324141/article/details/105496743

版权

DOM案例

一.鼠标点击显示当前时间：

需求描述：当我们点击了按钮， div里面的文字会动态发生变化显示当前的时间
用来实现的元素：innerText改变元素内容 +封装一个获取日期函数

代码：

<body>
    <button>显示当前系统时间</button>
    <div>某个时间</div>
    <p>今天日期</p>
    <script>
        // 1. 获取元素 
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        var p = document.querySelector('p');
        // 2.注册事件
        btn.onclick = function(){
            // 当我们点击了按钮，  div里面的文字会动态发生变化 显示当前的时间
            div.innerHTML = getDate();
            p.innerHTML = getDateMonth();
        }
        function getDate()  {
            var date = new Date();
            // 获取4位年份：从 Date 对象以四位数字返回年份。
            var year = date.getFullYear();
            // 获取月份：从 Date 对象返回月份 (0 ~ 11)  一个12月 所以需要+1
            var month = date.getMonth() + 1;
            // 获取日:  从 Date 对象返回一个月中的某一天 (1 ~ 31)
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
             //获取星期： 从 Date 对象返回一周中的某一天 (0 ~ 6)   此函数输出结果为数字
            // 通过一个数组把对应的数字和星期绑定在一起  0表示星期日 6表示星期6
             var day = date.getDay();
            return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];
        }

        function getDateMonth()  {
            var date = new Date();
            // 获取月份：从 Date 对象返回月份 (0 ~ 11)  一个12月 所以需要+1
            var month = date.getMonth() + 1;
            // 获取日:  从 Date 对象返回一个月中的某一天 (1 ~ 31)
            var dates = date.getDate();
            return '今天是:'+month + '月' + dates + '日 ';
        }
    </script>
</body>

页面效果：

点击前：
点击后：

二.仿京东显示密码：

- 分析步骤：
在这里插入图片描述

代码：

    <style>
        .box {
            /* 大盒子 */
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }

        .box input {
            /* 左边输入框 */
            width: 370px;
            height: 30px;
            border: 0;
        }

        .box img {
            /* 右边眼睛图片 */
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <!-- 眼睛睁开图片 -->
            <img src="images/close.png" alt="" id="eye">
        </label>
        <!-- 输入的密码框 -->
        <input type="password" name="" id="pwd">
    </div>

    <script>
        //   1.获取元素：
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
       
    //    分析：一个按钮两个状态 点击一次状态就发生变化 
        var flag = 0; //初始状态
        eye.onclick = function () {
            // 点击一次后 flag一定要变化  0表示文本框 眼睛睁开  1表示密码框 眼睛闭上
            if (flag == 0) {
                // 状态初始值等于0时候 点击后赋值为1
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; //赋值
            } else {
                // 状态值等于1时候 点击后赋值为0
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }

        }
    </script>
</body>

显示效果：

在这里插入图片描述

三.淘宝点击关闭二维码案例：

分析步骤

代码：

  <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            /* 鼠标指针样式：小手 */
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 淘宝二维码 -->
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 获取元素
        var btn = document.querySelector('.close-btn');
        var box = document.querySelector('.box');
        // 点击事件：盒子隐藏和显示
        btn.onclick = function () {
            box.style.display = 'none';
        }
    </script>
</body>

效果图：

在这里插入图片描述

四.循环精灵图背景案例：

- 分析步骤：
在这里插入图片描述

代码：

<style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .box {
            width: 250px;
            margin: 100px auto;
        }

        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <script>
        var lis = document.querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            //让索引号乘以44 就是每个li的背景y坐标
            var index = i * 44;
            //图片移动到当前索引的y坐标位置
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }
    </script>
</body>

效果图：

在这里插入图片描述

五.显示隐藏文本框内容：

分析步骤：

代码：

   <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            // console.log('得到焦点');
            if (text.value == '手机') {
                this.value = '';
            }
            //获得焦点 需要把文本框里面的文字颜色变黑
            this.style.color = '#333';

        }
        text.onblur = function () {
            // console.log('失去焦点');
            if (text.value == '') {
                this.value = '手机';
            }
            this.style.color = '#999';

        }
    </script>
</body>

效果图：
在这里插入图片描述

六.密码框格式提示错误信息：

分析步骤：

代码：

   <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        var text = document.querySelector('input');
        text.onfocus = function () {
            // console.log('得到焦点');
            if (text.value == '手机') {
                this.value = '';
            }
            //获得焦点 需要把文本框里面的文字颜色变黑
            this.style.color = '#333';

        }
        text.onblur = function () {
            // console.log('失去焦点');
            if (text.value == '') {
                this.value = '手机';
            }
            this.style.color = '#999';

        }
    </script>
</body>

效果图：

在这里插入图片描述

七.操作元素总结：

在这里插入图片描述

菜鸟小黄

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
1.一些DOM操作元素案例

DOM案例鼠标点击显示当前时间：需求描述：当我们点击了按钮， div里面的文字会动态发生变化显示当前的时间用来实现的元素：innerText改变元素内容 +封装一个获取日期函数**代码：<body> <button>显示当前系统时间</button> <div>某个时间</div> <p&g...
复制链接

扫一扫