松原建设局网站,网站后台如何取消验证码登陆,成都必去的地方排行,天眼查询个人 企业查询目录
猜数字游戏
一、使用‘random’函数获取随机数
二、 分情况讨论输入值大小情况 三、HTML代码 四、CSS样式及运行效果 简单计数器#xff08;计时器#xff09;
一、使用‘setInterval’函数实现计数效果
二、使用’clearInterval‘函数实现暂停计数和重新计数效果 …目录
猜数字游戏
一、使用‘random’函数获取随机数
二、 分情况讨论输入值大小情况 三、HTML代码 四、CSS样式及运行效果 简单计数器计时器
一、使用‘setInterval’函数实现计数效果
二、使用’clearInterval‘函数实现暂停计数和重新计数效果
三、HTML/CSS代码和运行效果 猜数字游戏
一、使用‘random’函数获取随机数
本题的关键在于利用‘random’函数获取随机数 但是‘random’方法获取的是[01范围的随机数这显然不太适合用来猜所以我们一般把它乘以100转换为整型这样它的范围就是[0,100)这样就比较符合题意了代码如下 parseInt(Math.random(0,1)*100) 二、 分情况讨论输入值大小情况
这个题目的另一个关键点在于怎么才能使用户猜对数字如果猜不对那么这个游戏将没有意义所以对于用户的输入值我们必须帮助用户进行判断大小并进行提示这样才是一个标准的写法那判断的话我们首先想到的就是if语句了这题只需要考虑4种情况就行代码示例如下 if (isNaN(num) || num 1 || num 100) { this.result 输入有误请重新输入; this.guess ; } else { if (num this.codekey) { this.result 恭喜你猜对了!!!; } 。。。。。 } 三、HTML代码
bodydiv idrooth1猜数字游戏/h1div iddiv_1input v-modelguess typetext keyup.enterdoGuess//divdiv iddiv_2button clickdoGuess提交/button/divdiv iddiv_3h1{{result}}/h1/div/divscriptVue.config.productionTipfalse;const vm new Vue({el: #root,data: {guess: ,result: 请输入一个1-100的整数,codekey: parseInt(Math.random(0,1)*100)},methods: {doGuess() {var num parseInt(this.guess);if (isNaN(num) || num 1 || num 100) {this.result 输入有误请重新输入;this.guess ;} else {if (num this.codekey) {this.result 恭喜你猜对了!!!;}if(num this.codekey){this.result 猜大了,请猜小一点this.guess ;}if(num this.codekey){this.result 猜小了请猜大一点this.guess ;}}}}})/script
/body 四、CSS样式及运行效果 下面我只是写了CSS样式简单示例实际效果可以自行修改不用拘于我所写的写法有些重复还有很大的优化空间自行修改
style* {margin: 0;padding: 0;}#root {background-color: black;width: 600px;height: 400px;margin: 50px auto;color: white;}#div_1,#div_2,#div_3 {text-align: center;margin-top: 30px;}#div_3 {border: 2px solid white;width: 90%;height: 100px;margin: 30px auto;line-height: 90px;}input {width: 300px;height: 50px;font-size: 30px;}button {width: 100px;height: 50px;font-size: 30px;}/style 简单计数器计时器
一、使用‘setInterval’函数实现计数效果
要实现计数器我们很容易联想到‘’自增和for循环如果在Java中我们能很简单的实现功能但是VSCode中for的用法和Java中不一样因此我们应该使用VSCode中的函数来 ‘setInterval’来实现功能。‘setInterval’函数可按照指定的周期以毫秒计来调用函数或计算表达式意识就是你在‘setInterval’函数里面放个自增设置时间为一秒计数功能不就实现了嘛示例代码如下 time setInterval(function () { vm.counter; }, 100); 二、使用’clearInterval‘函数实现暂停计数和重新计数效果
clearInterval () 方法将停止周期性执行的指定代码对这些代码的操作是调用 setInterval () 方法 启动的。
三、HTML/CSS代码和运行效果
CSS样式可以自己修改这个样式较为简单我就不分开写了如下
headmeta charsetUTF-8script srcvue.js/scriptmeta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle* {margin: 0;padding: 0;}#root {width: 880px;height: 350px;margin: 10px auto;background-color: aqua;}/style
/headbodydiv idrooth1{{counter}}/h1button v-on:clickstart开始计数/buttonbutton v-on:clickstop停止计数/buttonbutton v-on:clickreset重新计数/button/divscriptvar vm new Vue({el: #root,data: {counter: 0,},methods: {start() {time setInterval(function () {vm.counter;}, 100);},stop() {clearInterval(time);},reset() {clearInterval(time);this.counter 0;}}})/script
/body 以上就是两个案例啦如果对你有帮助的话希望可以点点赞哈谢谢啦
