JavaScript详解（二）

js的流程控制

if语句：

if (条件表达式A){

        xx;

}else if (条件表达式B){

        xx;

}

else{

    xx;

}

switch语句：

switch （表达式){

    case 值1:

        xxx;

        break;

     case 值2:

        xxx;

        break;

    default: //所有case都不满足时执行

        xxx;

}

for语句：

for(初始化语句;循环判断语句;循环执行语句){

    xxx;

}

while语句：

while(循环判断语句){

 xxx;

}

do....while语句：

do{

    xxx;

}while(循环判断语句);

JavaScript的本地对象

字符型对象String

有三种定义方法：

var s = new String('字符串内容');
var s = String('字符串内容');
var s = '字符串内容';

字符串的属性length可以返回其长度，可通过索引返回指定位置字符，通过+拼接。

数字转字符串：nub.tostring()

字符串转数字：Number(str)

字符串对象常用方法：

str.substring(start,end):截取字符串，如果只传一个参数，则默认截取到最后一个为止。左闭右开。
str.slice(start,end):切片，左闭右开，r若两个参数为负数，必须保证abs(start)>abs(end)。
str.split("?"):切割，按照指定参数进行切割，返回一个数组。
str.indexOf("?"):查找并返回匹配字符串出现的位置，若没找到，返回-1.
str.toUpperCase():全部转换成大写。
str.toLowerCase():全部转换成小写。
str.Replace("a","b"):用b替换字符串中的a，只能替换一个。

日期对象Date

定义一个日期对象：var date = new Date();返回的格式如下：

Tue Nov 20 2018 21:22:41 GMT+0800 (中国标准时间)

获取方法：

date.getFullYear():返回年份
date.getMonth():返回月份，月份为实际月份减一，即十二月为0.
date.getDate():返回日期
date.getHours():返回当前小时
date.getMinutes():返回当前几分
date.getSeconds():返回当前多少秒
date.getDay():返回周期，周日为0.

设置方法：将date换成set将变成对应的设置方法，但没有设置秒，设置年份为四位数字、设置月份范围为0~11、小时为0~23。

还可以以时间戳设置时间，单位是毫秒：date.setTime().

转换方法：原本时间格式是Tue Nov 20 2018 21:42:05 GMT+0800 (中国标准时间)

date.toString(): Tue Nov 20 2018 21:43:55 GMT+0800 (中国标准时间)
date.toTimeString(): 21:43:55 GMT+0800 (中国标准时间)
date.toDateString(): Tue Nov 20 2018
date.toLocaleString(): 2018/11/20 下午9:43:55
date.toLocaleTimeString(): 下午9:43:55
date.toLocaleDateString(): 2018/11/20

数学对象Math

数学对象常用属性有：

PI ：圆周率
E：常量e，近似于2.71828
LN2：2的自然对数
LN10：10的自然对数
LOG2E：以2为底的e的对数
LOG10E：以10为底的e的对数

数学对象常用方法：

Math.abs():取绝对值
Math.ceil():往上取整
Math.floor():往下取整
Math.round():四舍五入取整
Math.max():返回所有参数中的最大值
Math.pow(x,y):返回x的y次幂
Math.sqrt():返回参数的平方根
Math.random():随即返回一个0~1的数

定时器

创建一个定时器有三种方式：

第一种使用setTimeout方法，这个定时器只执行一次。

timer = setTimeout(function(){

        //执行语句

},1000);  //timer是创建的一个定时器对象，1000是间隔时间，单位是毫秒

第二种使用setInterval方法，这种定时器可以一直执行下去。

timer = setInterval(function (){

        //执行语句

},1000);

第三种也是用setInterval方法，但他是配合另外的函数使用。

setInterval(函数名,1000);

消除定时器

clearInterval(定时器对象);
clearTimeout(定时器对象);

定时器小例子：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定时器</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        div.content{

            height:150px;

            margin-top:50px;

            text-align: center;

        }

        .time{

            color:red;

            font-weight: bolder;

            font-size:19px;

        }

        .end_time{

            color:purple;

            font-size: 21px;

            /*margin-top:65px;*/

        }

        #clock{

            text-align: center;

        }

    </style>

</head>

<body>

<div class="content">敌军还有<span class="time" second="5">5</span>秒到达战场</div>

<div id="clock"></div>

<script>

    otime = document.getElementsByClassName("time");

    ocontent = document.getElementsByClassName("content");

    oclock = document.getElementById("clock");

    var nub = otime[0].getAttribute("second");

    // alert(nub);

    timer = setInterval(function(){

        nub--;

        otime[0].innerHTML = nub;

        if (nub === 0){

            ocontent[0].innerHTML = "<p class='end_time'>全军出击!!!</p>";

            clearInterval(timer);

        }

    },1000);

    function fn() {

        var data = new Date;

        var year  =data.getFullYear();

        var mon = data.getMonth()+1;

        var day = data.getDate();

        var hour = data.getHours();

        var minute = data.getMinutes();

        var second = data.getSeconds();

        if (minute<10){

            minute = "0" + minute;

        }

        if (hour<10){

            hour = "0" + hour;

        }

        if (second<10){

            second = "0" + second;

        }

        oclock.innerHTML =  year + "年" + mon + "月" + day + "日" + hour + "时" + minute + "分" + second + "秒";

    }

    fn();

    setInterval(fn,1000);

</script>

</body>

</html>

巴特西

JavaScript详解（二）

js的流程控制

JavaScript的本地对象

定时器

定时器小例子：

最新文章

热门文章