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. Http请求中Content-Type讲解以及在Spring MVC中的应用 – a-dou

    Http请求中Content-Type讲解以及在Spring MVC中的应用 引言: 在Http请求中,我们每 […]...

  2. 分组求最大值,最小值 使用开窗函数经验总结 – 陈力

    select distinct TT.prod_id, tt.creteTime, tt.inspection […]...

  3. C 语言实例 – 判断三个数中的最大数。

    通过屏幕我们输入三个数字,并找出最大的数。 #include <stdio.h>int main( […]...

  4. 大学四年私藏的实用工具/学习网站我贡献出来了 – 程序猿小涛子

    大学四年私藏的实用工具/学习网站我贡献出来了 一、PDF搜索网站推荐 对于大部分程序员来说,电子书的需求量还是 […]...

  5. excel 组及分级显示制作教程 – 季枫

    1、思路:利用“组及分级显示”功能,将每一个项目作为“摘要行”,将需要被“收起”或“展开”的内容,也就是项目所 […]...

  6. iPhone应用中如何避免内存泄露? – 风言枫语

    iPhone应用中如何避免内存泄露? 如何有效控制iPhone内存管理的对象的所有权与引用计数和以及iPhon […]...

  7. Unity 3D学习心得,程序员开发心得分享! – Chinar

    Unity 3D学习心得,程序员开发心得分享! Unity开发之路 本文提供全流程,中文翻译。 Chinar […]...

  8. 两种方法帮你去掉DEDECMS去掉导航链接index.html – ushaapp

    两种方法帮你去掉DEDECMS去掉导航链接index.html 两种方法帮你去掉DEDECMS去掉导航链接in […]...

随机推荐

  1. c# 委托详解

    1.委托声明       2.委托入门实例   namespace ConsoleApplication1 { […]...

  2. Jmeter高级应用之性能监控插件PertMon Metrics Collector 部署安装详解

    我们对被测应用进行性能测试时,除了关注吞吐量、响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情 […]...

  3. emWin监护仪界面设计,含uCOS-III和FreeRTOS两个版本

    第5期:监护仪界面设计 配套例子:V6-908_STemWin提高篇实验_监护仪界面设计(uCOS-III)V […]...

  4. 百度音乐盒完成

    package com.itheima.baidumusic; import java.util.Timer; […]...

  5. Regression 回归——多项式回归

      回归是指拟合函数的模型、图像等。与分类不同,回归一般是在函数可微的情况下进行的。因为分类它就那么几类,如果 […]...

  6. Vue技术点整理-Vue Router

    路由 Vue Router 对于单页面应用来说,如果涉及到多个页面的话,就必须要使用到路由,一般使用官方支持的 […]...

  7. 布隆过滤器总结

    一:布隆过滤器:Bloom Filter是一种空间效率很高的随机数据结构,它利用位数组很简洁地表示一个集合,并 […]...

  8. 最牛逼的自媒体平台今日头条申请秘籍,包过!

    微商没有了粉丝?辛辛苦苦加过来的人,没有成交,或者要花费很大精力才能成交?   你是否做过这样的事?写了一篇文 […]...

展开目录

目录导航