0
点赞
收藏
分享

微信扫一扫

JavaScript学习4

就是耍帅 2022-07-01 阅读 49
htmljavascriptfor循环系统/运维

1、if语句的使用：如果...否则

if(判断条件){

　　//当判断条件满足时，执行该处代码

}else{

　　//当判断条件不满足时，执行该处代码

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id='box' style="width: 200px;height: 200px;background: red;"></div>
<button id="btn">验证</button>
<script>
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    //if(判断条件){条件成立执行}
    btn.onclick = function () {
        //当宽度=200px时
        if (box.style.width == '200px') {
            alert("条件成立！！")
        }else{
            //不满足条件执行
            alert("条件不成立！！")
        }
    }

</script>
</body>
</html>

2、多条件判断if...else if...:r如果...或者如果...否则

if(判断条件){

　　//当判断条件满足时，执行该处代码

}else if(判断条件){

　　//当判断条件满足时，执行该处代码

}else if(判断条件){

　　//当判断条件满足时，执行该处代码

}else{

　　//当判断条件不满足时，执行该处代码

}

实现一个评分系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id='score' type="text">
<button id="btn">评级</button>
<script>
    var score = document.getElementById('score');
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        var scoreTxt = score.value;
        if(scoreTxt >= 80){
            alert('优秀！');
        }else if(scoreTxt >= 70){
            alert('良好！');
        }else if(scoreTxt >= 60){
            alert('一般！');
        }else{
            alert('不及格~！！')
        }
    }
</script>
</body>
</html>

注意事项：

　　1）判断条件可以有多个。

　　2）可以只有if没有else。

　　3、判断条件之布尔值

　　true 真

　　false 假

4、比较运算符

　　5 > 10  大于 -->false

　　5 < 10 小于 -->true

　　5 == 10 等于 -->false

5、逻辑运算符

　　与&&

　　或||

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input id='score' type="text">
<button id="btn">评级</button>
<script>
    var score = document.getElementById('score');
    var btn = document.getElementById('btn');
    btn.onclick = function () {
        var scoreTxt = score.value;
        // && 与
//        if(scoreTxt <= 100 && scoreTxt >= 0){
//           alert('正常值！！');
//        }else {
//            alert('非正常值！！');
//        }
        // || 或
        if(scoreTxt > 100 || scoreTxt < 0) {
            alert('非正常值！！');
        }else {
            alert('正常值！！');
        }

        //
    }
</script>
</body>
</html>

 　　非！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
<div id='box' style="width: 200px;height: 200px;background: red;"></div>
<button id="btn">验证</button>
<script>
    var box = document.getElementById('box');
    var btn = document.getElementById('btn');
    //定义开关：下拉菜单的打开与关闭的切换
    var onOff = true;
    //if(判断条件){条件成立执行}
    btn.onclick = function () {
        if (onOff) {
            alert("条件成立！！")
//            onOff = false;
        }else{
            //不满足条件执行
            alert("条件不成立！！")
//            onOff = true;
        }
        // 每次都需要修改取反，可控制开关
        onOff = !onOff;
    }
</script>
</body>
</html>

 6、定义数组

1）[ ] 可以存储多个值

2）每个值之间利用都好进行间隔，最后一个值后面没有逗号

var arr = ['a','b','c'];

3）数组的长度length

var arr = ['a','b','c'];
    /*
    * 通过length属性可以查看当前数组中有多少个值
    * */
   arr.length

7、for循环和this指向

1）对一个div操作实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<script>
    //假如对一个div进行操作
//    var div = document.querySelector('div');
//    div.onclick = function () {
//        div.style.background = 'yellow';
//    }

    /*假如对2个div进行操作
    * 现在可以获取到一个元素all所有、全部
    * 获取了一组div
    * 不能直接给一组元素加事件
    * 类数组
    * */
    var divs = document.querySelectorAll('div');
    //获取元素的长度
