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. Web基础知识 – micemik

    Web基础知识 未解问题  ??? 哪些 html 元素包含 href 属性 ???      CSS相关 选 […]...

  2. 【微信开发】【Asp.net MVC】– 微信分享功能 – stoneniqiu

    【微信开发】【Asp.net MVC】– 微信分享功能 2017-01-15 09:09  sto […]...

  3. Firefox优化 – 沧海浪

    在地址栏输入“about:config”这里简单介绍一下推荐做的几个优化的地方:1、加入一个boolean(布 […]...

  4. Java课程设计 ssm电影售票选座管理系统 电影网站的网页设计与制作mysql – IT跃迁谷

    Java课程设计 ssm电影售票选座管理系统 电影网站的网页设计与制作mysql 注意:此项目只截图部分功能, […]...

  5. 顶级英文学习资源 – 弦月摘星

    顶级英文学习资源   关于语法: 1.http://www.pass-e.com/sort.php?sorti […]...

  6. PyCharm 社区版创建Django项目的一个方法 – 大蛇Python

    PyCharm 社区版创建Django项目的一个方法 PyCharm 社区版创建项目无法选择Django等项目 […]...

  7. 概率论复习笔记(1 – 12)

    01 样本空间与随机事件 略 没必要 02 事件的关系和运算:      对偶律值得注意一下 03 概率的定义 […]...

  8. 安装Office 2016 出现 Office 16 Click-to-Run Extensibility Component – 范兵

    安装Office 2016 出现 Office 16 Click-to-Run Extensibility C […]...

随机推荐

  1. 如何做好SQLite 使用质量检测,让事故消灭在摇篮里

    本文由云+社区发表 SQLite 在移动端开发中广泛使用,其使用质量直接影响到产品的体验。 常见的 SQLit […]...

  2. C#使用cplex求解简单线性规划问题(Cplex系列-教程二)

    若还未在项目中添加cplex的引用,可以参阅上一篇文章。本文主要介绍利用C#求解线性规划的步骤,对线性规划模型 […]...

  3. 3月22日

    1.source folder源文件夹理解,source folder就是classpath,source f […]...

  4. 008:奥运奖牌计数

      总时间限制:  1000ms   内存限制:  65536kB 描述 2008年北京奥运会,A国的运动员参 […]...

  5. 使用hexo+GitHub搭建个人博客的心得(含教程)

    Author Email Yaoyao Liu yaoyaoliu@msn.com 前言 对于广大CS专业的学 […]...

  6. buuctf-misc-[BJDCTF 2nd]圣火昭昭-y1ng 1

       开局一张图片,flag全靠猜,那这个是不是和outguess工具有关呢?于是我们显示查看了图片的详细信息 […]...

  7. Windows、mac字体安装教程

    请问字体如何安装? Win7、8、10安装字体方法: http://jingyan.baidu.com/art […]...

  8. 第4周题目.高斯的日记

    每周一题之4   本周题目是蓝桥杯第四届省赛AB组第一题(填空题),请评论的同学除了给出答案,还要给出你的思路 […]...

展开目录

目录导航