0
0

javascript-对象（Math、日期（方法、定时器））

认识对象
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        1、通过new运算符声明对象
        2、通过省略new
        3、对象常量赋值 （使用大括号，代表对象）

        对象属性 普通变量
        对象方法  普通函数
        婚后      婚前
        */
       var obj1 = new Object();
       var obj2 = Object();
       var obj3 ={};

       //新增属性 使用起来和普通的变量没有任何区别
       obj3.username = '钢铁侠';
       obj3.age = 18;alert(obj3.username);

       //新增方法 使用起来和普通的函数没有任何区别
       obj3.show = function(){alert("我的名字叫" + obj3.username + ",今年"+obj3.age + "岁");}
       obj3.show();
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
       var obj1 = new Object();
       var obj2 = Object();
       var obj3 ={};

       //通过对象常量赋值
       var obj3  ={username: "炎清欢",
           "age": 18,
           show: function(){alert("我的名字叫" + obj3.username + ",今年"+obj3.age + "岁");}};alert(obj3.username);
       obj3.show();
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
请添加图片描述

<script>
        //面向对象的编程思想
        var car ={speed:60,
            run: function(road){
                return road.length / car.speed;}};

        var bridge ={
            length = 1000
        };
        var hours = car.run(bridge);alert("一共花了" + hours.toFixed(2) + "小时");
    </script>

Math对象的方法

        Math.random() //返回0~1之间的随机数
        Math.max(num1, num2)//返回较大的数
        Math.min(num1, num2)//返回较小的数
        Math.abs(num) //绝对值
        Math.round()  //四舍五入（成整数，只看小数点后一位）
        Math.ceil(num) //向上取整
        Math.floor(num) //向下取整
        Math.pow(x,y) //x的y次方
        Math.sqrt(num) //开平方

        传入的参数是： 弧度
        Math.sin()   //正弦
        Math.cos()   //余弦

        Math.PI = 180弧度
        1弧度 = Math.PI / 180;

举个例子

    <script>
        alert(Math.max(10,20,30,40));  //40
        alert(Math.min(10,20,30,40));  //10
        alert(Math.abs(-10));          //10
        alert(Math.round(3.49));       //3
        alert(Math.ceil(3.1));         //4
        alert(Math.floor(3.9));        //3
        alert(Math.pow(2,4));          //16
        alert(Math.sqrt(9));           //3
        alert(Math.sin(30 * Math.PI / 180));
    </script>

请添加图片描述
日期对象

     日期对象说明
        1、没有传入参数，默认当前系统时间
        Wed Oct 05 2022 09:06:49 GMT+0800(中国标准时间)
        GMT格林尼治时间
        2、传入参数
        "2000-01-01""2000/01/01"
        按照顺序，分别传入参数 年 月 日 时 分 秒 毫秒
        【注】在国外月份是从0开始数的 0~11
        直接传入毫秒数  1秒= 1000毫秒
        （已1970年1月1日 0:0:0 为参照时间点去进行换算）

举个例子

    <script>
        var d = new Date();
        var d1 = new Date("2000-01-01");
        var d2 = new Date("2000/01/01");
        var d3 = new Date(2000 , 0 , 1 , 8 , 30 , 50);
        var d4 = new Date(1000);alert(d);
        //Sat Feb 05 2022 16:57:42 GMT+0800 (中国标准时间)alert(d1);
        //Sat Jan 01 2000 08:00:00 GMT+0800 (中国标准时间)alert(d2);
        //Sat Jan 01 2000 00:00:00 GMT+0800 (中国标准时间)alert(d3);
        //Sat Jan 01 2000 08:30:50 GMT+0800 (中国标准时间)alert(d4);
        //Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)
    </script>

日期对象的方法
请添加图片描述
举个例子

    <script>
        var d = new Date();alert(d.toLocaleDateString() + " " + d.toLocaleTimeString());
    </script>