//    console.log(divs.length);-->2
//    divs.onclick = function () {
//        divs.style.background ='green';
//    }
    divs[0].onclick = function () {
        divs[0].style.background = 'green';
    };

    divs[1].onclick = function () {
        divs[1].style.background = 'blue';
    };
    
    //假如对100个div进行操作，引出for循环
</script>
</body>
</html>

2）假如对100个div进行操作，引出for循环

for(初始值,循环条件,自增条件){
        执行语句
    }

JavaScript学习4_for循环

8、this指向

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<script>
    var divs = document.querySelectorAll('div');
    //加入对100个div进行操作，引出for循环
    //for循环重复不断的做一件事情
//    for(初始值,循环条件,自增条件){
//        执行语句
//    }

    // for循环在页面加载时执行！！
    for(var i=0;i<divs.length;i++){
        //执行3次
//        alert(i);
//        console.log(i);-->0 1 表示执行了2次
        divs[i].onclick = function () {
//            console.log('点击事件内的i'+ i); -->此时的i的值是2
// 当 divs[2].style时，因为没有定义divs[2]导致报错》》Uncaught TypeError: Cannot read properties of undefined (reading 'style')
            divs[i].style.background = 'green';
        };
    }
    //i=2时for循环结束
</script>
</body>
</html>

this指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
        }
    </style>
</head>
<body>
<div></div>
<div></div>
<script>
    var divs = document.querySelectorAll('div');
    for(var i=0;i<divs.length;i++){
        divs[i].onclick = function () {
            //this就是当前调用事件的元素
            this.style.background = 'green';
        };
    }
</script>
</body>
</html>

9、元素的自定义属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            margin: 20px;
        }
    </style>
</head>
<body>
<div class="box" id="abc" title="啦啦啦"></div>
<script>
    var div = document.querySelectorAll('div')[0];
    //自定义属性
    div.title = '哈哈哈';
    //自定义属性在f12看不到，但是可以获取到
    console.log(div.title)
</script>
</body>
</html>

JavaScript学习4_html_02

 10、复选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="box">
    <h3>模拟复选</h3>
    <div class="option">
        <a href="javascript:;">美食</a>
        <a href="javascript:;">逛街</a>
        <a href="javascript:;">旅游</a>
    </div>
</div>
<script>
    /*
    * 1、for
    * 2、if
    * 3、开关
    * 4、自定义属性
    * */

    //获取一组a标签
    var btns = document.querySelectorAll('.option a');

    // for 给一组元素加事件
    for(var i=0;i<btns.length;i++){
        btns[i].onclick = function () {
            //操作对应的按钮class
            this.className = 'checked';
        }
    }
</script>
</body>
</html>

JavaScript学习4_javascript_03

11、单选框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .choice{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .choice a{
             display: block;
             width: 87px;
             height: 20px;
            /* border: 1px solid black; */
            text-decoration: none;
            text-align: center;
        }
        .checked{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="choice">
        <a href="javascript:;">男</a>
        <a href="javascript:;">女</a>
        <a href="javascript:;">保密</a>
    </div>
    <script>
        /*
        1.获取元素绑定元素
        2、for添加点击事件
        3、点击摸一个按钮之后先将所有按钮class都变空
        4、找到对应点击的按钮给他单独加上class=checked
        */
        //获取元素绑定元素
        var btns = document.querySelectorAll('.choice a');
        // 需要操作一组元素的时候就要用到for
        for(var i=0; i<btns.length;i++){
            btns[i].onclick = function(){
                //点击摸一个按钮之后先将所有按钮class都变空
                for(var j =0 ; j<btns.length;j++){
                    btns[j].className = '';
                }
                //找到对应点击的按钮给他单独加上class=checked
                this.className = 'checked';
            }
        }
    </script>
</body>
</html>

JavaScript学习4_javascript_04

 

12、this函数下是this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .choice{
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
        .choice a{
             display: block;
             width: 87px;
             height: 20px;
            /* border: 1px solid black; */
            text-decoration: none;
            text-align: center;
        }
        .checked{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="choice">
        <a href="javascript:;">男</a>
        <a href="javascript:;">女</a>
        <a href="javascript:;">保密</a>
    </div>
    <script>
        /*
        1.获取元素绑定元素
        2、for添加点击事件
        3、点击摸一个按钮之后先将所有按钮class都变空
        4、找到对应点击的按钮给他单独加上class=checked
        */
        //获取元素绑定元素
        var btns = document.querySelectorAll('.choice a');
        // 需要操作一组元素的时候就要用到for
        for(var i=0; i<btns.length;i++){
            btns[i].onclick = function(){
                //点击摸一个按钮之后先将所有按钮class都变空
                for(var j =0 ; j<btns.length;j++){
                    btns[j].className = '';
                }
                //找到对应点击的按钮给他单独加上class=checked
                this.className = 'checked';
            }
        }
    </script>
</body>
</html>

13、classList

1)add()

2)remove()

3)contains()

4) toggle()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class列表</title>
    <style>
        div{
            width:200px;
            height:200px;
            background: red;
        }
        .show{border:20px solid yellow;}
        .now{height:300px;}
    </style>
