JS初学者
这个是在学习过js初级知识之后，对Javascript 知识的各级应用，让大家可以更加熟悉JavaScript中的一些细小的知识的应用。
在小程序中用到了：
1. 循环
2. 函数
3. 对象
4. 封装函数
5. 节流
6. 正则表达式
等，这几个最基本最常用的JavaScript知识，初步应用到实践中去。
下面直接贴已经写完并可以正常运行的窗口程序，并在程序之后作出分步讲解：
一. 程序源代码
<!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>
<script>
function throttle(callback, wait) {
let endTime = 0
return function () {
if (new Date() - endTime < wait) return console.log('您的钱太多了，请稍后再付');;
callback.apply(this, arguments)
endTime = new Date()
}
}
function User(username, password) {
this.username = username
this.password = password
}
function Pet(petname, gender, type, master) {
this.name = petname
this.gender = gender
this.type = type
this.master = master
this.state = 80
this.play = throttle(function () {
console.log(this.name + '做游戏咯~');
this.state += 5
if (this.state > 100) this.state = 100
}, 60000)
this.eat = throttle(function () {
console.log(this.name + '吃东西咯~');
this.state += 10
if (this.state > 100) this.state = 100
}, 120000)
this.introduce = function () {
console.log(`你好，
我是${this.name},
我是只${this.gender === '1' ?'公':'母' }${this.type === '1'? '狗' :'猫'}
我的主人是${this.master},
状态：${this.state}
`)
}
}
function mytrim(str) {
if (!str) {
return ''
} else {
return str.trim()
}
}
let _ = {
trim(str) {
return !str ? '' : str.trim()
}
}
let game = {
currentUser: null,
sensitiveWord: ['cnm', 'qnm', 'sb'],
userlist: [{
username: 'a',
password: '123123'
}],
petList: [{
}],
loginPage() {
console.log('欢迎登录');
let usernameIsOk = true,
passwordIsOk = true
let password = '',
username = ''
do {
username = prompt('请输入用户名：')
if (!username) {
usernameIsOk = false
console.log('用户名不能为空');
} else {
usernameIsOk = true
}
} while (!usernameIsOk);
do {
password = prompt('请输入密码：')
if (!password) {
passwordIsOk = false
console.log('密码不能为空');
} else if (password.length < 6) {
passwordIsOk = false
console.log('密码至少大于6位');
} else {
passwordIsOk = true
}
} while (!passwordIsOk);
let user = this.userlist.find(function (item) {
return item.username === username
})
if (!user) {
console.log('此用户不存在！');
this.loginPage()
} else {
if (user.password !== password) {
console.log('密码错误');
this.loginPage()
} else {
this.currentUser = username
console.log('login success');
this.mainPage()
}
}
},
getPetPage() {
let currentUser = this.currentUser
let hasPet = this.petList.some(function (item) {
return item.master === currentUser
})
if (hasPet) {
console.log('你已有宠物，不能重复领养！');
return this.mainPage()
}
let petnameIsok = true,
typeIsok = true,
genderIsok = true
let petname = ' ',
type = ' ',
gender = ' '
do {
type = mytrim(prompt('请选择宠物类型：1.狗， 2.猫'))
if (!['1', '2'].includes(type)) {
typeIsok = false
console.log('宠物类型不正确')
} else {
typeIsok = true
}
}
while (!typeIsok)
do {
gender = mytrim(prompt('请选择宠物的性别：1.GG， 2.MM'))
if (!['1', '2'].includes(gender)) {
genderIsok = false
console.log('宠物类型不正确')
} else {
genderIsok = true
}
}
while (!genderIsok)
do {
petname = mytrim(prompt('请输入宠物昵称：'))
if (!petname) {
petnameIsok = false
console.log(' n昵称不能为空！');
} else {
let isSensitive = this.sensitiveWord.some(function (item) {
return petname.toUpperCase().includes(item.toUpperCase())
})
if (isSensitive) {
petnameIsok = false
console.log('用户名不合法！');
} else {
petnameIsok = true
}
}
} while (!petnameIsok)
console.log(petname + type + gender);
let pet = new Pet(petname,gender,type,this.currentUser)
this.petList.push(pet)
console.log(this.petList);
this.mainPage()
},
petInfoPage() {
console.log('查看宠物');
let currentUser = this.currentUser
let mypet = this.petList.find(function (item) {
return item.master === currentUser
})
if (!mypet) {
console.log('你还没有宠物');
return this.mainPage()
};
mypet.introduce()
let type = prompt('请选择互动方式： 1.喂食 2.逗TA玩 3.返回主菜单')
switch (type) {
case '1':
mypet.eat()
break;
case '2':
mypet.play()
break;
case '3':
return this.mainPage()
break;
default:
console.log('输入有误，重新操作')
break;
}
arguments.callee.call(this)
},
mainPage() {
let type = prompt('欢迎来到宠物世界，请选择操作： 1.领养宠物 2.查看宠物 3.注销')
switch (type) {
case '1':
this.getPetPage()
break;
case '2':
this.petInfoPage()
break;
case '3':
this.welcomePage()
this.currentUser = null
break;
default:
console.log('输入有误，请重新操作');
this.mainPage()
break;
}
},
registerPage() {
console.log('欢迎注册');
let usernameIsok = true,
passwordIsok = true,
password_cIsok = true
let username, password, password_c
do {
username = mytrim(prompt('欢迎注册，请输入用户名：'))
if (!username) {
usernameIsok = false
console.log('用户名不能为空！');
} else {
let isSensitive = this.sensitiveWord.some(function (item) {
return username.toUpperCase().includes(item.toUpperCase())
})
if (isSensitive) {
usernameIsok = false
console.log('用户名不合法！');
} else {
let isRepeat = this.userlist.some(function (item) {
return item.username === username
})
if (isRepeat) {
usernameIsok = false
console.log('用户名已存在');
} else {
usernameIsok = true
}
}
}
}
while (!usernameIsok);
do {
password = mytrim(prompt('欢迎注册，请输密码：'))
if (!password) {
passwordIsok = false
console.log('用户名不能为空！');
} else if (password.length < 6 || password.length > 12) {
console.log('请输入6- 12位的密码');
passwordIsok = false
} else {
console.log('注册成功');
passwordIsok = true
}
} while (!passwordIsok);
do {
password_c = prompt('欢迎注册，请再次输密码：')
password_c = mytrim(password_c)
if (password_c !== password) {
password_cIsok = false
console.log('两次密码输入不一致！');
} else {
password_cIsok = true
}
} while (!password_cIsok) {
};
console.log('注册成功，' + username + '您的密码是：' + password);
let newUser = {
username,
password
}
this.userlist.push(newUser)
console.log('当前已注册用户', this.userlist)
this.welcomePage()
},
welcomePage() {
let type = prompt('欢迎，请选择： 1.登录 2.注册 3.退出')
switch (type) {
case '1':
this.loginPage()
break;
case '2':
this.registerPage()
break;
case '3':
console.log('退出成功，欢迎再来！');
break;
default:
console.log('输入有误，请重新操作');
break;
arguments.callee.call()
}
}
}
game.welcomePage()
</script>
</body>
</html>
相关知识
js密码强度实时验证代码
JS === 实现回到顶部
js移动方块
初学者如何学习宠物美容
html初学者入门教程
初学者怎么学习宠物美容
如何在家养宠物？初学者指南
初学者怎么骑马 如何学会基本骑乘
5种最适合初学者的水族宠物推荐
JS移动端浏览器取消右划后退的几种方法
网址: JS初学者 https://m.mcbbbk.com/newsview480625.html
| 上一篇: 选对不选贵，宠物梳子大合集 |
下一篇: 华为手机电子宠物机如何钓鱼 |
