7-14JavaScript-计时器

基本概念

javascript是一门客户端脚本语言运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎

脚本语言：不需要编译，直接就可以被浏览器解析执行了

js可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态>的效果，增强用户的体验。

js 和html

   * 内部js:

     定义<script>，标签体内容就是js代码

* 外部js

​       定义<script>，通过src属性引入外部的js文件

注意：

1. Script可以定义在html页面的任何地方。但是定义的位置会影响执行顺序。参考上面的例子，修改在页面中的地方。

2. script可以定义多个。

<script>
    var elementById = document.getElementById("text1");
    alert(elementById.value);
    elementById.value= "xxxxxx";

    // function fun1(){
    //     alert("1111");
    // }
</script>

数据类型

* 原始数据类型(基本数据类型)：

number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)

string：字符串。 字符串  "abc" "a" 'abc'

boolean: true和false

null：一个对象为空的占位符

undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

<script >

        //定义变量
       /* var a  = 3;
        alert(a);

        a = "abc";
        alert(a);*/

       //定义number类型

        var num = 1;
        var num2 = 1.2;
        var num3 = NaN;

        //输出到页面上
        document.write(num+"<br>");
        document.write(num2+"<br>");
        document.write(Number(num3)+"<br>");
        //定义string类型

        var str = "abc";
        var str2 = 'edf';
        document.write(str+"<br>");
        document.write(str2+"<br>");

        //定义boolean
        var flag = true;
        document.write(flag+"<br>");

        // 定义null,undefined
        var obj = null;
        var obj2 = undefined;
        var obj3 ;
        document.write(obj+"<br>");
        document.write(obj2+"<br>");
        document.write(obj3+"<br>");

    </script>

变量

变量：一小块存储数据的内存空间

Java语言是强类型语言，而JavaScript是弱类型语言。

强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据

弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

语法：var 变量名 = 初始化值;

typeof运算符：获取变量的类型。

注：null运算后得到的是object、

类型转换

其他类型转number：

string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）

    <script>
        var a = "123";
        alert(Number(a)+1);
    </script>

boolean转number：true转为1，false转为0

  <script>
        var a = false;
        alert(Number(a)+1);
    </script>

运算符

一元运算符：只有一个运算数的运算符++ -- + -

    // document.write(a+++"<br/>");
    // document.write(a--+"<br/>");
    document.write(a+b+"<br/>");
    document.write(a-b+"<br/>");

算数运算符。+ - * / %

        var a=4;
        var b=5;
        alert(a+b);
        alert(a-b);
        alert(a*b);
        alert(a/b);
        alert(a%b);
        alert(a/0);//Infinity

赋值运算符 =    +=      -+ 

    <script>
        var a=4;
        var b=5;
        alert(a+=5);
        a-=5;
        alert(a);
    </script>

比较运算符
< >= <= == ===全等于

        var a = 4;
        var b = 5;
        var d = "asf";
        var e = "ase";
        var c = "123"
        var f = 123;

        alert(a>b);
        alert(d>e);
        alert(c==f);
        alert(c===f);

类型相同：直接比较

字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

类型不同：先进行类型转换，再比较

===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

逻辑运算符

        //标准写法
        //数字写法  123 0 NaN
        //字符串 "123"   ""
        // null & undefined
        //
        var obj = "abc";
        if(obj){}
        if(obj!=null && obj.length>0){}
        //对象==所有对象都为true
        var obj = new Date();
        if(!!obj){}

三元运算符
? : 表达式

    var a = 10;
        alert(a>10?11:9);

* if...else...
* for

        var sum =0;
        for(var i=0;i<=100;i++)
        {
            sum+=i;
        }
        alert(sum);

switch(变量):

var a =undefined;
        switch (a) {
            case 0: alert(0);break;
            case true: alert(true) ;break;
            case null:alert(null);break;
            case undefined:alert("undefined");break;
            case NaN : alert("NaN");break;
        }

while

var a = 100;
        var sum =0;
        while (a>0)
        {
            sum+=a;
            a--;
        }
        alert(sum);

##### Function：函数(方法)对象

* 第一种方式

function 方法名称(形式参数列表){
                        方法体
                    }

    <script>
      function fun1(obj1,obj2){
          return obj1+obj2;
      }

      alert(fun1(2,4));
    </script>

第二种
var 方法名 = function(形式参数列表){
                        方法体
                   }

    <script>
      var obj = function fun1(obj1,obj2,obj3){
          return obj1+obj2;
      }
      alert(obj(1,2));
      alert(obj.length);
    </script>

特点

方法定义是，形参的类型不用写,返回值类型也不写。

方法是一个对象，如果定义名称相同的方法，会覆盖.

在JS中，方法的调用只与方法的名称有关，和参数列表无关

在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

调用：方法名称(实际参数列表);

    <script>
      function add(){
          var sum=0;
          for(var i=0;i<arguments.length;i++)
          {
              sum+=arguments[i];
              alert(arguments[i]);
          }
          return sum;
      }

      alert(add(1,2,3));
    </script>

创建：var arr = new Array(元素列表);

var arr = new Array(默认长度);

var arr = [元素列表];

方法

join(参数):将数组中的元素按照指定的分隔符拼接为字符串

push()	向数组的末尾添加一个或更多元素，并返回新的长度。

属性

length:数组的长度

特点

1. JS中，数组元素的类型可变的。
2. JS中，数组长度可变的。

    <script>
      var arr = new Array();
      arr.push("aa");
      arr.push("bb");
      arr.push("cc");
      var strarrs = arr.join(",");
      alert(strarrs);
    </script>

#####  Date：日期对象

var date = new Date();

toLocaleString()：返回当前date对象对应的时间本地字符串格式

getTime():获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

<script>
      var date = new Date();
      var strs = date.toLocaleDateString();
      date.getTime();
    </script>

##### Math：数学对象

创建：特点：Math对象不用创建，直接使用。  Math.方法名();

random():返回 0 ~ 1 之间的随机数。 含0不含1
                ceil(x)：对数进行上舍入。
                floor(x)：对数进行下舍入。
                round(x)：把数四舍五入为最接近的整数。

属性：PI

for(var i=0;i<10;i++)
        {
            var random = Math.random();
            document.write(Math.round(random*100)+"<br/>");
        }

        alert(Math.PI);

跳转

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<span id="span1">10</span>秒后打开一个窗口
</body>
</html>
<script>
  var span01=document.getElementById("span1");
  var count=10;
  interval=setInterval(function (){
    count--;
    span01.innerHTML=count;
    if (count==0){
      clearInterval(interval);
      open("https://www.baidu.com");
    }
  },1000)

</script>

  								以上内容均为自己理解，不作为准确定理。
  								选择性观看，持续跟新进度，喜欢感谢关注
  												CSDN博主：One_Gun