典型案例分析

最新推荐文章于 2024-07-21 22:27:18 发布

MoYuP_ENG

最新推荐文章于 2024-07-21 22:27:18 发布

阅读量81

点赞数

文章标签： java servlet 前端

本文链接：https://blog.csdn.net/MoYuP_ENG/article/details/126461644

版权

案例：分时显示不同图片，显示不同问候语

分析：根据系统不同时间判定，所以需要Date（）日期内置对象

<body>
    <img src="image/s.gif" alt="">
    <div>上午好</div>
    <script>
        var img = document.querySelector('img');
        var div = document.querySelector('div');
        var date = new Date();
        var h = date.getHours();
        if (h < 12) {
            img.src = 'image/s.gif';
            div.innerHTML = '上午好,昨晚睡的舒服不'
        } else if (h < 18) {
            img.src = 'image/x.gif';
            div.innerHTML = '下午好,早饭吃了啥,晚饭想吃啥';
        } else {
            img.src = 'image/w.gif';
            div.innerHTML = '晚上好,早点睡，别熬夜了哦';
        }
    </script>
</body>

主要用到的是：内置对象及if、else分支语句

案例：仿京东显示密码

分析：

1、点击眼睛可以将iput输入款从密码框（password）改为文本框（text）

2、一个按钮两个状态，点击一次切换为文本框，再次点击切换为密码框

3、利用一个flag变量，来判断flag的值，如果值为1就切换为文本框，flag设置为0，0就切换为密码框，flag设置为1

css：

 body {
            padding: 0;
            margin: 0;
        }
        
        .box {
            position: relative;
            /* z-index: 99; */
            width: 400px;
            margin: 50px auto;
            border-bottom: 1px solid #ccc;
        }
        
        input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        img {
            position: absolute;
            top: 2px;
            right: 0px;
            height: 30px;
            width: 30px;
            cursor: pointer;
        }

html：

 <div class="box">
        <input type="password" name="">
        <label for=""><img src="image/close.png" alt="" ></label>
    </div>

js：

 var input = document.querySelector('input');
    var img = document.querySelector('img');
    var flag = 0;
    img.onclick = function() {
        if (flag == 0) {
            img.src = 'image/open.png';
            input.type = 'text';
            flag = 1;
            // console.log('234');
        } else {
            img.src = 'image/close.png';
            input.type = 'password';
            flag = 0;
        }
    }

案例：循环精灵图背景

分析：通过for循环设置一组元素的精灵图背景

1、精灵图图片排列是有规律的

2、利用for循环修改精灵图的背景位置background-position

html：

 <div>
        <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>

css：

 body {
            padding: 0;
            margin: 0;
        }
        
        div {
            width: 400px;
            margin: 100px auto;
            overflow: hidden;
        }
        
        div ul li {
            width: 25px;
            height: 25px;
            border: 1px solid black;
            background: url(image/sprite.png) no-repeat;
            float: left;
            list-style: none;
            margin: 20px 46px;
        }

js：

 var lis = document.querySelectorAll('li');
        for (var i = 0; i <= lis.length; i++) {
            var index = i * 44;
            lis[i].style.backgroundPosition = '0 -' + index + 'px';
        }

效果图：

案例：显示隐藏文本框内容

分析：

1、需要事件：获取焦点onfocus、失去焦点onfocus

2、获得焦点，判断表单内容是否为默认文字，是就清空表单

3、失去焦点，判断表单内容是否为空，如果为空，就将表单内容修改为默认文字

html：

<input type="text" placeholder="手机">

js：

 var inp = document.querySelector('input');
        inp.onfocus = function() {
            if (this.placeholder === '手机') {
                this.placeholder = ''
            }
        }
        inp.onblur = function() {
            if (this.placeholder === '') {
                this.placeholder = '手机';
            }
        }