js小案例

今日所学摘要:

①js说明事件,话不多说,上代码,可直接运行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>说明事件</title>
        <style type="text/css">
            body{
                background-color:#f6f6f6;
            }
            .change{
                width: 900px;
                height: 200px;
                background-color: #fff;
                margin: 0 auto;
            }
            h1{
                margin: 20px 0 20px 30px;
            }
            input.f1{
                width: 100px;
                height: 50px;
                margin-left: 70px;
                background-color: #337ab7;
                color: #fff;
                font-size: 22px;
                border: none;
                border-radius: 5px;
                cursor: pointer;
            }
            input.f1:hover{
                background-color: #286090;
            }
            
            
            input[type=checkbox]{
                width: 20px;
                height: 20px;
            }
            span{
                cursor: pointer;
            }
            
            input#bt{
                display: none;
            }
            .change h2{
                cursor: pointer;
            }
            .change h2:hover{
                text-decoration: underline;
            }
            #tanchu{
                color: red;
                width: 400px;
                height: 80px;
                background-color: #999;
                float: right;
                display: none;
            }
        </style>
        
    </head>
    <body>
        <div class="change">
            <h1>1.说明事件</h1>
            <input type="button" name="" class="f1" value="按钮" οnclick="attention()"/>
        </div>
        <div class="change">
            <h1>2.移入移出</h1>
            <input type="checkbox" name="" id="ck" value="" />
            <span οnmοuseenter="show()" οnmοuseleave="hide()">鼠标经过出现按钮</span><br />
            <input type="button" name="" class="f1" id="bt" value="按钮" />
        </div>
        <div class="change" id="changeColor" οnmοuseοver="changeColor()" οnmοuseleave="fchangeColor()">
            <h3>3、函数 鼠标经过这个div执行变窄变高变色 移出再恢复</h3>
        </div>
        
        <div class="change">
            <h2 id="over" οnmοuseοver="tanchu()" οnmοuseleave="xiaoshi()">鼠标经过就弹出层(函数、变量)</h2>
            <div id="tanchu">
                这是弹出的层
            </div>
        </div>
        <script type="text/javascript">
            
                function attention(){
                    alert("弹出窗口");
                }
                function show(){
                    var bt = document.getElementById("bt");
                    bt.style.display = "block";
                    console.log(bt);
                }
                function hide(){
                    var bt = document.getElementById("bt");
                    bt.style.display = "none";
//                    console.log(bt);
                }
                function changeColor(){
                    var changeColor = document.getElementById("changeColor");
                    changeColor.style.backgroundColor = "red";
                }
                function fchangeColor(){
                    var changeColor = document.getElementById("changeColor");
                    changeColor.style.backgroundColor = "white";
                }
                
                function tanchu(){
                    var tanchu = document.getElementById("tanchu");
                    tanchu.style.display = "block";
                }
                function xiaoshi(){
                    var tanchu = document.getElementById("tanchu");
                    tanchu.style.display = "none";
                }
        </script>
    </body>
</html>

