4、基础应用实例

首页 > 代码库 > 4、基础应用实例

2024-11-14 12:25:01 203人阅读

1、开关灯

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;
            /*background: white;*/
        }
        .bg0{
            background: red;
        }
        .bg1{
            background: blue;
        }
        .bg2{
            background: white;
        }
    </style>
</head>
<body  class="bg0" id="box" >
<script>
//    1、要操作谁就先获取谁
//2、绑定点击事件
//3.点击的时候 执行效果

    var obox=document.getElementById("box");

//第一种：
//    obox.onclick=function(){
//     var bg=obox.style.backgroundColor;
//        console.log(bg)
//     if(bg=="white"){
//        obox.style.backgroundColor="blue";
//     }else if(bg=="blue"){
//        obox.style.backgroundColor="red";
//     }else{
//        obox.style.backgroundColor="white";
//     };
//};

//第二种：
    obox.onclick=function sum(){
            var bg=obox.className;
            if(bg=="bg0"){
                obox.className="bg1"
            }else if(bg=="bg1"){
                obox.className="bg2"
            }else{
                obox.className="bg0"
            }
    };
sum()
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;
            /*background: white;*/
        }
        .bg0{
            background: red;
        }
        .bg1{
            background: blue;
        }
        .bg2{
            background: white;
        }
    </style>
</head>
<body id="box" style="background-color: white">
<script>
    var obox=document.getElementById("box")
    box.onclick=function(){
        var bg=this.style.backgroundColor
        bg=="white"?this.style.backgroundColor="black":this.style.backgroundColor="white";
    }
    //this 函数中 当前操作的元素
</script>
</body>
</html>

2、隔行换色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        div{
            width: 500px;
            border: 1px solid orange;
            margin: 0 auto;
            border-radius: 20px;
            /*position: absolute;*/
            /*top:50%;*/
        }
        li{
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
        }
        .bg1{
            background: gold;
        }
        .bg2{
            background: green;
        }
        .bg3{
            background: pink;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
    </ul>
</div>
<script>
    var oli=document.getElementById("box").getElementsByTagName("li");

//    for 循环
//    for(var i=0;i<oli.length;i++){
//        var obo=oli[i];
//        i%2==0?obo.className="bg1":obo.className="bg2"
//    };

//    拼接字符串
    for(var i=0;i<oli.length;i++){
//        var obo=oli[i];
        oli[i].className=‘bg‘+(i%2+1);// "bg"+(i%2+1) // ‘bg‘+(i%2+1)+‘‘  //"bg"+(i%2+1)+""
        // 但是"bg‘+i%2+‘"没法去解释  是错的   oli[i].oldName=
        console.log("bg"+(i%2+1))
//        console.log("bg"+i%2+"");  ?????拼接字符串（看单双引号的结束标签去理解,字符串中若遇到变量，要将变量两边断开 用+号拼接）
//        obo.oldName="bg"+i%2+""; // 自定义属性
        oli[i].onmouseover=function(){
            this.oldName=this.className
            this.className="bg3"
        };
        oli[i].onmouseout=function(){
            this.className=this.oldName
        };
    }


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

3、九九乘法表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 900px;
            height: 270px;
            border: 1px solid red;
            border-radius: 10px;

        }
        li{
            height: 30px;
        }
        span{
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .bg0{
            background: orangered;
        }
        .bg1{
            background: darkblue;
        }
        .bg2{
            background: green;
        }
        .bg3{
            background: pink;
        }
    </style>
</head>
<body>
<div id="box1" class="box"></div>
<script>
    var obox=document.getElementsByClassName("box").item(0);
    var oli=obox.getElementsByTagName("li");
    var str="";
    str+="<ul>";
    for(var i=1;i<=9;i++){
        str+="<li>";
        for(var j=1;j<=i;j++){
            str+="<span>";
                str+=j+"*"+i+"="+j*i;
            str+="</span>";
        };
        str+="</li>"
        oli[i].className="bg"+i%3;
        //为什么不能放到里面？？ js代码必须等结构加载完之后再加载，放到里面结构输出过程中不能识别，
//        单独拿出来，另外再放到一个循环中
    }
    str+="</ul>";
    console.log(str)
    obox.innerText=str;
    //box1.innerHTML=str  直接放Id名也可以？？？？？只有id名可以
    for(var s=1;s<=9;s++){
        oli[s].onmouseover=function(){
            this.old=this.className;//赋值 把后面的赋给前面的 把当前样式的类名赋给old属性
//            a=this.className;
// 不给a定义变量，默认为全局变量 也可以实现，虽然是鼠标移入和移出两个作用域，单全局变量都可以获取
            this.className="bg3";
        };
        oli[s].onmouseout=function(){
            this.className=this.old;
//            this.className=a;

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: arial, "微软雅黑";
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        #tab{
            width: 900px;
            height: 270px;
            position: absolute;
            top: 30%;
            left: 50%;
            margin:-135px 0 0 -450px;
            border: 1px solid red;
            border-radius: 10px;
        }
        #tab{
            height: 30px;
            line-height: 30px;
        }
        #tab span{
            width: 100px;
            height: 30px;
            display: inline-block;
            text-align: center;
        }
        .c0{
            background: blue;
        }
        .c1{
            background: pink;
        }
        .c2{
            background: gold;
        }
        .c3{
            background: orange;
        }
    </style>
