猜数字游戏demo -- 分别使用JS、cookie、session实现

最新推荐文章于 2021-04-21 03:11:41 发布

晔晔炅萤

最新推荐文章于 2021-04-21 03:11:41 发布

阅读量442

点赞数

分类专栏：前端开发笔记

本文链接：https://blog.csdn.net/qq_18369669/article/details/103946064

版权

本文介绍了如何使用JavaScript、Cookie和Session来实现一个猜数字游戏。游戏规则是生成1~100间的一个整数，玩家有10次机会猜测。JavaScript实现中，随机数可被直接查看；Cookie实现下，玩家能查看存储的值；而Session实现由于存储在服务器端，确保了游戏的公平性。

摘要由CSDN通过智能技术生成

随机生成一个1 ~ 100之间的整数，仅给10次机会猜中这个数，根据用户提交的数，反馈是大了还是小了，超过10次则不再给机会。
在这里插入图片描述
下面是分别使用js、cookie、session实现的例子。

使用Javascript实现

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>猜数字游戏demo，js代码实现</title>
<link rel="stylesheet" type='text/css' href="style.css">
</head>
<body>
    <h1>猜数字游戏</h1>
    <p>Hi，我已经准备好了一个 1 ~ 100 的数字，您需要在仅有的10次机会中猜中！</p>
    <div class='info'></div>
    <form action="">
        <input type="number" min='1' max='100' oninput="if(value > 100 || value < 1){value = ''};if(parseInt(value)!=value){value=parseInt(value)}"/>
        <button type="submit" >试一试</button>
    </form>
</body>
<script>
    var numInput = document.getElementsByTagName('input')[0]
    var btn = document.getElementsByTagName('button')[0]
    var infoDiv = document.getElementsByTagName('div')[0]
    var randomNum = Math.floor(Math.random() * 100 + 1)
    var count = 0
    btn.onclick = function(){
   
        var inputValue = parseInt(numInput.value)
        if(isNaN(inputValue)){
   
            return false;
        }
        if(count >= 10){
   
            infoDiv.innerHTML = '您已经尝试了超过10次，游戏失败！'
            b