猜数字游戏网页版
猜数字游戏网页版本
- 猜数字游戏
-
- 页面展示：
- 具体实现：
猜数字游戏
实现一个猜数字游戏。
随机产生一个数字，输入数字猜这个数字的大小，直到猜中这个数字。当你输入的这个数字小于这个随机数，提示猜小了，当你输入数字大于这个随机数，则提示猜大了。直到猜中这个随机数，输出恭喜你猜中了，并结束程序。
如何用网页实现猜数字游戏呢？
我们需要用到html/css/JavaScript
html用于展示
css美化界面（设置背景，颜色…）
JavaScript计算
页面展示：
具体实现：
<html lang="zh-hans">
<head>
<meta charset="uft-8">
<title>猜数字title>
<link rel="stylesheet" href="style.css">
head>
<body class="body">
请输入要猜的数字：
<button type="button" id="button">猜button>
<br>
<br>
已经猜的次数：0span>
<br>
<br>
结果：span>
<br>
<br>
.body{
font-family: serif;
font-size: 25px;
color: rgb(37, 11, 72);
background-image: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
padding: 0px;
padding-left: 20%;
margin: 10%;
}
* {
box-sizing: border-box;
padding: auto;
}
input {
width: calc(30%);
font-size: 10px;
outline: none;
border: 2px solid rgb(87, 143, 147);
border-radius: 3px;
padding: 8px 20px;
line-height: 1.5em;
}
button {
text-align: center;
width: calc(10%);
border: none;
border-radius: 3px;
background-color: rgb(98, 86, 243);
font-size: 14px;
font-weight: bold;
color: white;
text-shadow: 0 1px 0 black;
line-height: 2em;
box-shadow: 0 4px 0 rgb(21, 11, 151);
letter-spacing: 30px;
padding-left: 34px;
}
做的有点丑，主要是审美不好，颜色界面搭配不好 ,审美是硬伤 >.<