zoukankan      html  css  js  c++  java
  • JavaScript

    用法:

        在HTML中位置有三块:

        (1)head里面

        (2)body里面

        (3)</html>之后

        为了保险起见,一般写在</html>之后。

    <script language="javascript">代码必须放在这里面</script>

    三个常用对话框:

        alert("")警告对话框,作用是弹出一个警告对话框。

        confirm("")确定对话框,作用是弹出一个可供选择的确定对话框,点击确定之后,它返回ture,点击取消返回false,可以用变量来接收。

        prompt("要显示的提示文字"),作用是弹出一个可以输入内容的对话框。

    语法

    1.基本数据类型:

        字符串、小数、整数、日期时间、布尔型等。

    2.变量:

        都是通用类型var,可以随便存储其它类型的值,可以直接使用,不用定义。但习惯上定义。

    定义变量: var a;   //所有变量定义都用var定义,var是通用的可变类型。

    var s = "3.14"; var n = parseFloat(s); ; s += 5;
    var d = parseInt(s);

    3.数组:

        数组的定义:new Array();   //它的长度是动态变化的,里面可以放任意类型的元素。

        数组元素的赋值:a[0]=123; a[1]="hello";    //元素中的索引从0开始。

        数组的取值:a[i];

        数组属性:a.length;   //数组元素的个数,长度。

        方法:a.sort();//数组排序,按照每一个元素的第一个字符进行排序。a.reverse();   //翻转数组。

    4.函数:

        函数的四要素:名称、输入、返回值、加工。

        定义函数:function add(形参){函数体}    //函数名为add,输入为参数的形式,返回值可以是var类型,也可以return一个返回值。

        函数必须经过调用才能执行。函数的调用:add(实参)。

    *放在头部也可以读取(最先读取头部)

    表单提交时会自动刷新网页,最好关掉

    写法:

    1、输出

    <script>

                                         document.write("hello world");

    </script>

    2、按钮运用

    <input name="alert" value="alert"type="button" onclick='alert("这是触发事件")'/>

     onclick单击

    ondblclike 双击

    3、定义变量并输出

            var bianliang;

                     bianliang="123";

                     document.write(bianliang);

    4、改变元素的属性

    <p id="hello">hello</p>

    <script>

                     function hello()

                     {

                                         x=document.getElementById("hello")

                                         x.style.color = "#ff0000";

                     }

    </script>

    <input type="button" value="点击变颜色" onclick="hello()" />

    <!--点击由黑色变红色-->

    找到元素:

        docunment.getElementById("id");根据id找,最多找一个;
        var a =document.getElementById("id");将找到的元素放在变量中;
        docunment.getElementByName("name");根据name找,找出来的是数组;
        docunment.getElementByTagName("name");根据标签名找,找出来的是数组;
        docunment.getElementByClassName("name") 根据classname找,找出来的是数组;

    5item索引,指示第n个出现的元素,与getElementsByName同时使用

    定义一组变量

    var student =

                     {

                                         name:"张三",

                                         sex:""

                     };

                     student.name="张三";

                     document.write(student.name);

    *打印张三

    外部调用JS

    <script src=””></script>

    1.类型转换:

        分为自动转换和强制转换,一般用强制转换。

        其他类型转换为整数:parseint();

        其他类型转换为小数:parsefloat();

        判断是否是一个合法的数字类型:isNaN();

        是数字的话返回false,不是数字的话返回ture

    var a= prompt("输个数字进来","只能是数字")
    if(a!=null)
    {
        var b=isNaN(a);
        if(b)
        {
            alert("不是数字")
        }
        else
        {
            alert("不是数字")
        }
    }

    需要将prompt放进isNaN方法内

     

    2.运算符:

     

        数学运算符+   -   *   /   %   ++   --

     

        关系运算符==    !=   >=   <=   >   <

     

        逻辑运算符&&   ||   !;

     

        其他运算符+=   -=   *=   /=   %=   ?;

     

    3.语句:

     

        一般分为顺序、分支和循环语句。

     

    1)分支语句if

     

    if(判断条件)

     

    {

     

        满足条件要执行的语句

     

    }

     

    else

     

    {

     

        不满足条件时执行的语句

     

    }

     

      

     

    2)循环for语句:

     

    for初始条件;循环条件;状态改变

     

    {

     

        循环体

     

    }

     

      

     

    3)问题类型:穷举、迭代。

     

    4)两个关键词:break continue

     

    5)如果要输出某一参数的值:输出的值是"+a+""+b"

     

    <script>function visible1(){    $("p").hide();};</script></head><body><input type="button" onclick = "visible1()" value = "点这里让文字消失"/><p>我会消失。</p>

     

    $("id1")就相当于document.getElementById("id1")  

      1 <style>
      2 #d
      3 { height:500px;
      4 background-image:url(1.jpg);
      5 position:relative;
      6 top:10px;
      7 }
      8 </style>
      9 
     10 </head>
     11 1.输入你的性别,身高,体重,查看是否符合标准
     12 <input type="text"  id="sex" placeholder="请输入你的性别" />
     13 <input type="text"  id="height" placeholder="身高"  />
     14 <input type="text"  id="weight" placeholder="体重" />
     15 <input type="button" value="测试" onclick="check()" /><br />
     16 2.输入你的姓名,分数,查看是否及格,若>=80,再输出你很优秀!继续保持<br />
     17 <input type="text" id="xingming" placeholder="请输入你的姓名" /><br />
     18 <input type="text" id="fenshu" placeholder="请输入你的分数" />
     19 <input type="button" value="查看" onclick="cha()" /><br />
     20 3.设置一个div,准备好3张图片,设置3个按钮,分别更改不同的背景,默认是第一张(类似于QQ空间更换主题)
     21 <div id="d"></div><br />
     22 <input type="button" value="第一主题" onclick="change1()" />
     23 <input type="button" value="第二主题" onclick="change2()" />
     24 <input type="button" value="第三主题" onclick="change3()" />
     25 <br /><br />
     26 4.设置一个p标签,当点击这个p标签所在的位置时,更改文字的颜色,更改文字的大小<br />
     27 <p id="x1" onclick="xx1()">天门中断楚江开,碧水东流至此回,两岸青山相对出,孤帆一片日边来</p><br />
     28 
     29 
     30 
     31 
     32 
     33 
     34 <body>
     35 
     36 </body>
     37 </html>
     38 <script>
     39 <!--alert("输入有误")
     40 /*confirm("输入正确")-->*/
     41 <!--prompt("输个数字进来","只能是数字")-->
     42 var a= prompt("输个数字进来","只能是数字")
     43 if(a!=null)
     44 {
     45     var b=isNaN(a);
     46     if(b)
     47     {
     48         alert("不是数字")
     49     }
     50     else
     51     {
     52         alert("不是数字")
     53     }
     54 }
     55 function check()
     56 {
     57     var sex = document.getElementById("sex").value;    
     58     var height = parseInt( document.getElementById("height").value);    
     59     var weight = parseInt( document.getElementById("weight").value);
     60 if((weight == undefined || weight == null || weight == "")&&(sex == undefined || sex == null || sex == "")&&(height== undefined || height == null || height == ""))
     61     {
     62         alert("不能为空");
     63     }
     64     else
     65     {
     66     if(sex=="")
     67     {
     68         if(weight<height-100-3)
     69         {
     70             alert("体重偏瘦");    
     71         }
     72         else if(weight>height-100+3)
     73         {
     74             alert("你太胖了");    
     75         }
     76         else
     77         {
     78             alert("体重标准");
     79         }    
     80     }
     81     else if(sex=="")
     82     {
     83         if(weight<height-110-3)
     84         {
     85             alert("体重偏瘦");    
     86         }
     87         else if(weight>height-110+3)
     88         {
     89             alert("你太胖了");    
     90         }
     91         else
     92         {
     93             alert("体重标准");
     94         }       
     95     }
     96 }
     97 }
     98 
     99 function change1()
    100 {    var d=document.getElementById("d");
    101     d.style.backgroundImage="url(2.jpg)";
    102 }
    103 function change2()
    104 {    var d=document.getElementById("d");
    105     d.style.backgroundImage="url(3.jpg)";
    106 }
    107 function change3()
    108 {    var d=document.getElementById("d");
    109     d.style.backgroundImage="url(4.jpg)";
    110 }
    111 function cha()
    112 {    var xingming=document.getElementById("xingming").value;
    113     var fenshu=parseInt(document.getElementById("fenshu").value);
    114     if(xingming== ""&&fenshu== "")
    115     {
    116         alert("不能为空");
    117     }
    118     else
    119     {
    120         if(fenshu>0&&fenshu<=100)
    121         {
    122             if(fenshu>=80)
    123             {
    124                 alert("你很优秀!继续保持");
    125             }
    126             else
    127             {
    128                 alert("不及格");
    129             }
    130         }
    131         else
    132         {
    133             alert("分数不正确");    
    134         }
    135     }    
    136 }
    137 function xx1()
    138 {
    139     var x1 = document.getElementById("x1");
    140     x1.style.color="red";
    141     x1.style.fontSize="30px";    
    142 }
    143 
    144 </script>
    View Code

     1 <form id="form1" runat="server">
     2     <div>
     3         <input id="Text1" type="text" id="sex" placeholder="请输入你的性别" />
     4         <input id="Text2" type="text" id="height" placeholder="身高"  />
     5         <input id="Text3" type="text" id="weight" placeholder="体重"  />
     6         <input type="button" value="测试" onclick="fun()" />
     7     </div>
     8     </form>
     9 
    10 </html>
    11 <script type="text/javascript">
    12         function fun() {
    13             var a = document.getElementById("Text1").value;
    14             var b = parseInt(document.getElementById("Text2").value);
    15             var c = parseInt(document.getElementById("Text3").value);
    16             if (a == "" || isNaN(b) || isNaN(c)) 
    17             {
    18                 alert("不能为空");
    19             }
    20             else
    21             {
    22             var a = document.getElementById("Text1").value;
    23             var b = parseInt(document.getElementById("Text2").value);
    24             var c = parseInt(document.getElementById("Text3").value);          
    25                 if(a=="")
    26     {
    27         if(c<b-100-3)
    28         {
    29             alert("体重偏瘦");    
    30         }
    31         else if(c>b-100+3)
    32         {
    33             alert("你太胖了");    
    34         }
    35         else
    36         {
    37             alert("体重标准");
    38         }   
    39     }
    40     else if(a=="")
    41     {
    42         if(c<b-110-3)
    43         {
    44             alert("体重偏瘦");    
    45         }
    46         else if(c>b-110+3)
    47         {
    48             alert("你太胖了");    
    49         }
    50         else
    51         {
    52             alert("体重标准");
    53         }       
    54     }
    55     else
    56     {
    57         alert("是男还是女");    
    58     }
    59                 
    60             }
    61         }
    62      </script>
    View Code

     

     

     

  • 相关阅读:
    iOS数据持久化的方式
    Runtime
    <02>
    <01>
    <02>
    UIActivityIndicatorView
    <01>数据存储
    UI<10>
    UI<09>
    UI<08>
  • 原文地址:https://www.cnblogs.com/1030351096zzz/p/6014288.html
Copyright © 2011-2022 走看看