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>

posted on
2018-05-18 09:33 
勺子惜白 
阅读(116
评论(0
编辑 
收藏 
举报

 

版权声明:本文为wangchongzhangdan原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://www.cnblogs.com/wangchongzhangdan/p/9409638.html

JavaScript(1):实现跑马灯小程序 - 勺子惜白的更多相关文章

  1. 增量式 PID 控制算法 温度控制实例 – cvi670

    增量式 PID 控制算法 温度控制实例 1 #include<reg51.h> 2 #includ […]...

  2. Mysql 数据库 操作语句 – 小面团

    Mysql 数据库 操作语句 Mysql 数据库 操作语句 mysql 格式语句规范如何登陆你的数据库?举例! […]...

  3. vue中使用vue-pdf插件显示pdf – 世界之魂

    vue中使用vue-pdf插件显示pdf 最近项目需求需要在vue中展示pdf,上网搜索了实现方法,找到vue […]...

  4. Linux 纯字符界面的玩法 – 京山游侠

    关于 Linux 字符界面的一些玩法。 Linux 纯字符界面的用途## 装逼必备 省资源,服务器一般不安装图 […]...

  5. 一起学习vue源码 – Object的变化侦测

      作者:小土豆biubiubiu 博客园:www.cnblogs.com/HouJiao/ 掘金:https […]...

  6. 计算机不同的分类 – 极客飞扬

    计算机不同的分类 3 计算机的分类 为了定义什么是计算机,对所有计算设备进行分类是必然的。下面的章节介绍几种不 […]...

  7. Spring3 MVC – 3到Spring MVC框架简介

    Spring3 MVC – 3到Spring MVC框架简介 Spring3 MVC框架简介 Sp […]...

  8. requests库基础使用方法(爬虫模拟登陆的三种方式) = ̄ω ̄= Python爬虫 – O寻_觅O

    requests库基础使用方法(爬虫模拟登陆的三种方式) = ̄ω ̄= Python爬虫 文章目录 reques […]...

随机推荐

  1. 一文读懂信息安全中的恶意代码、病毒、木马、蠕虫……

    一文读懂信息安全中的恶意代码、病毒、木马、蠕虫…… 病毒:破坏计算机功能或数据,以破坏 […]...

  2. Tensorflow训练和预测中的BN层的坑

      以前使用Caffe的时候没注意这个,现在使用预训练模型来动手做时遇到了。在slim中的自带模型中incep […]...

  3. 【自然语言处理篇】–Chatterbot聊天机器人

    一、前述 ChatterBot是一个基于机器学习的聊天机器人引擎,构建在python上,主要特点是可以自可以从 […]...

  4. Python学习笔记整理Module1

    编程语言介绍 Python介绍 Python安装 第一个Python程序 变量 程序交互 格式化输出 数据运算 […]...

  5. 牛顿法与拟牛顿法的故事

    牛顿法与拟牛顿法的故事 真的很想吐槽一下李航老师<统计学习方法>后面的附录,看的我是云头雾里,上网 […]...

  6. ChromeExtension那些事儿

    ChromeExtension那些事儿 2017-12-22 00:21 by 猴子猿, … 阅读 […]...

  7. Redis学习笔记(十二) 复制(上)

    偷个懒,晚上工作忙的太晚,整个复制功能的内容还没有写完,这里先说一下复制功能的简单应用。 在Redis中,用户 […]...

  8. 关于windows10 会自动更新Nvdia的显卡驱动问题

    最近,发现了一例用的Nvdia GT730(理论上GT6xx和GT7xx都有此问题),出现了使用官网最新版本的 […]...

展开目录

目录导航