fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【资源帖】Javascript对象入门
/*
对象直接量
* */
var stu = {
name:'王海庆',
age:18,
sayHello:function(){
console.log('hello');
},
introduct:function(){
console.log(`大家好，我是${this.name},今年${this.age}岁！`);
}
}
stu.sayHello();
stu.introduct();
/*
构造函数和原型
* */
var Student = function(name,age){
this.name = name;
this.age = age;
}
Student.prototype.tall = 180;
Student.prototype.sayHello = function(){
//console.log("你好，我是"+this.name+"，我身高有"+this.tall+"呢");
console.log(`你好,我是${this.name},我身高有${this.tall}呢?`);
}
var stu = new Student('王海庆',18);
stu.sayHello();
delete stu.tall;
for(n in stu){
console.log(n);
}
/*
继承
* */
//父类
var Person = function(name,age){
this.name = name;
this.age = age;
}
Person.prototype.tall = 18;
//子类
var Student = function(){};
Student.prototype = Person.prototype;
Student.prototype.constructor = Student;
//子类扩展
Student.prototype.listen = function(){
console.log("I am listenning!");
}
//使用子类
var stu = new Student('whq',18);
console.log(stu.tall);
stu.listen();
//es6
class Student{
constructor(name,age){
this.name = name;
this.age = age;
}
sayHello(str){
console.log(this.name + str);
}
}
var stu = new Student('whq',18);
stu.sayHello(' hello');
<!--运行机制版-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-color: #11113f;
color: white;
font-family: 'Petit Formal Script', cursive;
overflow: hidden;
}
.title {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 0;
font-size: 1.6em;
}
.snow{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
position: fixed;
left: 100px;
top: 300px;
opacity: 0.3;
filter:blur(4px);
z-index:3;
/*
随机大小、位置、透明度、模糊程度、速度 、z-index 属性
飘动 方法
* */
}
</style>
</head>
<body>
<div class="title">
<h1>Happy Holidays</h1>
</div>
<div class="snow"></div>
<script type="text/javascript">
var snow = document.querySelector(".snow");
var y = 0;
var x = Math.random()*window.innerWidth;
snow.style.left = x+'px';
function run () {
y+=10;
if(y>window.innerHeight+10){
y = 0;
}
snow.style.top = y+"px";
setTimeout(run,100);
}
run();
</script>
</body>
</html>
<!--
未完成版
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: #11113f;
color: white;
font-family: 'Petit Formal Script', cursive;
overflow: hidden;
}
.title {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 0;
font-size: 1.6em;
}
.snow {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
position: fixed;
left: 100px;
top: 300px;
opacity: 0.3;
filter: blur(4px);
z-index: 3;
/*
随机大小、位置、透明度、模糊程度、速度 、z-index 属性
飘动 方法
* */
}
</style>
</head>
<body>
<div class="title">
<h1>Happy Holidays</h1>
</div>
<script type="text/javascript">
//常用方法
function random(min, max, isInt) {
var a = min + Math.random() * (max - min);
return isInt ? parseInt(a) : a;
}
var winW = window.innerWidth;
var winH = window.innerHeight;
class Snow {
//构造方法
constructor() {
this.size = random(8, 20, true);
this.alpha = random(0.2, 1, false);
this.blur = random(0, 2, false);
this.x = random(0, winW, true);
this.y = random(-winH / 2, 0, true);
this.z = random(1, 20, true);
this.speed = random(2, 10, false);
this.angle = 0;
this.angleSpeed = random(0, 2 * Math.PI, false) / 100;
this.o = null;
}
//绘制雪花
draw() {
//document createElement
this.o = document.createElement("div");
this.o.className = "snow";
document.body.appendChild(this.o);
this.o.style.width = this.o.style.height = this.size + "px";
this.o.style.opacity = this.blur;
this.o.style.filter = `blur(${this.blur}px)`;
this.o.style.left = this.x + "px";
this.o.style.top = this.y + "px";
}
//飘落雪花
update() {
this.angle += this.angleSpeed;
this.x += Math.cos(this.angle);
this.y += this.speed;
this.o.style.top = this.y + "px";
this.o.style.left = this.x + "px";
if(this.y > winH + 10) {
this.y = random(-winH / 2, 0, true);
}
}
}
var snow = new Snow();
snow.draw();
window.setInterval(function() {
snow.update();
}, 100)
/*
下雪的案例面向对象分析
雪花
属性 大小 透明度 模糊程度 初始位置x 初始位置y z轴序号
方法 构造方法 飘落
天气
属性 雪量 风量 风向
方法 生成雪花 雪花运动
场景
属性 宽 高 是否折回
方法 重新设置场景属性
* */
</script>
</body>
</html>
<!--基本完成版-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
background-color: #11113f;
color: white;
font-family: 'Petit Formal Script', cursive;
overflow: hidden;
}
.title {
position: absolute;
text-align: center;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
z-index: 10;
font-size: 1.6em;
}
.snow {
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 100%;
position: fixed;
left: 100px;
top: 300px;
opacity: 0.3;
filter: blur(4px);
z-index: 3;
/*
随机大小、位置、透明度、模糊程度、速度 、z-index 属性
飘动 方法
* */
}
</style>
</head>
<body>
<div class="title">
<h1>Happy Holidays</h1>
</div>
<script type="text/javascript">
//常用方法
function random(min, max, isInt) {
var a = min + Math.random() * (max - min);
return isInt ? parseInt(a) : a;
}
var winW = window.innerWidth;
var winH = window.innerHeight;
var snow;
class Snow {
//构造方法
constructor() {
this.size = random(8, 20, true);
this.alpha = random(0.2, 1, false);
this.blur = random(0, 2, false);
this.x = random(0, winW, true);
this.y = random(-winH / 2, 0, true);
this.z = random(1, 20, true);
this.speed = random(1, 3, false);
this.angle = 0;
this.angleSpeed = random(0, 2 * Math.PI, false) / 100;
this.o = null;
}
//绘制雪花
draw() {
//document createElement
this.o = document.createElement("div");
this.o.className = "snow";
document.body.appendChild(this.o);
this.o.style.width = this.o.style.height = this.size + "px";
this.o.style.opacity = this.blur;
this.o.style.filter = `blur(${this.blur}px)`;
this.o.style.left = this.x + "px";
this.o.style.top = this.y + "px";
}
//飘落雪花
update() {
this.angle += this.angleSpeed;
this.x += Math.cos(this.angle);
this.y += this.speed;
this.o.style.top = this.y + "px";
this.o.style.left = this.x + "px";
if(this.y > winH + 10) {
this.y = random(-winH / 2, 0, true);
}
}
}
class Weather {
constructor(snowNum, wind) {
this.snowNum = snowNum;
this.wind = wind;
this.snowArray = [];
}
createSnow() {
for(var i = 0; i < this.snowNum; i++) {
snow = new Snow();
snow.draw();
this.snowArray.push(snow);
}
}
runSnow() {
var that = this;
function run () {
for(var i = 0; i < that.snowNum; i++) {
that.snowArray[i].update();
}
window.requestAnimationFrame(run);
}
window.requestAnimationFrame(run);
}
}
var weather = new Weather(100, 3);
weather.createSnow();
weather.runSnow();
/*
下雪的案例面向对象分析
雪花
属性 大小 透明度 模糊程度 初始位置x 初始位置y z轴序号
方法 构造方法 飘落
天气
属性 雪量 风量 风向
方法 生成雪花 雪花运动
场景
属性 宽 高 是否折回
方法 重新设置场景属性
* */
</script>
</body>
</html>