JavaScript案例

JavaScript案例整理

（素材源自B站pink老师）

一、仿京东密码输入

• 点击眼睛按钮，眼睛睁开时，显示密码可见，眼睛闭起来是，所输入的密码不可见

<style>
        .box {
            /* 相对定位 */
            position: relative;
            /* 宽度：400px */
            width: 400px;
            /* 底部线：1px 实线 颜色#ccc */
            border-bottom: 1px solid #ccc;
            /* 外边距 上边下边：100px 左边右边：auto  */
            margin: 100px auto;
        }
        .box input {
            /* 宽度：370像素 */
            width: 370px;
            /* 高度：30像素 */
            height: 30px;
            /* 边框 0 */
            border: 0;
            /* outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用 */
            outline: none;
        }
        .box img {
            /* 绝对定位 子绝父相 */
            position: absolute;
            /* top 属性规定元素的顶部边缘 2像素 */
            top: 2px;
            /* right 属性规定元素的右部边缘 2像素*/
            right: 2px;
            /* 宽度 24像素 */
            width: 24px;
        }
</style>

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

• 获取ID为eye和ID为pwd的值分别赋值给eye和pwd这两个变量
• 设置一个flag变量，表示眼睛开闭状态，输入密码可见flag值为0，反则，当flag=1时则密码不可见
• 当点击#eye标签时，首先判断flag的值，如果为0，将密码框类型转换为文本类型，最后将flag的值赋为1。如果flag的值一开始就不是0，那就把密码框的类型转换为密码框

<script type="text/javascript">
        var eye = document.getElementById("eye");
        var pwd = document.getElementById("pwd");
        //设置一个flag变量
        var flag = 0;
        eye.onclick = function(){
        //如果flag变量值为0,代表当前所输入密码可见
            if(flag == 0){
                pwd.type = 'text';
                eye.src = './images/open.png';
                flag = 1;
                //否则flag值为0时，代表密码隐藏
            }else{
                pwd.type = 'password';
                eye.src = './images/close.png';
                flag = 0
            }
        }
</script>

二、仿淘宝隐藏二维码

• 当鼠标点击二维码关闭按钮的时候，则关闭整个二维码
• 利用样式的显示和隐藏
• display:none 隐藏元素
• display:block 显示元素

<style>
       .box{
            /* 相对定位*/
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
        }
        .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 光标呈现为指示链接的指针（一只手）
            */
            cursor: pointer;
        }
</style>

<div class="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
``
```javascript
<script type="text/javascript">
        var box = document.querySelector(".box");
        var close = document.querySelector(".close-btn");
        close.onclick = function(){
            box.style.display = 'none';
        }
</script>

三、循环精灵图

• 精灵图图片排列是有规律的
• 利用for循环 修改精灵图片的背景位置 background-position
• x坐标 i(索引号) y坐标 i*44

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

<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 type="text/javascript">
        var lis = document.querySelectorAll("li");
        for (var i=0;i<lis.length;i++){
            var index = i*44;
            lis[i].style.backgroundPosition = '0 -'+index+'px';
        }
</script>

四、显示隐藏文本框内容

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

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

<script type="text/javascript">
        var text = document.querySelector("input");
        // 注册事件 获得焦点事件 onfocus
        text.onfocus = function(){
            if(this.value === '手机'){
                this.value = ' ';
            }
            this.style.color = '#333';
        }
        // 注册事件 失去焦点事件 onblur
        text.onblur = function(){
            if(this.value === ' '){
                this.value = '手机';
            }
            this.style.color = '#999'
        }
</script>

五、密码框验证信息

<style>
        div {
            width: 600px;
            margin: 100px auto;
        }
        
        .message {
            display: inline-block;
            font-size: 12px;
            color: #999;
            background: url(images/mess.png) no-repeat left center;
            padding-left: 20px;
        }
        
        .wrong {
            color: red;
            background-image: url(images/wrong.png);
        }
        
        .right {
            color: green;
            background-image: url(images/right.png);
        }
</style>

<div class="register">
        <input type="password" class="ipt">
        <p class="message">请输入6~16位密码</p>
</div>

<script type="text/javascript">
        // 首先判断的事件是表单失去焦点 onblur
        // 如果输入正确则提示正确的信息颜色为绿色小图标变化
        // 如果输入不是6到16位，则提示错误信息颜色为红色 小图标变化
        // 因为里面变化样式较多，我们采取className修改样式
        var ipt = document.querySelector(".ipt")
        var message = document.querySelector(".message")
        ipt.onblur = function(){
            if(this.value.length<6 || this.value.length>16){
                message.className = "message wrong";
                message.innerHTML = "您输入的位数有误"
            }else{
                message.className = "message right";
                message.innerHTML = "您输入的位数正确"

            }
        }
</script>

开关灯

<button id="btn">开关灯</button>

<script type="text/javascript">
        //获取ID为btn的按钮
        var btn = document.getElementById("btn");
        //设置一个变量
        var flag = 0;
        //为btn设置一个点击事件
        btn.onclick = function(){
            //如果flag变量为0表示关灯了，背景颜色设置为黑
            if(flag==0){
                document.body.style.backgroundColor = "#000";
                flag = 1;
            }else{
                //如果flag变量为1表示开灯了，背景颜色设置为白
                document.body.style.backgroundColor = "#fff"
                flag = 0;
            }
        }
</script>

百度换肤

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: url(images/1.jpg) no-repeat center top;
        }
        
        li {
            list-style: none;
        }
        
        .baidu {
            overflow: hidden;
            margin: 100px auto;
            background-color: #fff;
            width: 410px;
            padding-top: 3px;
        }
        
        .baidu li {
            float: left;
            margin: 0 1px;
            cursor: pointer;
        }
        
        .baidu img {
            width: 100px;
        }
</style>

<ul class="baidu">
        <li><img src="images/1.jpg"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.jpg"></li>
        <li><img src="images/4.jpg"></li>
</ul>

<script type="text/javascript">
      //获取类名为baidu的元素下面所有的img标签
        var imgs = document.querySelector(".baidu").querySelectorAll('img');
        //遍历所有的img标签
        for(var i=0;i<imgs.length;i++){
           //为每一个imgs[i]设置一个点击事件
            imgs[i].onclick = function(){
                //对应到背景图片
                document.body.style.backgroundImage = 'url('+this.src+')';
            }
        }
</script>