JavaScript--操作BOM对象(二)

2301_77287584

541人浏览 · 2025-09-26 14:42:17

2301_77287584 · 2025-09-26 14:42:17 发布

JavaScript–操作BOM对象(二)

文章目录

JavaScript--操作BOM对象(二)

1.JavaScript内置对象

1.1Array对象

用于在单独的变量名中存储一系列的值

1.2String对象

用于支持对字符串的处理

1.3Math对象

用于执行常用的数学任务，它包含了若千个数字常量和函数

常用方法

方法	说明
ceil()	对数进行上舍入
floor()	对数进行下舍入
round()	把数四舍五入为最接近的数
random()	返回0~1之间的随机数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math对象</title>
</head>
<body>
    
</body>
<script>
    //对数进行上舍入
    document.write("数字进行上舍入："+Math.ceil(8.1)+"<br/>");//9
    //对数进行下舍入
    document.write("数字进行下舍入："+Math.floor(8.1)+"<br/>");//8
    //对数进行四舍五入
    document.write("数字进行四舍五入："+Math.round(8.1)+"<br/>");//8
    //返回0~1之间的随机数
    document.write("返回0~1之间的随机数："+Math.random()+"<br/>");
    //随机数2~99
    var num=Math.floor(Math.random()*98+2);
    alert("随机数"+num);
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Math对象</title>
</head>
<body>
    颜色：<button onclick="color()" id="color">选择颜色</button><br/>
</body>
<script>
    function color(){
        var c=Array("蓝色","红色","黄色","绿色","黑色","白色","紫色","灰色","橙色","青色");
        var num=Math.floor(Math.random()*10);
        document.getElementById("color").innerHTML=c[num];
    }
</script>
</html>

1.4Date对象

用于操作日期和时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date对象</title>
</head>
<body>
    
</body>
<script>
    var today=new Date();
    alert(today);
    var tdate=new Date("july 25,2025,07:25:00");
    alert(tdate);
</script>
</html>

常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值介于1～31之间
getDay()	返回 Date 对象的星期中的每一天，其值介于0～6之间
getHours()	返回 Date 对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0～59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date对象</title>
</head>
<body>
    <div id="myclock"></div>
</body>
<script>
    //制作时钟特效
    function getTime(){
        var today=new Date();
        //获取小时
        var hh=today.getHours();
        //获取分钟
        var mm=today.getMinutes();
        //获取秒
        var ss=today.getSeconds();
        document.getElementById("myclock").innerHTML="现在是"+hh+"时"+mm+"分"+ss+"秒";
    }
    getTime();
</script>
</html>

2.定时器

事件名	说明
setTimeout(“调用的函数”，等待的毫秒数）	指定时间后调用函数一次
clearTimeout(setTimeOut()返回的ID值)	清除一次性定时器
setlnterval"调用的函数"，间隔的毫秒数）	每隔指定时间周期性调用函数
clearlnterval(setlnterval()返回的ID值)	清除循环定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Date对象</title>
</head>
<body>
    <div id="myclock"></div>
    <button onclick="stop()">暂 停</button>
    <button onclick="start()">开 始</button>
</body>
<script>
    //制作时钟特效
    function getTime(){
        var today=new Date();
        //获取年份
        var yy=today.getFullYear();
        //获取月份
        var month=today.getMonth()+1;
        //获取日期
        var dd=today.getDate();
        //获取小时
        var hh=today.getHours();
        //获取分钟
        var minutes=today.getMinutes();
        //获取秒
        var ss=today.getSeconds();
        document.getElementById("myclock").innerHTML="现在是"+yy+"年"+month+"月"
            +dd+"日 "+hh+":"+minutes+":"+ss;
    }
    //设置定时器
    //var t= setInterval("getTime()",3000);
    //清除定时器
    //clearTimeout(t);

    //每隔1秒调用一次getTime()
     var time=setInterval("getTime()",1000);
       function stop(){ 
        //清除定时器
        clearInterval(time);
    }
    function start(){
        time=setInterval("getTime()",1000);
    }  
</script>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p>你好，欢迎访问贵美商城！</p>
    <div id="myclick"></div>
</body>
<script>
//制作显示年、月、日、星期几，并且显示上午（AM）和下午（PM）的十二进制的时钟
    function getTime(){ 
        var date = new Date();
        if(date.getHours()>12){
            document.getElementById("myclick").innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日  "+
            (date.getHours()-12)+":"+date.getMinutes()+":"+date.getSeconds()+" PM    "+
            "星期"+"日一二三四五六".charAt(date.getDay());
        }else{
            document.getElementById("myclick").innerHTML = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日  "+
            date.getHours()+":"+date.getMinutes()+":"+date.getSeconds()+"   AM "+
            "星期"+"日一二三四五六".charAt(date.getDay());
        }
       
    }
    setInterval("getTime()",1000);
</script>
</html>