【创建一个网页，实现猜数字游戏】

要求如下

逻辑如下：

一个button按钮
第二行中，打印“请…数字”
然后一个输入文本框
然后一个按钮
第三行打印 “已经猜的次数”
然后打印猜的次数
结果显示猜大了猜小了猜对了

在script中

获取button按钮、输入的数据、记录count的值，以及结果值
随机生成一个随机数Math.floor 、 count变量值记录
如果点猜按钮，所有数据进行变动
如果点重启，所有数据初始化

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><button type="button" id="reset">重新开始一局游戏</button><br>请输入要猜的数字：<input type="text" id="number"><button type="button" id="button">猜</button><br>已经猜的次数：<span id="count">0</span><br>结果：<span id="result"></span><script>var inputE = document.querySelector("#number");var countE = document.querySelector("#count");var resultE = document.querySelector("#result");var btn = document.querySelector("#button");var resetBtn = document.querySelector("#reset");// 随机生成一个 1-100 的数字var guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数var count = 0;// on: 当// click: 点击// 事件驱动（Event-Drive）：只要真正发生了点击事件时，才执行该函数btn.onclick = function() {count++;countE.innerText = count;var userGuess = parseInt(inputE.value);if (userGuess == guessNumber) {resultE.innerText = "猜对了";resultE.style = "color: gray;";} else if (userGuess < guessNumber) {resultE.innerText = "猜小了";resultE.style = "color: blue;";} else {resultE.innerText = "猜大了";resultE.style = "color: red;";}};resetBtn.onclick = function() {guessNumber = Math.floor(Math.random() * 100) + 1count = 0;countE.innerText = count;resultE.innerText = "";inputE.value = "";}
</script>
</body>
</html>

【创建一个网页，实现猜数字游戏】相关推荐

python游戏最简单代码-如何利用Python开发一个简单的猜数字游戏
前言本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(high)&q ...
python猜数字游戏编程入门_如何利用Python开发一个简单的猜数字游戏
导读热词前言本文介绍如何使用Python制作一个简单的猜数字游戏. 游戏规则玩家将猜测一个数字.如果猜测是正确的,玩家赢.如果不正确,程序会提示玩家所猜的数字与实际数字相比是"大(hi ...
一个简单的猜数字游戏（附带关机惩罚）
作为一个初学C语言的小白,一个简易的C语言小游戏无非是提高了我对这门计算机语言的兴趣.接下来我将从提高自己的角度讲解一下这个简单的猜数字游戏,希望大家多多包涵. ------------------- ...
Dev C++，一个好玩的猜数字游戏
周末了,看了一点代码,发现有一个好玩的数字游戏,贡献给大家,个人觉得还是挺好玩的. 说个题外话,之前写的文章,都是零散的,主要是时间的原因,最近事情有点杂,一说到这个事情,我就心生愧疚,好像我一直说事 ...
JavaScript应用——手把手教你做一个页面化猜数字游戏
一听到猜数字游戏,想必大家都不太陌生吧?是的没错,很多人都用C语言或者Java写过猜数字游戏小程序,博主也不例外,之前写过C语言版本的猜数字游戏,感兴趣的同学可以看看C语言版本猜数字游戏.本篇博客主要 ...
一个改版的猜数字游戏，超搞笑
前言:对于设计一个游戏而言,最主要的就是框架和思路,我们在设计好没一个环节时,都要运行测试一下,有无问题:不然最后在debug,大量的bug就会让你不知所措:所以要养成一个好习惯:当设计好一个环节 ...
利用JavaScript实现一个简单的猜数字游戏
问题描述:程序随机生成一个1到10之间的数字,然后让用户随机输入一个数字,如果用户输入的数字过大,则提示用户猜的数字过大,请往小的猜,如果用户输入的数字过小,则提示用户输入的数字过小,请往大的猜:当 ...
python输入两个数字的成语_请用 Python 语言编写一个简易的猜数字游戏程序。
import random answer = random.randint(1,10) print('猜数游戏 ') num=input('请输入你猜测的数字 n') guess=int(num) n ...
html写一个猜数字游戏,JS实现网页端猜数字小游戏
本文实例为大家分享了JS实现网页端猜数字游戏的具体代码,供大家参考,具体内容如下题目描述电脑产生一个0到100之间的随机数字,并且要求用户来猜,如果用户猜的数字比这个数字大,电脑会提示" ...
python猜年龄代码_python入门教程NO.7用python来写一个猜数字游戏
python入门教程本文涉及的python基础语法为while循环 #python#3中while语句常常被用于循环执行某个程序,任何非0和非空null的值,都会被条件判断为True while 条 ...

【创建一个网页，实现猜数字游戏】

【创建一个网页，实现猜数字游戏】相关推荐

最新文章

热门文章