</head>
<body>
<div class="show active"></div>
<script>
    //classList class列表
    //操作元素的class属性的
    //obj.className操作class的
    var div =document.querySelector('div');
    div.onclick = function () {
//        //需要将原有的class自己手动加上
//        div.className = 'show active now';

        //体现classList的作用
        // add():在class原有的基础上添加一个属性
//        div.classList.add('now');

        //remove(),删除class的某个属性
//        div.classList.remove('show');

        //contains()，判断是否含有某个class contains
//        console.log(this.classList.contains('active'));  // true
//        console.log(this.classList.contains('abc'));  // false

        //toggle(),切换class,（添加/删除）例如：点击一下有，再点击一下无
        div.classList.toggle('now');
    }
</script>
</body>
</html>

14、九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0px;
            font-size: 0px;
        }
        div{
            width: 120px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            color: #fff;
            margin-right: 2px;
            margin-bottom: 2px;
            border-radius: 5px;
            background: lightcoral;
            display: inline-block;
            font-size: 16px;
        }
        .warp{
            background: url(img/bg.jpg) no-repeat center;
            height: 1067px;
            overflow: hidden;
        }
        #box{
            width: 1157px;
            height: 436px;
            background: linear-gradient(45deg,#dad4fa,#edebfd);
            border-radius:20px;
            padding:30px 0 0 30px;
            box-sizing:border-box;
            margin: 454px auto 0;
            position: relative;
        }
    </style>
</head>
<body>
<section class="warp">
    <section id="box">

    </section>
</section>
<script>
    var box = document.getElementById('box');
    var colors = ['#78cc64','#58cd7e','#4fcdad','#4cc7dd','#469ee8','#465de8','#5846e8','#8346e8','#9e46e8'];
    var str = '';
    for(var i = 1;i<10;i++){
        for(var j = 1;j<=i;j++){
//            box.innerHTML += '<div>' + j + ' * ' + i + ' = ' + j * i + '</div>';
            str += '<div style="background: '+ colors[i -1] + '">' + j + ' * ' + i + ' = ' + j * i + '</div>';
        }
        str += '</br>'
    }
    box.innerHTML = str;
</script>
</body>
</html>

JavaScript学习4_javascript_05

 


举报

相关推荐

web学习4-JavaScript

javajavascript前端

JavaScript学习 -- SM4算法应用实例

字符串数据加密算法JavaScript前端开发

JavaScript 学习-23.函数调用4种方式

JavaScript调用函数javascript作用域前端开发

JavaScript 学习-4.Array数组遍历的几种方式

JavaScript数组回调函数window对象前端开发

Lesson4：JavaScript

javascriptjava

javascript 学习

javascriptfunctionobjectconstructorproperties数字化转型

JavaScript-入门第三周学习笔记4

javascript前端

15JavaScript-4. JavaScript流程控制

javascript流程控制PHP前端开发

JavaScript学习——JavaScript闭包

模块化开发私有变量作用域闭包JavaScript前端开发

JavaScript4——DOM编程

javascripthtmlcss
0 条评论