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. python 资源大全 – wetung

    python 资源大全 https://github.com/jobbole/awesome-python-c […]...

  2. hmtl div水平、垂直居中 – 4job

    hmtl div水平、垂直居中 最近写网页经常需要将div在屏幕中居中显示,遂记录下几个常用的方法,都比较简单 […]...

  3. 搭建谷歌浏览器无头模式抓取页面服务,laravel->php->python->docker !!!

     背景: 公司管理系统需要获取企业微信页面的配置参数如企业名、logo、人数等信息并操作,来隐藏相关敏感信息并 […]...

  4. iOS 后台挂起的一些坑 – iRemark

    iOS 后台挂起的一些坑 特别说明:   后台状态:当前app如果不是作为屏幕中的第一层,呈现显示给用户,那么 […]...

  5. JavaWeb网上图书商城完整项目–13.项目所需环境的搭建 – luzhouxiaoshuai

    JavaWeb网上图书商城完整项目–13.项目所需环境的搭建 1、首先安装mysql 创建项目所需 […]...

  6. 引起FileNotFoundException原因通用分析过程 – donjuan

    引起FileNotFoundException原因通用分析过程 有的时候,你在双击一个托管程序,或者使用Ass […]...

  7. –wms–warehouse manage system–概述 – simhare

    –wms–warehouse manage system–概述 ̵ […]...

  8. 什么是位、字节、字 – 雪的心

    什么是位、字节、字 位:”位(bit)”是电子计算机中最小的数据单位。每一位的状态只能 […]...

随机推荐

  1. SQL Server 日期格式和日期操作

    SQL Server发展至今,关于日期的格式的控制方法,有传统的方法,比如CONVERT(),也有比较便利的新 […]...

  2. 2018山东省ACM省赛G题-Game

    Alice and Bob are playing a stone game. There are n pil […]...

  3. android经典开源代码集合

    一、依赖注入DI通过依赖注入减少View、服务、资源简化初始化,事件绑定等重复繁琐工作1. AndroidAn […]...

  4. UGUI:窗口限制以及窗口缩放

    版权申明: 本文原创首发于以下网站: 博客园『优梦创客』的空间:https://www.cnblogs.com […]...

  5. 小程序解决方案 Westore – 组件、纯组件、插件开发 – 【当耐特】

    小程序解决方案 Westore – 组件、纯组件、插件开发 2018-10-08 10:21  【 […]...

  6. 微信小程序开发简述

    微信小程序简述 什么是微信小程序? 微信小程序,简称小程序,英文名Mini Program,是一种不需要下载安 […]...

  7. Worktile 团队协同办公工具 – 季枫

    Worktile是一个团队协同办公工具,通过简单的协作、沟通和分享,实现团队交互与任务管理的轻松协作。工作随身 […]...

  8. 第一周总结

    第一周总结        迷迷糊糊放假已经一个星期了,这星期并没有根据老师所说的那样去学习java,不是自己不 […]...

展开目录

目录导航