</head>
<body>
<div id="tab">
    <!--<ul>-->
        <!--<li><span>1*1=1</span></li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
    <!--</ul>-->
</div>
<script>
    var otab=document.getElementById("tab");
    var str=""; //定义空字符串
    str+="<ul>";
        for(var i=1;i<=9;i++){
            var val=""; //设定初始值  可有可无 与输出的结果无关
            switch(i%3){
                case(0):
                    val="c1";
                    break;
                case(1):
                    val="c2";
                    break;
                default :
                    val="c3";
            }
            str+="<li class="+val+">";
            //上面switch输出一个值，为什么这里 class=val 是不对的，因为val是一个字符串
            // 向字符串中添加val是变量  字符串中若遇到变量，要将变量用+号拼接到字符串中。

//            str+="<li class=‘c"+i%3+"‘>"; //拼接字符串(c0 c1 c2) 写入隔行变色样式
//            str+="<li class=‘c"+(i%3+1)+"‘>"; //拼接字符串(c1 c2 c3) 写入隔行变色样式
//            console.log("<li class=‘c"+(i%3+1)+">");  // 能输出 注意拼接后保证class后面类名的引号

                            for(var j=1;j<=i;j++){  // j<=i 不能是 j<=9 否则就双向算两遍了
                                str+="<span>"; // 添加span标签 方便写入css样式
                                    str+=""+j+"*"+i+"="+(j*i)+"";  //str+="" 向span标签中添加内容
                                    // j+"*"+i+"="+j*i 按引号的开始与结束去理解的
                                str+="</span>";
                            };
            str+="</li>";
        };
    str+="</ul>";
otab.innerHTML=str;
    //字符串拼接：单双引号嵌套使用规则：
    // 1、单双引号不能同时嵌套用,外单内双 内双外单
//    2、如果一个字符串中需要增加一个变量，看最外面是""还是‘‘  如果是双引号，那么 "+变量+" ，如果是‘‘  则为 ‘+变量+‘
            // （原理：看单双引号的开始与结束标记来理解）
//    单双引号的使用不是外单内双 内单外双的记忆问题，而是单双引号的开始与结束的识别问题
                // “”大“”  “‘大’” 的意义是不一样的（第一个大字没有被引号包裹）
</script>
</body>
</html>

4、基础应用实例

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 4、基础应用实例

4、基础应用实例

看完仍有疑问？有类似问题直接问程序猿