21xrx.com
2024-11-05 20:29:35 Tuesday
登录
文章检索 我的文章 写文章
当我学习编程的时候
2023-06-17 15:42:27 深夜i     --     --
JavaScript HTML 猜数字

当我学习编程的时候,我很快意识到JavaScript是一个非常实用的语言,可以用来对HTML进行操作和交互。为了加深对JavaScript的理解,我决定按照老师的指导,做一个小小的猜数字游戏。

首先,我需要在HTML中创建一个页面,添加一些简单的元素和样式。接下来,我可以使用JavaScript来实现游戏核心逻辑,并且在网页上显示游戏进程和结果。

以下是我的代码示例:

1. HTML页面


  

   猜数字游戏

  

  

猜数字游戏

  

我已经想好了一个1~100之间的数字,请你猜猜它是多少:

  

  

  

  

2. JavaScript代码


var guessNumber = Math.floor(Math.random() * 100) + 1;

var guessInput = document.getElementById("guessInput");

var guessButton = document.getElementById("guessButton");

var result = document.getElementById("result");

var guessCount = 0;

function checkGuess() {

  var userGuess = parseInt(guessInput.value);

  guessCount++;

  if (userGuess === guessNumber) {

    alert("恭喜你,猜对了!");

    guessInput.disabled = true;

    guessButton.disabled = true;

  } else if (guessCount === 10) {

    alert("很遗憾,你已经用完了所有的猜测次数!正确答案是:" + guessNumber);

    guessInput.disabled = true;

    guessButton.disabled = true;

  } else if (userGuess < guessNumber)

    result.innerHTML = "你猜的数字太小了!";

    result.style.color = "red";

    guessInput.value = "";

   else if (userGuess > guessNumber)

    result.innerHTML = "你猜的数字太大了!";

    result.style.color = "blue";

    guessInput.value = "";

  

}

guessButton.addEventListener("click", checkGuess);

3.

通过这个小小的猜数字游戏,我更深入地学习了JavaScript和HTML的相互作用。在此过程中,我编写了封装化较强的代码,可以应对很多其他的小型游戏项目。这样的练习对于进一步学习编程技术非常有帮助,我期待接下来的学习过程。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复