猜数游戏html

html猜数游戏

  • 一、效果图
  • 二、代码展示

一、效果图

猜数游戏html_第1张图片
猜数游戏html_第2张图片

二、代码展示

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>猜数游戏title>
<style>
	*{
		margin:0;
		padding:0;
	}
	body {
		text-align:center;
	}
	#title{
		font-size:45px;
		font-weight:700;
		color:#666;
	}
	# guess{
		width:200px;
	}
	#result{
		width:300px;
		background-color:#E5E5E5;
	}
	#count {
		width:190px;
		background-color:#E5E5E5;
	}
style>
<script>
	var target = parseInt(Math.random()*100);
	var count = 10;
	var flag = false;
	function run(){
		if(flag) {
			var guess = document.getElementById("guess").value;
			var result = document.getElementById("result");
			var a = document.getElementById("count");
			if(guess > target){
				result.value="你猜大了";
			} else if(guess < target){
				result.value="你猜小了";
			}  else if(guess == target){
				result.value="你猜对了";
				flag = false;
			}
			count = count -1;
			a.value = count; 
			if(count == 0) {
				result.value="游戏结束,您未猜对";
				flag = false;
				window.alert("游戏结束,您未猜对!!!");
				return;
			}
		}
	}
	function is() {
		flag = true;
	}
script>
head>

<body>
    <div id= "title">猜数游戏div>
    <br/>
    <strong>请输入一个0~100之间的随机数strong>
    <br />
    <br />
    <from>
    	<input type="text" id="guess"/>
        <input type="button" id="button" value="提交" onclick="run()"/>
        <input type="button" value="开始" onclick ="is()" /><br /><br />
        <label>结果:<input type="text" id="result" />label><br /><br />
        <label>当前还可以猜测次数:<input type="text" id="count" value="10"/>label>
    from>
body>
html>

你可能感兴趣的:(javaweb,html,游戏,css3,javascript)