JS
无标签
发布日期:   2019-10-08
阅读次数:  

定时器

周期性定时器

  1. 定时器 setInterval（1，2）：周期性定时器
    1：重复执行的动作（函数）
    2：时间间隔（毫秒）
  2. 停止定时任务 clearInterval（定时器对象）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
    var   arr    =   ["img/1.jpg","img/2.jpg","img/3.jpg"];
   function   bian  (){
          var    tou  =   document.getElementById("tou");
       tou.setAttribute("src",arr[Math.floor(Math.random()*arr.length)]);
   }
   var   ob  =  setInterval(bian , 100);

   function   stop(){
       clearInterval( ob );
   }
   function   start(){
       ob  =  setInterval(bian , 100);
   }
</script>
<body>
        <img  src = ""   id="tou">
        <button  onclick="stop()"> 停止 </ button >
        <button  onclick="start()"> 启动 </ button >
</body>

一次性定时器

  1. setTimeout（1，2）：只执行一次（类似延迟的效果）

  2. 执行的函数

  3. 间隔（毫秒单位） 

1
2
3
4
5
6
<script>
       function   test(){
                    document.body.style.backgroundColor   =  "red";
       }
       setTimeout(test ,2000);
</script>

每个文档都是一个document对象

document.getElementById（id值)

通过id值，获得唯一对象的

示例：登录验证

document.getElementsByName( name值 )

通过name属性值，获得多个匹配的对象

示例：全选/反选

document.getElementsByTagName(标签名)

通过标签名，获得多个匹配对象

示例：隔行变色

弹出框

  1. alert（提示文字）：提示框
  2. confirm（提示文字）：确认框
  3. prompt（提示文字，默认值）：输入框

修改节点的样式

格式 ： 元素对象.style.css属性名=”属性值”
例如：

  • node.style.color = “red”
  • node.style.fontSize = “10em”

面向对象

  • 类：一系列事务的抽象（提取），什么是人类。

  • 对象：你就是对象。

  • 属性：描述一类事物的名词。

  • 方法：描述一类事物的动词。

创建对象的三种方式

  1. 使用object 

    1
    2
    3
    4
    5
    6
    7
    var  user  =   new   Object();  
    user.name  =  "kobe";   属性赋值  
      user.age    =   40  ;  
      user.say   =  function(){    定义方法
    		alert(this.name);
       }
      user.say();  调用方法

  2. 使用构造 

1
2
3
4
5
6
7
8
function  user(name ,age ){
    this.name  = name;
    this.age  = age;
    
    this.say  = function(){
            alert(this.name);
    }
}
  1. 使用直接量 （JSON对象） 
1
2
3
4
5
6
7
8
var   user = {
    name:"james",
    age:21,
    say:function(){
        alert("你好，我是"+this.name);
    }
}
user.say();

JSON对象

  1. json对象
1
2
3
4
5
6
var    j     =   {
          "name": "yangxin",
          "age": 19
};
alert(    j.name );
alert(    j.age     );
  1. json数组 
1
2
3
4
5
6
7
8
9
var    j    =    [{
    "name":   "a",
    "age":  20
},{
    "name":   "b",
    "age":  21
}];

alert(    j[0].name    )
赏

   转载规则


《JS》 由 yangxin 采用 知识共享署名 4.0 国际许可协议 进行许可。
 上一篇
第十六天啦 第十六天啦
第十六天啦 今天可就太充实了！今天从到教室开始，就一直在做js特效，没闲着啊，虽然有点累，但是很开心，这才是我想要看到的学习氛围和学习方式。 有几个重要的知识点： var d = new Date(); ​
2019-10-08 yangxin
下一篇 
第十五天啦 第十五天啦
第十五天了 来兄弟会半个月了，终于将系统性的东西学完了，开始进入到专业课程了，今天学js，虽然之前在Java双元班学过一遍，但还是要再巩固再加深一遍印象，毕竟学无止境。 本阶段任务 定时器 选择对象 改css样式 创建对象
2019-10-08 yangxin
  目录