JavaScript从入门到入门（五）

最新推荐文章于 2021-03-09 20:18:24 发布

xk_005

最新推荐文章于 2021-03-09 20:18:24 发布

阅读量227

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xiaokan_001/article/details/105505083

版权

JavaScript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第三章 JavaScript常用内置对象

01.JavaScript数组常用属性与方法

1.1 数组定义

数组（Array）是一组数据的集合，使用单独的变量名来存储一系列的值，JavaScript中数组其实是一个对象变量，它保存了数组对象的引用地址，因此，数组的定义和初始化与变量相似。JS创建数组有多种方法。

1>单纯创建数组
var a = new Array()
2>创建数组的同时规定数组大小
var a = new Array(3)   //创建一个长度为4的数组
3>直接初始化
var a = new Array("aa","bb","cc")
4>字面量，就是直接初始化数组
var a = ["aa","bb","cc"]

二维数组是在以为数组基础上定义的，即当以为数组的元素又都是以为数组时，就形成了二维数组。

var b = new Array();
b[0] = [];
b[1] = ["aa","bb","cc"]
b[2] = ["dd","ee","ff"]
//等价于
var b = new Array(
    new Array(),
    new Array("aa","bb","cc"),
    new Array("dd","ee","ff")
    )
//等价于
var b = [[],["aa","bb","cc"],["dd","ee","ff"]];

1.2 数组常用属性与方法

数组属性
数组Array只有一个属性，就是length，length表示的是数组所占内存空间的数目。而不仅仅是数组中元素的个数，改变数组的长度可以扩展或者截取所占内存空间的数目。

语法
myarray.length; //获得数组myarray的长度

注意：因为数组的索引总是由0开始，所以一个数组的上下限分别是：0和length-1，且JavaScript数组的length属性是可变的，数组随元素的增加，长度也会改变

数组方法

方法名称	意义	示例
toString()	把数组转换成一个字符串	var s=a1.toString() 结果s为a,b,c
join(分隔符)	把数组转换成一个用符号连接的字符串	var s=a1.join("+") 结果s为a+b+c
shift()	将数组头部的第一个元素移出	var s=a1.shift() 结果s为a
unshift()	在数组的头部插入一个元素	a1.unshift(“m”,“n”) 结果a1中为m,n,a,b,c
pop()	从数组尾部删除一个元素，返回移除的项	var s=a1.pop() 结果s为c
push()	把一个元素添加到数组的尾部，返回修改后数组的长度	var s=a1.push(“m”,“n”)结果a1为a,b,c,m,n同时s为5
concat()	合并数组	a1.concat(a2) 结果a1为数组a,b,c,y,x,z
slice()	返回数组的部分	var s=a1.slice (1,3) 结果s为b,c
splice()	插入、删除或者替换一个数组元素	a1.splice(1,2)结果a1为a
sort()	对数组进行排序操作（默认按字母升序）	a2.sort()结果为 x,y,z
reverse()	将数组反向排序	a2. reverse()结果为z,y, x

示例数组为

var a1=new Array("a","b","c");
var a2=new Array("y "," x ","z");

1.3 定时器函数

JavaScript定时器有以下两个方法，分别是setInterval()和setTimeout()

setInterval()方法。按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。用法如下。

setInterval() ("调用函数","周期性执行或调用code之间的时间间隔")，
function hello(){ alert("hello"); } 
//重复执行某个方法： 
var t1= window.setInterval("hello()",3000);
去掉定时器的方法 
 window.clearInterval(t1);

setTimeout()方法。在指定的毫秒数后调用函数或计算表达式。setTimeout()函数用法如下。

setTimeout("调用函数","在执行代码前需等待的毫秒数。")
var t=setTimeout(function(){alert("Hello")},3000)  //只执行一次，3 秒后显示一个弹窗
// 实现循环调用需要把setTimeout定时器函数写在被调用函数里面。如下：
function show(){  
alert("Hello");
var myTime = setTimeout("show()",1000);
}
关闭定时器的用法：clearTimeout(myTime);   //myTime为setTimeout()函数返回的定时器对象。

1.4 动态时钟

用JavaScript编写一个动态时钟。

<html>
    <head>
        <meta charset="utf-8">
        <title>正在运行的时钟</title>
        <style type="text/css">
            /*设置样式：无边框的文本框*/
            input,
            #clock {
                width: 390;
                font-size: 30px;
                font-weight: 900;
                color: #FFFFFF;
                background-color: #930;
                border: 8px double #900;
 
            }
        </style>
 
    </head>
    <body onLoad="disptime( ) ">
        <form name="myform">
            <input name="myclock" type="text" value="" size="20">
        </form>
        <span id="clock"></span>
 
        <script language="JavaScript">
            function disptime() {
                var time = new Date(); //获得当前时间
                var year = time.getFullYear(); //获得年月日
                var month = time.getMonth(); //获得年月日
                var date = time.getDate(); //获得年月日
                var hour = time.getHours(); //获得小时、分钟、秒
                var minute = time.getMinutes();
                var second = time.getSeconds();
                if (minute < 10) //如果分钟只有1位，补0显示
                    minute = "0" + minute;
                if (second < 10) //如果秒数只有1位，补0显示
                    second = "0" + second;
                /*设置文本框的内容为当前时间*/
                document.getElementById('clock').innerHTML = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" +
                    second
                document.myform.myclock.value = year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second
                /*设置定时器每隔1秒（1000毫秒），调用函数disptime()执行，刷新时钟显示*/
                var myTime = setTimeout("disptime()", 1000);
 
            }
        </script>
    </body>
</html>

效果如图：
在这里插入图片描述

后续持续更新……
原创不易，如果觉得不错，就点个赞吧！

xk_005

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
JavaScript从入门到入门（五）

第三章 JavaScript常用内置对象01.常用属性与方法1.1 JavaScript数组1.1.1 数组定义数组（Array）是一组数据的集合，使用单独的变量名来存储一系列的值，JavaScript中数组其实是一个对象变量，它保存了数组对象的引用地址，因此，数组的定义和初始化与变量相似。JS创建数组有多种方法。1>单纯创建数组var a = new Array()2>...
复制链接

扫一扫

专栏目录