请添加图片描述
请添加图片描述
举个例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function showTime(){
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth() + 1;//0~11
            var date = d.getDate();

            var week = d.getDay(); //0~6 0是周日
            week = numOfChinese(week);

            var hour = doubleNum(d.getHours());
            var min = doubleNum(d.getMinutes());
            var sec = doubleNum(d.getSeconds());

            var str = year + "年" + month + "月" + date + "日 星期" + week + " " + hour + ":" + min + ":" + sec;
            return str;}//数字转成中文
        function numOfChinese(num){
            var arr = ["日","一","二","三","四","五","六"];
            return arr[num];}function doubleNum(n){if(n < 10){
                return "0" + n;}else{
                return n;}}
        document.write(showTime());
    </script>
</head>
<body>
    
</body>
</html>

请添加图片描述
日期对象的练习

        [注] 所有的参照时间点都是1970年
        Date.parse()
        格式：Date.parse(日期对象)
        功能：可以将日期对象转换成毫秒数

        d.getTime()/d.setTime();
        格式：日期对象.getTime/setTime
        功能：将当前日期对象转换成毫秒数

    <script>
        var d = new Date();alert(d);
        //Sat Feb 05 2022 17:37:46 GMT+0800 (中国标准时间)alert(Date.parse(d));
        //1644053866000
        alert(d.getTime());
        //1644053866500
    </script>

练习
获取两个日期之间相差的天数
规定,传入日期格式
“2000_01_01”;或者
“2000/01/01”

<script>
        function countOfDate(d1, d2){
            var dd1 = new Date(d1);
            var dd2 = new Date(d2);
            var time1 = dd1.getTime();
            var time2 = dd2.getTime();
            var time = Math.abs(time1 - time2);
            return parseInt(time / 1000 / 3600 / 24);}alert(countOfDate("2008-08-08","2019-10-09"));
    </script>

请添加图片描述
输入n，输出n天后的时间

<script>
        function afterOfDate(n){
            var d = new Date();
            var day = d.getDate();
            d.setDate(day + n);
            return d;}alert(afterOfDate(3));
    </script>

请添加图片描述
定时器
前言：

        定时器
        格式: var timer = setInterval(函数,毫秒数);功能:每隔对应的毫秒数，执行一次传入的函数
        返回值:启动定时器的,系统分配的编号
        clearInterval(timer);//取消定时器

       一般情况下，将没有名字的函数叫做匿名 函数
        var timer = setInterval(匿名函数,毫秒数);
        var timer = setInterval(function(){
            执行代码;}, 毫秒数);

举个列子

    <script>
        var i = 0;
        function show(){if(i == 5){clearInterval(timer);}
            document.write(i++ +"<br/>");}
        var timer = setInterval(show, 1000);
    </script>

等价于

    <script>
        var i = 0;
        var timer = setInterval(function(){if(i == 5){clearInterval(timer);}
            document.write(i++ +"<br/>");}, 1000);
    </script>

效果
请添加图片描述
下面做一个定时器
首先
定时器.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1{width: 600px;height: 100px;text-align: center;line-height: 100px;margin: 100px auto;border: 1px solid black;font-size: 30px;}</style>
    <script src = 'tooltwo.js'></script>
    <script>
        setInterval(function(){

            var oDiv = document.getElementById("div1");
            oDiv.innerHTML = showTime();}, 1000);
    </script>
</head>
<body>
    <div id = 'div1'>显示当前时间</div>
</body>
</html>

tooltwo.js

function showTime(){
    var d = new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;//0~11
    var date = d.getDate();

    var week = d.getDay(); //0~6 0是周日
    week = numOfChinese(week);

    var hour = doubleNum(d.getHours());
    var min = doubleNum(d.getMinutes());
    var sec = doubleNum(d.getSeconds());

    var str = year + "年" + month + "月" + date + "日 星期" + week + " " + hour + ":" + min + ":" + sec;
    return str;}//数字转成中文
function numOfChinese(num){
    var arr = ["日","一","二","三","四","五","六"];
    return arr[num];}function doubleNum(n){if(n < 10){
        return "0" + n;}else{
        return n;}}
//document.write(showTime());

效果（是动态的）
请添加图片描述

标签： javascript 开发语言 ecmascript
本文转载自: https://blog.csdn.net/weixin_46048542/article/details/122790343
版权归原作者 九阈 所有， 如有侵权，请联系我们删除。
登录后发布评论

“javascript-对象（Math、日期（方法、定时器））”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航