hooyantsing's Blog

第56次课程

字数统计: 1.1k阅读时长: 5 min
2019/09/10

源辰74班

第56次课程

09.10.2019

内容

JS内置核心语言对象[廖彦]

1.创建对象

01.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 创建对象
     console 控制台输出 -->
    <script>
    //创建对象方式一
    var o = new Object();
    //动态添加属性
    o.phone = "13800001111";
    
    for(var s in o){
       //console 控制台
       //console.log(); 在控制台以日志的方式输出对象内容
       //for in 循环对象时,s表示 对象属性名
       //o[s] 输出属性值,例如 o.name ===  ["name"]
       console.log(s + ":" + o[s]);
    }
    console.log("================");
    
    o.name = "张三";
    o.age = 12;
    o.sex = "男";
    
    for(var s in o){
       console.log(s + ":" + o[s]);
    }
    
    //创建对象方式二
    var o1 = {name:"李四",age:12}     // ==  new Object()
    o1.idcard = "430403xxxxxxx";
    //.log 和 .info 显示等级不同
    console.info(o1);
    
    </script>
</body>
</html>

2.定时器 字体(加粗、加大字号、斜体)

02.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 定时器 -->
    <script>
    function test(){}
    
    var s = "张三;男;13;13800001111";
    var arr = s.split(";");
    
    var person = {};
    person.name = arr[0];
    person.sex = arr[1];
    person.age = parseInt(arr[2]);
    person.phone = arr[3];
    
    console.info(person);
    
    //setTimeout("test()",2000); //设置指定方法在X毫秒后执行
    //setTnterval("test()",1000); //设置指定方法连续不断的以X毫秒间隔执行
    </script>
    
    <div>
       <script type="text/javascript">
       var txt1 = "由于链接众多,错误之处在所难免";
       var txt2 = "希望各位用户指正";
       var txt3 = "由此带来的一切后果,本人概不负责";
       
       document.write(txt1.bold()); //加粗
       document.write(txt2.big()); //加大字号
       document.write(txt3.italics());  //斜体
       </script>
    </div>
</body>
</html>

3.字符串截取

368e06ff2487ef20058fb79632088e1d.png

03.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="dtxt"></div>
    <script>
       var txt = "由于链接众多,错误之处在所难免,希望各位用户指正。由此带来的一切后果,本人概不负责。";
       var index = 0;
       function run(){
           //substring截取字符 从第几个到第几个 不填写则到最后
           var txt0 =  txt.substring(0,index);
           //获取单个字符
           var txt1 = txt.charAt(index);
           var txt2 =  txt.substring(index+1);
           
           txt1 =  txt1.bold().big().fontcolor("red");;
           txtAll = txt0 + txt1 + txt2;
           // 每一个id 都是一个dom对象
           //innerHTML 将字符串添加到HTML字符串中
           dtxt.innerHTML = txtAll;
           index++;
           
           if(index>=txt.length){
               index = 0;
           }
           //设置下次运行时间
           setTimeout("run()",50);
       }
       
       run();
    </script>
</body>
</html>

4.[案例]跑马灯

1.数组创建的四种方式

2.字符数组.join 将字符数组 拼接成 字符串

3.

字符数组.shift() 弹出第一个位置的元素

字符数组.push(“a”) 追加一个元素,并放入最后的位置

PaoMaDeng.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="dtxt"></div>
    <script type="text/javascript">
       var txt = "由于链接众多,错误之处在所难免,希望各位用户指正。由此带来的一切后果,本人概不负责。";
       
       function runBase(){
           var txt1 = txt.substr(0,1);
           var txt2 = txt.substring(1);
           txt = txt2 + txt1;
           
           dtxt.innerHTML = txt;
           
           setTimeout("runBase()",220);
       }
       
       //将字符串转成 字符数组
       var txtarr = [];
       for(var i=0;i<txt.length;i++){
           txtarr.push(txt.charAt(i));
       }
       
       function runArr(){
           var arr = new Array();//创建长度为0的数组
           var arr = new Array(10);  //创建长度为10的数组
           var arr = [];         //创建长度为0的数组
           var arr = [1,2,3,4];  //创建指定内容数组
           
           //js 数组没有越界
           //arr[10] === undefined;
           //arr[10] = "12"; //设置数组元素
           
           //.join 将字符数组 拼接成 字符串
           //var arrstr = arr.join(":");
           
           //.shift() 弹出第一个位置的元素
           //.push("a") 追加一个元素,并放入最后的位置
           //思想:弹出第一个字符,放到数组最后,反复
           var txt1 = txtarr.shift();
           txtarr.push(txt1);
           txt = txtarr.join("");
           
           dtxt.innerHTML = txt;
           
           //设置下一次运行时间
           setTimeout("runArr()",220);
           
       }
       //普通跑马灯
       runBase();
       //数组实现跑马灯
       runArr();
       
    </script>
</body>
</html>
CATALOG