第三学前端-CSDN博客

本文链接：https://blog.csdn.net/m0_57410337/article/details/122242193

默认不区分类型弱类型语言速度慢

还是要转化为汇编和C 多一个翻译步骤

自动识别翻译成强类型语言书写简单速度要慢

强类型语言中声明数组只能用一种

弱类型语言不区分数组默认不区分类型所以所有类型视为一种类型

方法不需要区分类型

方法前需要加function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>

</body>
<script type="text/javascript">
        var a = 9;
        var b = "abc";
        var c = 'aaa';
        var d = [1,2,3,4,5];
        var e = [2,7,"嗷嗷嗷","yxy",[1,2,3,5],c,d];
        var f ={
               "name":"啥啥啥",         //key:value
               "age":20,
                "height":168.5,
                "house":["汤臣一品"],
                "son":[{"name":"tom","age":10},{"name":"jack","age":8}]
        };
        method1(e,f);
        function method1(x,y){
               console.info(x);
               console.info(f.name);
               console.info(y.age);
               console.info(y.height);
               console.info(y.house[0]);
               console.info(y.son[0].name);

       }
</script>
</html>

按钮文本框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <input id="inp_1"  type="text"/>
           <input id="btn_1"  type="button" value="获取" onclick="method1()"/>        //获取按钮

</body>
<script type="text/javascript">
        
        
        function method1(){
            var x = document.getElementById("inp_1").value;          //先获取文本框值
                document.getElementById("inp_1").value=x+x+"====="       //再赋值
               

       }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <input id="inp_1"  type="text"/>+
           <input id="inp_2"  type="text"/>=
           <input id="inp_3"  type="text"/>
           <input id="btn_2"  type="button" value="获取" onclick="method1()"/>

</body>
<script type="text/javascript">
        
        
        function method1(){
            var x = document.getElementById("inp_1").value;
            var x2 = document.getElementById("inp_2").value;
             x = parseInt(x);
             x2 = parseInt(x2);
                document.getElementById("inp_3").value=x+x2;
               

       }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <input id="inp_1"  type="text"/>
           <select id="se_1">
                 <option value="1">+</option>
                 <option value="2">-</option>
                 <option value="3">*</option>
                 <option value="4">/</option>
            </select>
           <input id="inp_2"  type="text"/>=
           <input id="inp_3"  type="text"/>
           <input id="btn_2"  type="button" value="获取" onclick="method1()"/>

</body>
<script type="text/javascript">
        
        
        function method1(){
            var x = document.getElementById("inp_1").value;
            var x2 = document.getElementById("inp_2").value;
             x = parseInt(x);
             x2 = parseInt(x2);
             var y=document.getElementById("se_1").value;
           if(y =="1"){
               document.getElementById("inp_3").value=x+x2;
                }else if(y=="2"){
               document.getElementById("inp_3").value=x-x2;
                }else if(y=="3"){
               document.getElementById("inp_3").value=x*x2;
                }else{
               document.getElementById("inp_3").value=x/x2;
                }
               

       }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <input id="inp_1"  type="text"/>
           <input id="btn_2"  type="button" value="获取" onclick="method1()"/>
</body>
<script type="text/javascript">
        function method1(){
            var x = document.getElementById("inp_1");
             x.style.height="40px";
             x.style.width="300px";
             x.style.color="#2ac"
             x.style.backgroundColor="#2ac";
             x.style.marginLeft="20px";
       }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <div id="d_1" style="height:100px;width:300px;background-color:#2ac;" onclick="method1()"></div>
</body>
<script type="text/javascript">
        function method1(){
             var x = document.getElementById("d_1");
             
             x.innerHTML='<input type="text"/>';
             x.innerHTML+='<input type="button" value="确定"/>';
         

        }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>小羊羊</title>

</head>
<body>
           <div id="d_1" style="height:450px;width:450px;background-color:#2ac;margin-top:200px" onclick="method1()">
                              <div id="d_2" style="height:400px;width:800px;background-color:#8af;margin-left:200px;margin-top:100px;display:none;" onclick="method1()"></div>
                </div>
</body>
<script type="text/javascript">
        function method1(){
             var x = document.getElementById("d_2");
             x.style.display="block";
        }
</script>
</html>

偶数个方块div 字符串拼接

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>落雪炫舞</title>

</head>
<body>
            <div id="d_1" style="height:400px;width:400px;background-color:#2ac;" onclick="method1()"></div>

