JavaScript对象

<style>
    * {
        margin: 0;
        padding: 0;
    }

    p {
        font-size: 30px;
        color: red;
        font-weight: bolder;
    }

    .div {
        width: 200px;
        height: 30px;
        border: 2px dashed rebeccapurple;
    }

    #progressBar {
        height: 30px;
        background-color: red;
    }

    #box5 {
        width: 300px;
        height: 150px;
        background-color: pink;
        border: 10px skyblue inset;
    }
</style>

<body>
    <div>
        <div id="time">00时00分00秒</div>
        <button id="btn1">开始计时</button>
        <button id="btn2">结束计时</button>
    </div>


    <p>进度条</p>
    <div class="div">
        <div id="progressBar"></div>
    </div>
    <span id="info">0%</span>


    <div id="time2">00天00时00分00秒00毫秒</div>

    <div id="box5">我是一条广告<span id="s">5</span>后关闭</div>

    <script>
 
 
        // 练习:
        // 1, 显示当前时间(显示格式: 2016年 11月 11日 11时 11分 11秒)
        var date = new Date()
        var y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var h = date.getHours()
        var minute = date.getMinutes()
        var s = date.getSeconds()
        var ms = date.getMilliseconds()
        var day = date.getDay()
        console.log(`y年{m}月d日{h}时minute分{s}秒ms毫秒星期{day}`);

        // 2, 判断两个日期相差的天数(可先求毫秒数差, 再转换成天)
        var date1 = new Date()
        var date2 = new Date('2000/12/10')
        var number = Math.floor(Math.abs(date1 - date2) / 1000 / 60 / 60 / 24)
        console.log(number);

        // 3, 根据getDate()和setDate()， 封装一个函数afterDate(date, n)，得到日期date的n天后的日期
        function afterDate1(date, n) {
            date.setDate(date.getDate() + n)
            return date
        }
        console.log(afterDate1(new Date(), 20))




        //     练习:
        //     1, 创建一个人的对象, 添加属性: 姓名 年龄 爱好 薪资期望, 并有一个打印自身信息的方法, 可以输出自身信息;
        var obj = {
            name: '张三',
            age: 18,
            like: 'money',
            money: '￥15000',
            message: function () {
                console.log(`姓名：this.name年龄：{this.age}  爱好：this.like薪资期望：{this.money}`);
            }
        };
        obj.message()

        //     2, 创建一个锤子对象hammer, 有属性: 宽, 高, 重; 方法: 可以锤钉子
        var hammer = new Object()
        hammer.width = 50 + 'px'
        hammer.height = 200 + 'px'
        hammer.weight = 20 + "斤"
        hammer.method = function () { console.log('可以锤钉子'); }
        console.log(hammer);
        hammer.method()

        //     3, 有一辆50km / h车, 跑在一条1000km路上，问多少小时跑完？
        //     对象:  
        // 车Car 属性: 速度speed 50km / h
        //     功能: 跑在路上runOnRoad(Road)
        // 路Road 属性: 长度length 1000km
        var Road = {
            length: 1000
        }
        var Car = {
            speed: 50,
            runOnRoad: function (Road) {
                console.log("跑在路上" + parseInt(Road.length / Car.speed) + "小时跑完");
            },
        }
        Car.runOnRoad(Road)



        // 1, 计算2019年11月11日 11时 11分 11秒 距离当前日期的时间差, 并以指定的格式
        //     (天 / 时 / 分 / 秒)的形式显示.
        function time(time) {
            var beforeTime = new Date(time)
            var nowTime = new Date()
            var differTime = Math.abs(nowTime - beforeTime)
            var d = parseInt(differTime / 1000 / 60 / 60 / 24)
            var h = parseInt(differTime / 1000 / 60 / 60 % 24)
            var minute = parseInt(differTime / 1000 / 60 % 60)
            var s = parseInt(differTime / 1000 % 60)
            var ms = parseInt(differTime % 1000)
            console.log(`距离当前日期的时间差:  num(d)天{num(h)} 时 num(minute)分{num(s)}秒 ${ms}毫秒`);
        }
        function num(num) {
            if (num < 10) {
                return "0" + num
            } else { return num }
        }
        time(new Date('2019/8/2 11:11:11'))

        // 2, 实现秒表功能, 包含时, 分, 秒, 毫秒，点击按钮1开始计时，点击按钮2结束计时
        function fn(num) {
            if (num < 10) {
                return "0" + num
            } else { return num }
        }
        var time = document.getElementById("time")
        var id;
        function start() {
            var date = new Date("2022/8/2/ 00:00:00")
            id = setInterval(function () {
                var hours = date.getHours()
                var minutes = date.getMinutes()
                var seconds = date.getSeconds()
                var mins = date.getMilliseconds()
                time.innerText = `fn(hours)时{fn(minutes)}分fn(seconds)秒{fn(mins)}毫秒`
                date.setMilliseconds(mins + 1)
            }, 1)
        }
        function end() {
            clearInterval(id)
        }
        document.getElementById("btn1").onclick = start
        document.getElementById("btn2").onclick = end

        // 3, 使用定时器实现进度条,
        //     提示: 获取标签对象, 并改变style属性的width值
        // var proBar = document.getElementById("progressBar");
        // proBar.style.width = barW + "px";
        var proBar = document.getElementById("progressBar");
        var info = document.getElementById('info');
        var barW = 0
        var inter = setInterval(function () {
            barW += 2
            proBar.style.width = barW + "px"
            info.innerText = barW / 2 + "%"
            if (barW == 200) {
                clearInterval(inter)
            }
        }, 200)


        // 4, 倒计时，  给定一个未来的日期，计算和当前时间的差值，并倒计时， 当倒计时为0时， 弹出提示框“活动结束”
        var time2 = document.getElementById("time2")
        var futureTime = new Date('2022/8/5 18:00:00')
        function fn(number) {
            if (number < 10) {
                return number = "0" + number
            } else {
                return number
            }
        }
        var inter1 = setInterval(function () {
            var nowTime = new Date()
            var differTime = Math.abs(nowTime - futureTime)
            var d = parseInt(differTime / 1000 / 60 / 60 / 24)
            var h = parseInt(differTime / 1000 / 60 / 60 % 24)
            var m = parseInt(differTime / 1000 / 60 % 60)
            var s = parseInt(differTime / 1000 % 60)
            var ms = parseInt(differTime % 1000)
            time2.innerText = `fn(d)天{fn(h)}时fn(m)分{fn(s)}秒${fn(ms)}毫秒`

            if (nowTime >= futureTime) {
                clearInterval(inter)
                alert("活动结束")
            }

        }, 1)


        // 5, 广告窗口自动关闭, 倒计时5秒后关闭窗口(分别使用定时器和延时器)
        var box5 = document.getElementById("box5")
        var s = document.getElementById("s")
        var i = 5
        var inter5 = setInterval(function () {
            i--
            s.innerText = i
            if (i == 0) {
                box5.style.display = "none"
                clearInterval(inter5)
            }
        }, 1000)




        // 对象作业:
        // 找出下面题目中的对象, 以及对象的属性和方法, 并实现相应的功能
        // 1. 有2个学生，每个学生有3门课的成绩，（包括学生号，姓名，3门课成绩, 语文, 数学, 英语），计算出平均成绩.
        var students = {
            student1: {
                studentNo: "1",
                name: "张三",
                grade: [100, 99, 99],
                aver: function (grade) {
                    var sum = 0
                    for (var index in grade) {
                        sum += grade[index]
                    }
                    return (sum / students.student1.grade.length).toFixed(2)
                }
            },
            student2: {
                studentNo: "2",
                name: "李四",
                grade: [89, 79, 89],
                aver: function (grade) {
                    var sum = 0
                    for (var index in grade) {
                        sum += grade[index]
                    }
                    return (sum / students.student2.grade.length).toFixed(2)
                }
            }

        }
        console.log(students.student1, students.student2)
        console.log(students.student1.aver([100, 99, 99]), students.student2.aver([89, 79, 89]));

        // 2. Mountain: 从前有座山, 山里有座庙; 还有name, height(高度)
        // Temple: 庙里有个老和尚, 有个小和尚, 还有name, area(面积)
        // Monk: 和尚能挑水, 讲故事, 化缘; 还有name, age, sex
        var Mountain = {
            name: "小山",
            temple: Temple,
            height: 200 + "米"
        }
        var Temple = {
            name: "庙",
            Monks: [oddMonk, yongMonk],
            area: `100 平方米`
        }

        var oddMonk = {
            name: "老和尚",
            age: 80,
            sex: "男",
            able: function () {
                console.log(`能挑水, 讲故事, 化缘`);
            }
        }
        var yongMonk = {
            name: "小和尚",
            age: 13,
            sex: "男",
            able: function() {
                console.log(`能挑水, 化缘`);
            }
        }
        console.log(Mountain, Temple ,oddMonk,yongMonk);
        oddMonk.able()
        yongMonk.able()
        // 3. 定义一圆Cirlcle对象, 包含半径r和圆心, 圆心为“点”Point对象, point对象有x和y属性，构造一圆，该圆可以计算周长和面积; 计算该原的周长和面积 ?
        var cirlcle = {
            r : 100,
            centerPoint : {
                x : 100 ,
                y : 100
            }
        }
        cirlcle.area = Math.round(Math.PI*Math.pow(cirlcle.r,2))
        cirlcle.perimeter =Math.round( 2*Math.PI*cirlcle.r)
        console.log(cirlcle.area,cirlcle.perimeter);

    </script>
posted @   苏沐~  阅读(83)  评论(0)  编辑  收藏  举报
相关博文：
·  JavaScript_DOM小练习
·  JavaScript运算符与逻辑分支
·  javascript倒计时
·  js进度条
·  Js 之时间倒计时
阅读排行：
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 上周热点回顾（3.3-3.9）
点击右上角即可分享
微信分享提示
AI IDE Trae