bluemsun第四周预习(JS对象和小游戏）

最新推荐文章于 2024-04-24 17:55:29 发布

lemdry

最新推荐文章于 2024-04-24 17:55:29 发布

阅读量290

点赞数 3

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/lemdry/article/details/137605092

版权

本文详细介绍了JavaScript中对象的三种创建方式：字面量、newObject和构造函数，并展示了如何调用属性和方法，以及JavaScript的内置对象如Math和Date的使用。最后，通过一个猜数字游戏实例展示了这些概念的实际应用。

摘要由CSDN通过智能技术生成

JS对象（Object）

创建对象的三种方式

1.利用字面量创建对象

2.利用 new Object 创建对象

3.利用构造函数创建对象

利用字面量创建对象

var star ={

 name: ' L ',

 age : 18,

 sex : '男’，

}

对象里面属性的调用： 对象.属性名 其中还存在另一种】属性 对象['属性名‘]

方法的调用： 对象.方法名()

console.log(star.name)     //调用名字属性
console.log(star['name'])   //第二种调用方法
star.sayHi();     //调用方法

变量：单独声明赋值，需要单独存在
函数单独存在，通过函数名()的方式就可以调用，方法，对象里面的函数称为方法，使用”对象.方法名()"方式可以调用

利用 new Object 创建对象

var www = new Object();
www.name= '  ' ;
www.asyHi = function(){
   alert('大家好');
}

使用格式：对象.属性 = 值

利用构造函数创建对象

构造函数首字母需要大写，并和new一起使用

function Person(name,age,sex)
{
this.name = LLL;
this.sayHi = function(){
alert('名字'+ this.name )
}
var bigbai = new Person('LYM');
var smallbai = new Person ('XXZ');
console.log(bigbai.name);
console.log(smallbai.name);

注意：

首字母大写；函数内的属性和方法前面需要添加this,表示当前属性和办法；不需要return返回结果，用new来调用构造函数

遍历对象属性

使用for...in语句对于数组或者对象的属性进行循环操作

内置对象

JavaScript 提供了多个内置对象：Math、 Date 、Array、String等

例

Math对象

概述

Math.PI   //圆周率
Math.abs   //绝对值

随机数方法

andom() 方法可以随机返回一个小数，其取值范围是 [0，1)，左闭右开 0 <= x < 1
得到一个两数之间的随机整数，包括两个数在内

Date 概述

var now = new Date();
console.log(now);

同时可以进行日期格式化

一个猜数字的小游戏

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>猜数字游戏</title>  
    <style>  
        body {  
            font-family: Arial, sans-serif;  
            text-align: center;  
            padding-top: 50px;  
        }  
        #guess {  
            width: 100px;  
        }  
    </style>  
</head>  
<body>  
    <h1>猜数字游戏</h1>  
    <p>请猜一个1到100之间的数字：</p>  
    <input type="number" id="guess" min="1" max="100">  
    <button onclick="checkGuess()">猜</button>  
    <p id="result"></p>  
  
    <script>  
        let randomNumber = Math.floor(Math.random() * 100) + 1;  
        let guesses = 0;  
  
        function checkGuess() {  
            guesses++;  
            let userGuess = parseInt(document.getElementById('guess').value);  
  
            if (userGuess < randomNumber) {  
                document.getElementById('result').textContent = `猜小了！再试一次。你已经猜了 ${guesses} 次。`;  
            } else if (userGuess > randomNumber) {  
                document.getElementById('result').textContent = `猜大了！再试一次。你已经猜了 ${guesses} 次。`;  
            } else {  
                document.getElementById('result').textContent = `恭喜你，猜对了！数字是 ${randomNumber}。你总共猜了 ${guesses} 次。`;  
                // 重置游戏  
                randomNumber = Math.floor(Math.random() * 100) + 1;  
                guesses = 0;  
                document.getElementById('guess').value = '';  
            }  
        }  
    </script>  
</body>  
</html>