Html+JavaScript猜数字游戏

Html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>猜数字</title>
</head>
<body><button id="reset">重新开始一局游戏</button><div><label for="input">请输入要猜的数字</label>
<!--        lable标签和input标签完成了绑定，for属性的值，和表单元素的id值一样--><input type="text" id="input"><button id="guess">猜</button></div><div>已经猜的次数：<span id="count">0</span></div><div>结果：<span id="result"></span></div><script src="script.js"></script>
</body>
</html>

JavaScript

var num = Math.floor(Math.random()*100);
console.log(num);
var count = 0;
var input = document.querySelector('#input');
var result = document.querySelector('#result');
var countspan = document.querySelector('#count');
document.querySelector('#guess').onclick = function(){//1.读取用户的输入var userInput = input.value;console.log(userInput);input.value = '';//2.把用户的输入转成数字（不考虑错误处理）var userGuess = parseInt(userInput);console.log(userGuess);count++;//3.更新猜了的次数countspan.innerText = count;if (userGuess < num){result.innerText = '猜小了';}else if (userGuess > num){result.innerText = '猜大了';}else{result.innerText = '猜对了';}

页面

Html+JavaScript猜数字游戏相关推荐

JavaScript——猜数字游戏，产生随机数的函数
// 猜数字游戏// 产生随机(范围在min~max包括min和max)数字的函数function getRandom(min, max) {return Math.floor(Math.random ...
JavaScript(二)——猜数字游戏
下面我们将会通过一个小案例--猜数字游戏,来直观地感受一下如何让JavaScript完成任务. 设计要求假设你的老板给你布置了以下游戏设计任务要求: 我想让你开发一个猜数字游戏.游戏应随机选择一个 ...
JavaScript应用——手把手教你做一个页面化猜数字游戏
一听到猜数字游戏,想必大家都不太陌生吧?是的没错,很多人都用C语言或者Java写过猜数字游戏小程序,博主也不例外,之前写过C语言版本的猜数字游戏,感兴趣的同学可以看看C语言版本猜数字游戏.本篇博客主要 ...
JavaScript ——〖猜数字游戏〗10次机会
[猜数字游戏] 使程序随机生成一个1~100之间的数字,并让用户输入一个数字(10次输入机会),判断这两个数的大小,如果用户输入的数字大于随机数,那么提示"你猜大了" ...
如何实现JavaScript猜数字小游戏
本篇文章给大家详细介绍一下搞定JavaScript猜数字小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. JavaScript 猜数字小游戏在1~10中随机抽取一个数字 ...
PHP代码猜数字游戏,基于JavaScript实现猜数字游戏代码实例
环境 vscode 1.46 Microsoft Edge 83 示例以下内容为了解和熟悉 JavaScript,不需要理解,能够复制粘贴并正确运行即可. 新建网页模板在 vscode 中新建一个 ...
基于html的猜数字游戏设计
基于html的猜数字游戏设计一.原示例代码主界面代码 <!DOCTYPE html> <html> <head> ...
10次机会 js 猜数_JS猜数字游戏实例讲解
本文实例为大家分享了JS实现猜数字游戏的具体代码,供大家参考,具体内容如下猜数字游戏: 1)利用JS的Math内置对象,实现在1-50内选取一个整数随机数作为游戏答案 2)输入数字进行判断,共有10 ...
js平方计算器与猜数字游戏,计算从出生至今的天数
平方计算器: <html><head><meta charset="utf-8"><title></title>< ...
利用HBuilder制作简易猜数字游戏
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>< ...

Html+JavaScript猜数字游戏

Html

JavaScript

Html+JavaScript猜数字游戏相关推荐

最新文章

热门文章