12/29日js前端

js语言
弱类型语言,声明变量不需要加类型,但可以指定声明类型
弱类型语言运行速度比较慢
弱类型语言,在执行时也需要操作系统识别转强类型语言
var用来定义变量,默认不区分类型,弱类型语言定义数组可以存放不同类型,大数组可以包含小数组
弱类型语言,方法返回值也不区分类型
定义数组例:var e =[3,7,"嘿嘿","呦呦",[3,5,"ddd"],c,d];
定义对象案例:
var f = {
                "name":"张三",   //
                 "age":20,
                  "height":188,
                  "house":["市中心","北二环"],
                  "son":[{"name":"tom","age":10},{"name":"jack","age":8}]
         };
对象中可以包含数组
方法案例
var a = 9;
        var b = "earf";
        var c = 'aaff';
        var d = [1,2,3,4,5];
        var e =[3,7,"嘿嘿","呦呦",[3,5,"ddd"],c,d];
        var f = {
                "name":"张三",   //
                 "age":20,
                  "height":188,
                  "house":["市中心","北二环"],
                  "son":[{"name":"tom","age":10},{"name":"jack","age":8}]
         };
        
        method1(e,f);
        function method1(x,y){
             console.info(x[2]);
             console.info(y.name);
             console.info(y.age);
             console.info(y.height);
             console.info(y.house[0]);
             console.info(y.son[0].name);
        }

---------------------------------------------------------------------------------------------------------------------------------

小计算器写记住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="获取" οnclick="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>

---------------------------------------------------------------------------------------------------------------------------------

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

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


</div>
          
</body>

<script type="text/javascript">
           function method1(){
           var x = document.getElementById("d_1");
          var h = '';
          a = '#00FFFF';
           b = '#20B2AA';
          for(var i =0;i<16;i++){

          var w = i % 4;
          if(w == 0){
            h += '<div style="height:150px;width:150px;background-color:'+b+';float:left;"> </div>';
            }else if(w == 1){
            h += '<div style="height:150px;width:150px;background-color:'+a+';float:left;"> </div>';
            }else if(w == 2){
            h += '<div style="height:150px;width:150px;background-color:'+b+';float:left;"> </div>';
            }else if(w == 3){
            h += '<div style="height:150px;width:150px;background-color:'+a+';float:left;"> </div>';
               var c = a;
               a = b; 
               b = c;

            }

         }
         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: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;"οnclick="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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值