②javascript练习之innerHtml 数组 字符串拼接

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {
            background-color: #F6F6F6;
        }
        
        .f1 {
            width: 1244px;
            margin: 0 auto;
        }
        
        .f1>li {
            height: 370px;
            border-bottom: 8px;
            background-color: #ffffff;
            margin: 15px 0;
        }
        
        .title {
            display: block;
            padding: 42px 0 0 18px;
            font-size: 25px;
            color: #7698a7;
            cursor: pointer;
        }
        
        .title:hover {
            color: #23527c;
            text-decoration: underline;
        }
        
        .f1>li>h4 {
            color: #4f6f7d;
            padding: 24px 0 20px 19px;
        }
        
        .content1 {
            width: 987px;
            height: 172px;
            /*border: 1px solid red;*/
            margin: 0 auto;
        }
        
        .content1_input,
        .content1_show {
            height: 80px;
            margin-bottom: 10px;
            /*border: 1px solid yellow;*/
            padding-left: 20px;
            padding-top: 20px;
            border-bottom: 8px solid #e8f3ec;
            box-shadow: 0px 0px 5px #888888;
        }
        
        .content1_input input {
            border: 1px solid #d6d6d6;
            border-radius: 5px;
        }
        
        .content1_input input[type=text] {
            width: 172px;
            height: 35px;
        }
        
        .content1_input input[type=button] {
            width: 52px;
            height: 35px;
            background-color: #fff;
            border: none;
            border: 1px solid #d6d6d6;
            cursor: pointer;
            transition: background-color 1s;
        }
        
        .content1_input input[type=button]:hover {
            background-color: #888888;
        }
    </style>

    <body>
        <ul class="f1">
            <li>
                <a class="title">javascript练习之innerHtml 数组 字符串拼接</a>
            </li>
            <li>
                <h4>1、innerHTML的基本使用</h4>
                <div class="content1">
                    <div class="content1_input">
                        <input type="text" name="" id="ip1" value="" placeholder="在这里输入文字" />
                        <input type="button" name="" id="btn1" value="提交" />
                    </div>
                    <div class="content1_show">
                        <span id="">
                            提交后在这里显示:<span id="result"></span>
                        </span>
                    </div>
                </div>
            </li>
            <li>
                <h4>2、innerHTML、字符串、判断的基本使用</h4>
                <div class="content1">
                    <div class="content1_input">
                        <input type="text" name="" id="ip1" value="" placeholder="在这里输入文字" />+
                        <input type="text" name="" id="ip2" value="" placeholder="在这里输入文字" />
                        <input type="button" name="" id="btn1" value="提交" />
                    </div>
                    <div class="content1_show">
                        <span id="">
                            提交后在这里显示:<span id="result"></span>
                        </span>
                    </div>
                </div>
            </li>
            <li>
                <h4>3、数组输出练习</h4>
                <div class="content1">
                    <div class="content1_input">
                        <p>已知数组内容:1、这是第一句,2、这是第二句,3、这是第三句,4、这是第四句。</p>
                        <input type="button" name="" class="btn3" value="提取一" />
                        <input type="button" name="" class="btn3" value="提取二" />
                        <input type="button" name="" class="btn3" value="提取三" />
                        <input type="button" name="" class="btn3" value="提取四" />
                        <input type="button" name="" class="btn3" value="全部弹出提取" style="background-color: #5bc0de;width: 108px;" />

                    </div>
                    <div class="content1_show">
                        <span id="">
                            提交后在这里显示:<span id="result3"></span>
                        </span>
                    </div>
                </div>
            </li>
            <li>
                <h4>记录</h4>
            </li>
        </ul>

        <script type="text/javascript">
            var btn1 = document.getElementById("btn1");
            var ip1 = document.getElementById("ip1");
            var ip2 = document.getElementById("ip2");
            var result = document.getElementById("result");
            btn1.onclick = function() {
                var res = ip1.value + ip2.value;
                result.innerHTML = res;
            }
            
            
            
            //数组提取
            var arr = ["这是第一句","这是第二句","这是第三句","这是第四句"];
            var btn3 = document.getElementsByClassName("btn3");
            var result3 = document.getElementById("result3");
            for(var i = 0;i < btn3.length;i++){
                btn3[i].index = i;
                btn3[i].onclick = function(){
                    for(var j = 0;j < arr.length;j++){
                        if(this.index == j && this.index != arr.length){
                            result3.innerHTML = arr[j];
                        }else if(this.index == arr.length){
                            for(var k = 0;k < arr.length;k++){
                                alert(arr[k]);
                            }
                            break;
                        }
                    }
                }
            }
            
        </script>
    </body>

</html>

