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. 解决方案:ppt打不开,显示发现文件中的内容有问题。可尝试修复此演示文稿 – 白杨-M

    解决方案:ppt打不开,显示发现文件中的内容有问题。可尝试修复此演示文稿  ppt打不开,显示发现文件中的内容 […]...

  2. JDK和Tomcat环境变量,以及用MyEclipse新建Web Project测试Tomcat Server – 老坛酸菜WH

    JDK和Tomcat环境变量,以及用MyEclipse新建Web Project测试Tomcat Server […]...

  3. Unity3D学习之路 – C#学习笔记(一)

      最近开始学习Unity开发,由于以前一直都是从事C/C++开发,所以对于Unity的脚本语言方面,选择了最 […]...

  4. 系统学习 Java IO —- 目录,概览

    Java IO 系统教程,原创。主要参考自英文教程 Java IO Tutorial 和 Java Doc。 […]...

  5. TouchPad应用更新:通过Siri控制Mac和PC – java环境变量

    TouchPad应用更新:通过Siri控制Mac和PC 2011-11-30 17:17  java环境变量  […]...

  6. 如何提高程序员的键盘使用效率 – T,T

    如何提高程序员的键盘使用效率 1.要使用科学的指法,十只手指都应该有各自的作用,下面是我在网上找到的正确的手指 […]...

  7. (笔记)电路设计(二)之串联匹配电阻的应用 – tdyizhen1314

    (笔记)电路设计(二)之串联匹配电阻的应用   背景:为统筹电路设计较全面的知识点,本人将在近期推出电路设计中 […]...

  8. 对接https数据(3des加密) – 懒得起名了

    对接https数据(3des加密) private void checkThread() { Urls url […]...

随机推荐

  1. 高仿富途牛牛-组件化(二)-磁力吸附

    目录 一、概述 二、效果展示 三、磁力吸附 1、限制鼠标区域 2、修正窗口可以移动的区域 3、获取最邻近的可被 […]...

  2. JDK 定时任务 Timer 与 ScheduledExecutorService 排坑记录

    正在认真敲代码的楼主,突然收到数据维护系统发过来的报警邮件说楼主凌晨跑的定时任务没有成功,于是便开始了楼主今天 […]...

  3. Spark Rdd coalesce()方法和repartition()方法

    在Spark的Rdd中,Rdd是分区的。 有时候需要重新设置Rdd的分区数量,比如Rdd的分区中,Rdd分区比 […]...

  4. 在项目中随手把haseMap改成了currenHaseMap差点被公司给开除了。

    在项目中随手把haseMap改成了currenHaseMap差点被公司给开除了。 前言 在项目中随手把hase […]...

  5. 各种浏览器hack

    Hack是针对不同的浏览器去写不同的CSS样式,从而让各浏览器能达到一致的渲染效果,那么针对不同的浏览器写不同 […]...

  6. 如何将 Windows Server 2012 r2 打造成 Windows 8.1?

    【重新整理】   Server 系列相对于桌面系统Windows 8.1 、嵌入式系统Embedded 8.1 […]...

  7. java中的数据加密

    记录 一、java中的数据加密 Java提供的安全模型和API 加密基础知识 使用JAVA实现加密 二、Jav […]...

  8. 视频六大编辑软件大比拼

    1、会声会影   会声会影软件目前推出了9.0版本,这又增加了许多新功能,也为广大DV爱好者提供了一款优秀的视 […]...

展开目录

目录导航