</body>
<script type="text/javascript">
         function method1(){
             var x =document.getElementById("d_1");
             var h='';
             for(var i=0;i<16;i++){
                           h+='<div style="height:100px;width:100px;background-color:#'+(i+3)%10+(i+7)%8+(i+9)%6+';float:left;"></div>';
              
             }
                   x.innerHTML=h;
     }
</script>
</html>

第二种for循环套娃

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>落雪炫舞</title>

</head>
<body>
            <div id="d_1" style="height:400px;width:400px;background-color:#2ac;" onclick="method1()"></div>

</body>
<script type="text/javascript">
         function method1(){
             var x =document.getElementById("d_1");
             var h='';
             for(var i=0;i<4;i++){
                    var w=i%2;
                    if(w==0){
                       h+='<div style="height:100px;width:100px;background-color:#aaa;float:left;"></div>';
               }else{
                       h+='<div style="height:100px;width:100px;background-color:#ccc;float:left;"></div>';
              }
                 
        }
for(var i=4;i<8;i++){
                    var y=i%2;
                    if(y==0){
                       h+='<div style="height:100px;width:100px;background-color:#ccc;float:left;"></div>';
               }else{
                       h+='<div style="height:100px;width:100px;background-color:#aaa;float:left;"></div>';          
               }
}
for(var i=8;i<12;i++){
                    var u=i%2;
                    if(u==0){
                       h+='<div style="height:100px;width:100px;background-color:#aaa;float:left;"></div>';
               }else{
                       h+='<div style="height:100px;width:100px;background-color:#ccc;float:left;"></div>';          
               }
}
for(var i=12;i<16;i++){
                    var e=i%2;
                    if(e==0){
                       h+='<div style="height:100px;width:100px;background-color:#ccc;float:left;"></div>';
               }else{
                       h+='<div style="height:100px;width:100px;background-color:#aaa;float:left;"></div>';          
               }
}
                   x.innerHTML=h;
     }
</script>
</html>

字符串拼接

 h+='<div style="color:#fff;height:100px;width:100px;
                 background-color:#'+(i+3)%10+(i+7)%8+(i+9)%6+';
                 float:left;">第'+(i+1)+'个</div>';

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>落雪炫舞</title>

</head>
<body>
            <div id="d_1" style="height:500px;width:80%px;background-color:#2ac;margin-left:5%;margin-top:50px;" onclick="method1()"></div>

</body>
<script type="text/javascript">
         function method1(){
             var x =document.getElementById("d_1");
             var h='';
             for(var i=0;i<14;i++){
                           h+='<div style="height:230px;width:140px;background-color:#a2c;float:left;border-radius:2px;margin:10px;">';
                           h+='<div style="height:196px;width:96%;background-color:#f8c;float:left;border-radius:2px;margin-left:2%;margin-top:4px;">';
                           h+='<img src="111.jpg" style="width:100%;height:196px;"/>'        
                           h+=   '</div>';    
                           h+='<div style="color:#fff;height:26px;width:96%;background-color:#4aa;float:left;margin:2%;">第'+(i+1)+'张照片</div>';  
                           h+='</div>';
             }
                   x.innerHTML=h;
     }
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>落雪炫舞</title>

</head>
<body>
            <div id="d_1" style="height:500px;width:80%px;background-color:#2ac;margin-left:5%;margin-top:50px;"></div>

</body>
<script type="text/javascript">
         function method1(){
             var x =document.getElementById("d_1");
             var h='';
             for(var i=0;i<14;i++){
                           h+='<div id="id_'+i+'"style="height:230px;width:140px;background-color:#a2c;float:left;border-radius:2px;margin:10px;" onclick="method2('+i+')">';
                           h+='<div style="height:196px;width:96%;background-color:#f8c;float:left;border-radius:2px;margin-left:2%;margin-top:4px;">';
                           h+='<img src="111.jpg" style="width:100%;height:196px;"/>'        
                           h+=   '</div>';    
                           h+='<div style="color:#fff;height:26px;width:96%;background-color:#4aa;float:left;margin:2%;">第'+(i+1)+'张照片</div>';  
                           h+='</div>';
             }
                   x.innerHTML=h;
     }
        function method2(uu){
             var x = document.getElementById("id_"+uu);
             x.style.display="none";
 }
   method1();
</script>
</html>