③this 索引值

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>this 索引值</title>
    </head>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        
        body {
            background-color: #F6F6F6;
        }
        
        .f1 {
            width: 1244px;
            margin: 0 auto;
        }
        
        .f1>li {
            height: 205px;
            border-bottom: 8px;
            background-color: #ffffff;
            margin: 15px 0;
        }
        
        .title {
            display: block;
            padding: 42px 0 0 18px;
            font-size: 25px;
            color: #7698a7;
            cursor: pointer;
        }
        
        .title:hover {
            color: #23527c;
            text-decoration: underline;
        }
        
        .f1>li>h4 {
            color: #4f6f7d;
            padding: 24px 0 0 19px;
        }
        
        .btn {
            width: 66px;
            height: 32px;
            border: none;
            background-color: #5bc0de;
            cursor: pointer;
        }
        
        .context1,
        .context2 {
            background-color: #d9edf7;
            padding-left: 40px;
            color: #66709b;
            display: none;
        }
        
        .default {
            background-color: #f0f0f0;
        }
        
        .ip1,
        .ip2 {
            transition: background-color 1s;
        }
    </style>

    <body>
        <ul class="f1">
            <li>
                <a class="title">javascript练习之this 索引</a>
            </li>
            <li>
                <h4>1、选项卡 鼠标经过变换</h4>
                <div id="">
                    <input type="button" name="" id="" value="栏目一" class="btn default ip1" />
                    <input type="button" name="" id="" value="栏目二" class="btn ip1" />
                    <input type="button" name="" id="" value="栏目三" class="btn ip1" />
                    <input type="button" name="" id="" value="栏目四" class="btn ip1" />
                </div>
                <div id="">

                    <ul class="context1" style="display: block;">
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                    </ul>
                    <ul class="context1">
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                    </ul>
                    <ul class="context1">
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                    </ul>
                    <ul class="context1">
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                    </ul>
                </div>
            </li>
            <li>
                <h4>2、选项卡 鼠标点击变换</h4>
                <div id="">
                    <input type="button" name="" id="" value="栏目一" class="btn default ip2" />
                    <input type="button" name="" id="" value="栏目二" class="btn ip2" />
                    <input type="button" name="" id="" value="栏目三" class="btn ip2" />
                    <input type="button" name="" id="" value="栏目四" class="btn ip2" />
                </div>
                <div id="">

                    <ul class="context2" style="display: block;">
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                        <li>栏目一的内容</li>
                    </ul>
                    <ul class="context2">
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                        <li>栏目二的内容</li>
                    </ul>
                    <ul class="context2">
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                        <li>栏目三的内容</li>
                    </ul>
                    <ul class="context2">
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                        <li>栏目四的内容</li>
                    </ul>
                </div>
            </li>
            <li>
                <h4>3、选项卡 鼠标点击变换</h4>
            </li>
            <li>
                <h4>记录</h4>
            </li>
        </ul>

        <script type="text/javascript">
            function setMouse(arrIp, arrContext, method) {
                for(var i = 0; i < arrIp.length; i++) {
                    arrIp[i].index = i; //为按钮这个对象添加一个index属性,记录当前索引值
                    if(method == "onmouseover") {

                        arrIp[i].onmouseover = function() { //为当前按钮添加鼠标移入事件
                            this.className = "btn default ip1"; //this指向当前按钮,设置当前元素的class名
                            var sub1 = this.parentNode.childNodes; //获取当前元素的兄弟节点(包括自己)

                            for(var j = 0; j < sub1.length; j++) { //遍历按钮元素
                                if(sub1[j] != this) { //如果不是自身
                                    sub1[j].className = "btn ip1"; //重新给class赋值,删除default
                                }
                            }
                            for(var j = 0; j < arrContext.length; j++) { //遍历内容元素
                                if(j == this.index) { //如果索引与当前按钮索引一致
                                    arrContext[j].style.display = "block"; //设置display为block
                                } else {
                                    arrContext[j].style.display = "none"; //反之,设置为none
                                }

                            }

                        }
                    }else if(method == "onclick"){
                        arrIp[i].onclick = function() { //为当前按钮添加鼠标移入事件
                            this.className = "btn default ip1"; //this指向当前按钮,设置当前元素的class名
                            var sub1 = this.parentNode.childNodes; //获取当前元素的兄弟节点(包括自己)

                            for(var j = 0; j < sub1.length; j++) { //遍历按钮元素
                                if(sub1[j] != this) { //如果不是自身
                                    sub1[j].className = "btn ip1"; //重新给class赋值,删除default
                                }
                            }
                            for(var j = 0; j < arrContext.length; j++) { //遍历内容元素
                                if(j == this.index) { //如果索引与当前按钮索引一致
                                    arrContext[j].style.display = "block"; //设置display为block
                                } else {
                                    arrContext[j].style.display = "none"; //反之,设置为none
                                }

                            }

                        }
                    }
                }
            }

            var arrIp1 = document.getElementsByClassName("ip1");
            var arrContext1 = document.getElementsByClassName("context1");

            setMouse(arrIp1, arrContext1, "onmouseover");
            var arrIp2 = document.getElementsByClassName("ip2");
            var arrContext2 = document.getElementsByClassName("context2");
            setMouse(arrIp2, arrContext2,"onclick");
        </script>
    </body>

</html>

这就是今天的几个小案例啦,其中第三个this 索引值比较绕,要多理解


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北街学长

你的鼓励使我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值