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

有三种定义方法:

  1. var s = new String('字符串内容');
  2. var s = String('字符串内容');
  3. 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

数学对象常用属性有:

  1. PI  :圆周率
  2. E:常量e,近似于2.71828
  3. LN2:2的自然对数
  4. LN10:10的自然对数
  5. LOG2E:以2为底的e的对数
  6. 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>

 

posted @ 2018-11-20 22:30  龙~白  阅读(144)  评论(0编辑  收藏  举报