day15-JavaScript 字符串操作及跑马灯
一、引子
今天我们就来说说Javascript的字符串操作，以及跑马灯的示例，这个场景我们经常用到，所以好好研究一下。
二、定义变量
1、定义局部变量
说明：99%的情况下，都是定义的局部变量。定义局部变量：var 变量名="值"
|
1
|
>>var name = "zhangqigao" //定义局部变量 |
2、定义全局变量
说明：这个情况下，一般不能乱定义，只有确定下来之后才能定义。 定义全局变量： 变量名="值"
|
1
|
>>name = "zhangqigao" //定义全局变量 |
JavaScript中变量的声明是一个非常容易出错的点，局部变量必须一个 var 开头，如果未使用var，则默认表示声明的是全局变量。
|
1
2
3
4
5
6
7
8
9
10
|
// 全局变量name = 'seven'; function func(){ // 局部变量 var age = 18; // 全局变量 gender = "男" } |
三、数字和字符串数据类型
3.1、数字类型
说明：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
|
1
2
3
|
<script> var age=18 //定义数字类型的变量</script> |
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
|
1
2
3
4
5
6
|
>>age='18'"18">>parseInt(age)18>>parseFloat(age)18 |
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
|
1
2
3
4
|
>>isNaN('18')false>>isNaN("dbjdw")true |
更多数值计算：
1 常量 2 3 Math.E 4 常量e，自然对数的底数。 5 6 Math.LN10 7 10的自然对数。 8 9 Math.LN2 10 2的自然对数。 11 12 Math.LOG10E 13 以10为底的e的对数。 14 15 Math.LOG2E 16 以2为底的e的对数。 17 18 Math.PI 19 常量figs/U03C0.gif。 20 21 Math.SQRT1_2 22 2的平方根除以1。 23 24 Math.SQRT2 25 2的平方根。 26 27 静态函数 28 29 Math.abs( ) 30 计算绝对值。 31 32 Math.acos( ) 33 计算反余弦值。 34 35 Math.asin( ) 36 计算反正弦值。 37 38 Math.atan( ) 39 计算反正切值。 40 41 Math.atan2( ) 42 计算从X轴到一个点的角度。 43 44 Math.ceil( ) 45 对一个数上舍入。 46 47 Math.cos( ) 48 计算余弦值。 49 50 Math.exp( ) 51 计算e的指数。 52 53 Math.floor( ) 54 对一个数下舍人。 55 56 Math.log( ) 57 计算自然对数。 58 59 Math.max( ) 60 返回两个数中较大的一个。 61 62 Math.min( ) 63 返回两个数中较小的一个。 64 65 Math.pow( ) 66 计算xy。 67 68 Math.random( ) 69 计算一个随机数。 70 71 Math.round( ) 72 舍入为最接近的整数。 73 74 Math.sin( ) 75 计算正弦值。 76 77 Math.sqrt( ) 78 计算平方根。 79 80 Math.tan( ) 81 计算正切值。
3.2、字符串
说明：JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
|
1
2
3
|
<script> var age=18 //定义数字类型的变量</script> |
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
|
1
2
3
4
5
6
|
>>age='18'"18">>parseInt(age)18>>parseFloat(age)18 |
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
|
1
2
3
4
|
>>isNaN('18')false>>isNaN("dbjdw")true |
更多数值计算：
Math3.2、字符串
说明：字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
常见功能：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
obj.charAt(n) 返回字符串中的第n个字符obj.length 长度obj.substring(from, to) 根据索引获取子序列obj.trim() 移除两边空白obj.trimLeft() 移除左边空白obj.trimRight() 移除右边空白obj.concat(value, ...) 拼接obj.indexOf(substring,start) 子序列位置obj.lastIndexOf(substring,start) 子序列位置obj.slice(start, end) 切片obj.toLowerCase() 小写obj.toUpperCase() 大写obj.split(delimiter, limit) 分割obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， $数字：匹配的第n个组内容； $&：当前匹配的内容； $`：位于匹配子串左侧的文本； $'：位于匹配子串右侧的文本 $$：直接量$符号 |
ps：JS 是驼峰式命名，第二个单词首字母大写。
1、charAt(n)
说明：返回字符串中的第n个字符
1 name="keven" 2 "keven" 3 name.charAt(1) 4 "e"
2、substring(from ,to)
说明：根据索引获取子序列，顾头不顾尾 类似python 类表的切片
1 name="chenkeven" 2 "chenkeven" 3 name.substring(1,5) 4 "henk"
3、lenght
说明：获取字符串的长度，相当于python len
1 name 2 "chenkeven" 3 4 name.length 5 9
4、trim() ,trimLeft(), trimRight()
说明：移除字符串两边的空白,相当于python 的strip()
1 name=" keven " 2 " keven " 3 name.trim() 4 "keven" 5 name= " keven" 6 " keven" 7 name.trimLeft() 8 "keven" 9 name="keven " 10 "keven " 11 name.trimRight() 12 "keven"
5、concat
说明：拼接字符串
1 a ="a" 2 "a" 3 b="b" 4 "b" 5 c="c" 6 "c" 7 a.concat(b,c) 8 "abc"
6、indexof(substring,strar)
说明：类似index
1 name="chenkeven" 2 "chenkeven" 3 name.indexOf("k") 4 4
7、slice(start,end)
说明：切片，遵循顾头不顾尾原则
1 name 2 "chenkeven" 3 name.slice(1,6) 4 "henke"
8、toLowerCase()
说明：变成小写
1 name="KEVENCHEN" 2 "KEVENCHEN" 3 name.toLowerCase() 4 "kevenchen"
9、toUpperCase()
说明：变成大写
1 name="keven" 2 "keven" 3 name.toUpperCase() 4 "KEVEN"
10、split(delimiter,limit)
说明：分割，delimiter：分割符，limit：拿前几个值
name="wo,shi,hen,niu,bi,de" "wo,shi,hen,niu,bi,de" name "wo,shi,hen,niu,bi,de" name.split(",",3) ["wo", "shi", "hen"] name.split(",",2) ["wo", "shi"] name.split(",",4) ["wo", "shi", "hen", "niu"]
四、定时器
4.1、定时器
说明：我们每隔多长时间执行一下某个程序，我们成为定时任务，setInterval("定时任务名"，间隔时间)，时间是以ms为单位的。
|
1
2
3
4
5
6
|
<script> function f1(){ //定义一个函数f1 console.log(1); //会在浏览器console控制台输出日志 } setInterval("f1()",1000); //每隔1秒执行一下f1()函数</script> |
如图：
五、跑马灯的栗子
我们用上面的知识，来写一个跑马灯示例，这个我们经常会用到，特别我们在某个网站上看到欢迎***来莅临指导，然后这个字返回出现，那这个是怎么做的呐？我们就来写一个。
搞栗子开始：
1、利用字符串获取标签内容，及重现赋值。
2、利用定时器循环这个 操作
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div id="i1">热了欢迎牛逼人物莅临指导</div> 9 10 <script> 11 function func(){ 12 // 获取指定标签内容 13 var tag = document.getElementById("i1"); 14 // 获取标签内的内容 15 var content= tag.innerText; 16 17 var f= content.charAt(0); 18 var l =content.substring(1,content.length); 19 20 var new_content = l +f; 21 22 tag.innerText = new_content; 23 24 } 25 setInterval('func();',1000) 26 </script> 27 28 </body> 29 </html>
浙公网安备 33010602011771号