html+js的部分前端问题（包含例子和示例代码）

贩卖ლ日落

已于 2022-07-08 11:34:00 修改

阅读量437

点赞数

文章标签： javascript c# linq

于 2021-12-29 21:33:48 首次发布

本文链接：https://blog.csdn.net/qq_50838572/article/details/122224893

版权

Javascript 是弱类型语言，像C ，C++等是强类型语言

弱类型语言书写简单但是速度会慢

JS默认不区分类型，所以无法对他的数组做什么限制，所以他的方法没必要区分类型

json类型，面向对象类型，属性是value

嵌套一个数组

<script type="text/javascript" >

      var a = 9;

      var b = "earf";

      var c = 'aaff';

      var d = [1,2,3,4,5];

      var e = [2,7,"嘿嘿","哎呦",[3,5,"ddd"],c,d];

      var f = {

             "name":"陈浩",//key:value

             "age":20,

             "height":188,

             "house":["市中心","北二环"] 

             "son":[{"name":"tom","age":10},{"name":"jake","age":8}]

      };

      method1(e,f);


      function method1(x,y){

           console.info(x[2]);

           console.info(f.name);

           console.info(y.age);

           console.info(y.height);

           console.info(y.house[0]);

           console.info(y.son[0].name);


      }

</script>

小计算器书写记住document.getElementById("inp_1").value;ById是大写i

parseInt是大写i

<!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 if(y == "4"){

          document.getElementById("inp_3").value=x + x2;

          

          }





      }

</script>

      

</html>

小计算器

id=“”id和=中间没空格，单个属性间每空格，两个属性之间有空格

JS里面''指字符串

<!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>

字符串的拼接

JS的for循环

<!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-left:400px;margin-top:200px;" onclick="method1()"></div>

</body>

<script type="text/javascript" >




      function method1(){

           var x = document.getElementById("d_1");

           var h = '';

           for(var i = 0;i < 81;i++){

                var w = i % 2;

                if(w == 1){

                h +='<div style="height:50px;width:50px;background-color:#aaa;float:left;"></div>'

           }else{

                h +='<div style="height:50px;width:50px;background-color:#ccc;float:left;"></div>'

           }


           }


          x.innerHTML += h;






      }

</script>

      

</html>

none是什么都没有，display是显示出来

<!DOCTYPE html>

<html>

<head><!--头部文件-->

<meta charset="utf-8">

<title>落雪</title>


</head>

<body>

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

</body>

<script type="text/javascript" >




      function method1(){

           var x = document.getElementById("d_1");

           var h = '';

           for(var a = 0;a < 4;a++){

           var b = a % 2;

           if(b == 1){

              for(var i = 0;i < 4;i++){

                    var w = i % 2;

                    if(w == 1){

                   h +='<div style="height:50px;width:50px;background-color:#aaa;float:left;"></div>'

           }else{

                h +='<div style="height:50px;width:50px;background-color:#ccc;float:left;"></div>'

           }

     }

        }else{

           for(var i = 0;i < 4;i++){

                var w = i % 2;

                if(w == 1){

                h +='<div style="height:50px;width:50px;background-color:#ccc;float:left;"></div>'

           }else{

                h +='<div style="height:50px;width:50px;background-color:#aaa;float:left;"></div>'

                  }

        }

   }

}




          x.innerHTML = h;






      }

</script>

</html>

单引号字符串拼接

background-color 中间的这个-什么时候能去掉，写Js的时候可以去掉即驼峰命名法

method1()要放在后面，否则点击时全选，会把method1再运行一遍，放在后面去全局调用，

<!DOCTYPE html>

<html>

<head><!--头部文件-->

<meta charset="utf-8">

<title>落雪</title>


</head>

<body>

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

           </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 id="id_' + i +'"style="width:140px;height:230px;background-color:#a2c;float:left;margin-left:10px;margin-top:10px;border-radius:5px;"onclick="method2(' + i +' )">';

                h+='<div style="width:96%;height:196px;background-color:#f8c;float:left;margin-left:2%;margin-top:4px;">';

                h += '<img src = "1.png" style ="width:100%;height:196px;"/>'

                h +=    '</div>';

                h+='<div style="color:#fff,width:96%;height:26px;background-color:#4aa;float:left;margin-left:2%;">第' +(i+1) + '照片</div>';


                h +='</div>';

        }

          x.innerHTML = h;


}

          function method2(uu){

           var x = document.getElementById("id_" + uu);

          x.style.fontSize = "大家好";

          x.style.color="#";           


}

         method1();

</script>      

</html>