这个是在学习过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 = 0return function () {if (new Date() - endTime < wait) return console.log('您的钱太多了,请稍后再付');;callback.apply(this, arguments)endTime = new Date()}}function User(username, password) {this.username = usernamethis.password = password}function Pet(petname, gender, type, master) {this.name = petnamethis.gender = genderthis.type = typethis.master = masterthis.state = 80this.play = throttle(function () {console.log(this.name + '做游戏咯~');this.state += 5if (this.state > 100) this.state = 100}, 60000)this.eat = throttle(function () {console.log(this.name + '吃东西咯~');this.state += 10if (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 = truelet password = '',username = ''do {username = prompt('请输入用户名:')if (!username) {usernameIsOk = falseconsole.log('用户名不能为空');} else {usernameIsOk = true}} while (!usernameIsOk);do {password = prompt('请输入密码:')if (!password) {passwordIsOk = falseconsole.log('密码不能为空');} else if (password.length < 6) {passwordIsOk = falseconsole.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 = usernameconsole.log('login success');this.mainPage()}}},getPetPage() {let currentUser = this.currentUserlet hasPet = this.petList.some(function (item) {return item.master === currentUser})if (hasPet) {console.log('你已有宠物,不能重复领养!');return this.mainPage()}let petnameIsok = true,typeIsok = true,genderIsok = truelet petname = ' ',type = ' ',gender = ' 'do {type = mytrim(prompt('请选择宠物类型:1.狗, 2.猫'))if (!['1', '2'].includes(type)) {typeIsok = falseconsole.log('宠物类型不正确')} else {typeIsok = true}}while (!typeIsok)do {gender = mytrim(prompt('请选择宠物的性别:1.GG, 2.MM'))if (!['1', '2'].includes(gender)) {genderIsok = falseconsole.log('宠物类型不正确')} else {genderIsok = true}}while (!genderIsok)do {petname = mytrim(prompt('请输入宠物昵称:'))//username = mytrim(username) //调用mytrim函数if (!petname) {petnameIsok = falseconsole.log(' n昵称不能为空!');} else {let isSensitive = this.sensitiveWord.some(function (item) {return petname.toUpperCase().includes(item.toUpperCase())})if (isSensitive) {petnameIsok = falseconsole.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.currentUserlet 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 = nullbreak;default:console.log('输入有误,请重新操作');this.mainPage()break;}},registerPage() {// 注册页面开始console.log('欢迎注册');let usernameIsok = true,passwordIsok = true,password_cIsok = truelet username, password, password_cdo {username = mytrim(prompt('欢迎注册,请输入用户名:'))//username = mytrim(username) //调用mytrim函数if (!username) {usernameIsok = falseconsole.log('用户名不能为空!');} else {let isSensitive = this.sensitiveWord.some(function (item) {return username.toUpperCase().includes(item.toUpperCase())})if (isSensitive) {usernameIsok = falseconsole.log('用户名不合法!');} else {let isRepeat = this.userlist.some(function (item) {return item.username === username})//判断用户数组中是否存在重复名字if (isRepeat) {usernameIsok = falseconsole.log('用户名已存在');} else {usernameIsok = true}}}}while (!usernameIsok);//注册————密码do {password = mytrim(prompt('欢迎注册,请输密码:'))// password =(password) //调用mytrim函数if (!password) {passwordIsok = falseconsole.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) //调用mytrim函数if (password_c !== password) {password_cIsok = falseconsole.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('输入有误,请重新操作');// this.welcomePage()break;arguments.callee.call() //指向本函数 当指向是this. 的时候就无法使用了}}}game.welcomePage()</script>
</body></html>