JavaScript（1）：实现跑马灯小程序

JavaScript（1）：实现跑马灯小程序 - 勺子惜白

wangchongzhangdan 2021-08-08 原文

JavaScript（1）：实现跑马灯小程序

1.JavaScript是独立的语言，浏览器具有JS解释器

2.JavaScript代码存在形式：

——head中

<scrip>
        //JavaScript代码
        alert(123);
</scrip>

<scrip type="text/javascript">
        //JavaScript代码
        alert(123);
</scrip>

——文件

<script src="js文件路径"></script>

——body中

JS代码需要放置在<body>标签的最下方，才是最好的

3.JS注释

单行注释：//

多行注释：/* */

4.变量

python：

name="alex"

JavaScript：

name="alex"  //全局变量
var name="alex"    //局部变量

5.写JS代码

-HTML文件中编写

-临时，浏览器的终端（console）

6.JS基本数据类型

（1）数字

JavaScript中不区分整数和浮点数，其所有数字均用浮点数表示

parseInt(…) 将某值转换成数字，不成功则NaN

parseFloat(…) 将某值转换成浮点数，不成功则NaN

特殊值：

NaN：非数字，可使用isNaN(num)来判断

Infinity：无穷大，可食用isFinite(num)来判断

a=18

（2）字符串

a="alex"
a.charAt(索引位置)     //获取索引位置字符
a.substring(起始位置，结束位置)    //获取起始至结束位置的所有字符，起始<=...<结束
a.length        //获取当前字符串长度

（3）数组

a=[11,22,33]

（4）布尔类型

a=true
b=false  //注意是小写

（5）字典

a={"k1":67,"k2":"v2"}

（6）Null

（7）Undefined

7.console面板输出函数：

console.log("你很美")

8.定时器setInterval

setInterval("func()",1000);   //每1000毫秒执行一次func()函数

9.跑马灯程序实现

!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跑马灯程序实现</title>
</head>
<body>
    <h1 id="first">欢迎大神莅临指导</h1>
    <script type="text/javascript">
        function horse_light() {
            var tag = document.getElementById("first");
//            用tag获取id为first的整个标签
            var content = tag.innerText;
//            获取标签的内部内容
            var head_str = content.charAt(0);
//            获取内容的首字符
            var rest_str =content.substring(1,content.length);
//            获取剩余的所有字符
            var new_content = rest_str + head_str;
//            组成新的字符串
            tag.innerText = new_content;
//            只有通过tag才可以作用到id="first"的<h1>标签
        }
        setInterval("horse_light()",500)
    </script>
</body>
</html>