day03 for循环语句（关键词continue和break）、累加、点击事件

最新推荐文章于 2024-01-18 17:25:33 发布

啤u六六

最新推荐文章于 2024-01-18 17:25:33 发布

阅读量488

点赞数 1

分类专栏：笔记文章标签： javascript 前端点击事件

本文链接：https://blog.csdn.net/weixin_43524893/article/details/109679589

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、for循环语句

for循环基础语法

定义初始值
制定循环条件，条件成立就执行循环语句
循环体（大括号里边就是）
定义的初始值累计操作

for语句正序、倒序和输出奇数项

var ary = [1, 2, 3]; 
// 依次打印里边的每一项
var num = ary.length; 
for (i=0; i<num; i++) {

    console.log(ary[i]);

}
// 倒序输出每一项
for (i = num-1; i>=0; i--) {

    console.log(ary[i]);

}
// 打印奇数项
for (i=0; i<num; i++) {

    // 取余%
    if (i % 2 == 0) {
        console.log(ary[i]);
    }

}
for (i=0; i<num; i+=2) {

    console.log(ary[i]);

}
for (i=0; i<num; i++) {

    console.log(ary[i*2]);

}

二、累加符号（在前、在后的区别）

无论是++i还是i++，最终i的值都是3；
var b = i++; 加号在后面，i先赋值再++；
var b = ++i; 加号在前面，i先++再赋值;
累减则类似。

// 累加符号
// 无论是++i还是i++，最终i的值都是3；
// var b = i++; 加号在后面，i先赋值再++；
// var b = ++i; 加号在前面，i先++再赋值。
var i = 2; 
var b = i++; 
console.log("i" + ":" + i + "  " + "b" + ":" + b); 
var s = 2; 
var c = ++s; 
console.log("s" + ":" + s + "  "  + "c" + ":" + c);

三、两个重要的关键词

continue：结束本次循环，继续下一轮循环；
break：强制结束整个循环。

for(var i=1; i<=10; i+=2){

    if(i<=5){
       i++;//
       continue;
    }else{
       i-=2;
       break;  // 强制结束整个for循环
    }
    i--;
    console.log(i);
    

}
console.log(i); // 5

四、绑定鼠标点击事件

<body>

    <div id="box1" class="box" style="color: red;">box</div>
    <div id="box2" class="box" style="color: green;">box</div>
    <div id="box3" class="box" style="color: blue;">box</div>

</body>

<script>
var box1 = document.getElementById("box1"); 
var box2 = document.getElementById("box2"); 
var box3 = document.getElementById("box3"); 

box1.onmousemove = function () {

    console.log("划上了box盒子");

}
box1.onmouseout = function () {

    console.log("离开了box盒子");

}
// 点击事件
box1.onclick = function () {

    alert("点击了box盒子");
    this.style.color = "yellow"; 

    console.log(this.style.color);

}
box2.onclick = function () {

    console.log(this.style.color);

}
box3.onclick = function () {

    console.log(this.style.color);

}
</script>

innerHTML和innerText的区别

innerHTML 可以识别标签
innerText 只能识别文本，不能识别标签

通过标签名获取到类数组

<body>

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>
<script>
var lis = document.getElementsByTagName("li"); 
lis[0].onclick = function () {

    console.log(this.innerText);

}
</script>

五、开关灯案例

= 和 == 和 ===

= 赋值
== 比较（会默认转换数据类型）
=== 数据类型和数值必须一样（不会转化数据类型）

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开关灯案例</title>
    <style>

        * {
            margin: 0;
            padding: 0;
        }
        .main {
            margin: 0 auto;
            width: 300px;
            height: 300px;
            border: 1px solid red;
        }
        button {
            display: block;
            width: 100%;
            height: 50px;
            line-height: 50px;
        }
        img {
            margin-top: 25px;
            width: 300px;
            height: 200px;
        }
    </style>

</head>
<body>

    <div class="main">
        <button id="bt1">隐藏</button>
        <img id="img" src="../../../2020-css-01/smile.jpg" alt="">
    </div>

</body>
</html>
<script>

    /*
        如果button里边的文本为隐藏，
            1、更改按钮文本为显示；
            2、隐藏图片
        如果button里边的文本为显示，
            1、更改按钮文本为隐藏；
            2、显示图片
    */
    var bt1 = document.getElementById("bt1");
    var img = document.getElementById("img");
    bt1.onclick = function () {
        var bt1text = bt1.innerText;
        if (bt1text == "隐藏") {
            bt1.innerText = "显示";
            img.style.display = "none";
        }else {
            bt1.innerText = "隐藏";
            img.style.display = "block";
        }
    }

</script>

六、隔行变色案例

<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隔行变色</title>
    <style>

        * {

            margin: 0; 
            padding: 0; 
        }

        ul,
        ol {
            list-style: none;
        }

        .main {
            width: 500px;
            height: 300px;
            margin: 20px auto;
        }

        .main li {
            height: 40px;
            line-height: 40px;
            text-indent: 1em;
        }
    </style>

</head>

<body>

    <ul class="main">
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
        <li>元素垂直居中（块级元素、行内元素、图片、多行文本垂直居中）</li>
    </ul>

</body>

</html>
<script>

    var main = document.getElementsByClassName("main");
    var lis = document.getElementsByTagName("li");
    var num = lis.length;
    for (i = 0; i < num; i++) {
        // 奇偶数行  隔行变色
        if (i % 2 == 0) {
            lis[i].style.backgroundColor = "lightgreen";
            // 鼠标划上和离开的效果
            lis[i].onmouseover = function () {
                this.oldColor = this.style.backgroundColor;
                this.style.backgroundColor = "blue";
            }
            lis[i].onmouseout = function () {
                this.style.backgroundColor = this.oldColor;
            }
        } else {
            lis[i].style.backgroundColor = "teal";
            // 鼠标划上和离开的效果
            lis[i].onmouseover = function () {
                this.oldColor = this.style.backgroundColor;
                this.style.backgroundColor = "red";
            }
            lis[i].onmouseout = function () {
                this.style.backgroundColor = this.oldColor;
            }
        }

        // // 鼠标划上和离开的效果
        // lis[i].onmouseover = function () {
        //     // 记录该元素之前的颜色
        //     this.oldColor = this.style.backgroundColor;
        //     this.style.backgroundColor = "blue";
        // }
        // lis[i].onmouseout = function () {
        //     this.style.backgroundColor = this.oldColor;
        // }

    }
    
</script>

啤u六六

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day03 for循环语句（关键词continue和break）、累加、点击事件

一、for循环语句for循环基础语法定义初始值制定循环条件，条件成立就执行循环语句循环体（大括号里边就是）定义的初始值累计操作for语句正序、倒序和输出奇数项var ary = [1, 2, 3]; // 依次打印里边的每一项var num = ary.length; for (i=0; i<num; i++) { console.log(ary[i]);}// 倒序输出每一项for (i = num-1; i>=0; i--) { conso
复制链接

扫一扫