使用C语言编写猜数字问题

html-css08

使用C语言编写猜数字问题,第1张

<html>

<head>

<title>NumberGame</title>

<style type="text/css">

<!--

body { padding:0margin:0font-size:12pxcolor:#000000background:#ffffffline-height:180%}

div,ul,li,img { padding:0margin:0border:0}

h1,h2,h3,h4,h5,h6 { font-size:12pxcolor:#555text-decoration:nonepadding:0margin:0}

a { font-size:12pxcolor:#000000text-decoration:none}

a:hover { font-size:12pxcolor:#000000text-decoration:underline}

.clear { clear:both}

.tab1 {margin-left:200pxheight:50pxwidth:450pxbackground-color:#00FFFFtext-align:center}

#txt {margin-left:330pxmargin-top:100pxheight:50pxline-height:50pxwidth:150pxbackground-color:#00FFCCfont-size:24pxtext-align:center}

input{margin:0pxpadding:0px}

-->

</style>

<script type="text/javascript">

var j=10

var number =[0,0,0,0,0,0,0,0,0]

var numberv =[0,0,0,0,0,0,0,0,0]

function startgame(){

j=10

window.status="number game"

document.getElementById("txt0").value = ""

document.getElementById("txt1").value = ""

document.getElementById("txt2").value = ""

document.getElementById("txt3").value = ""

document.getElementById("txt4").value = ""

document.getElementById("txt5").value = ""

document.getElementById("txt6").value = ""

document.getElementById("txt7").value = ""

document.getElementById("txt8").value = ""

for(i=0i<9i++){

document.getElementById("txt"+i).style.backgroundColor = '#ffffff'

}

document.getElementById("number0").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number1").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number2").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number3").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number4").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number5").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number6").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number7").innerHTML=Math.floor(Math.random()*10)

document.getElementById("number8").innerHTML=Math.floor(Math.random()*10)

number[0]= document.getElementById("number0").innerHTML

number[1]= document.getElementById("number1").innerHTML

number[2]= document.getElementById("number2").innerHTML

number[3]= document.getElementById("number3").innerHTML

number[4]= document.getElementById("number4").innerHTML

number[5]= document.getElementById("number5").innerHTML

number[6]= document.getElementById("number6").innerHTML

number[7]= document.getElementById("number7").innerHTML

number[8]= document.getElementById("number8").innerHTML

document.getElementById("start").disabled=true

count()

}

function count(){

if(j>0){

j--

document.getElementById('txt').innerHTML ='倒计时:  '+j

b = setTimeout("count()",1000)

}

else {

document.getElementById("number0").innerHTML = " "

document.getElementById("number1").innerHTML = " "

document.getElementById("number2").innerHTML = " "

document.getElementById("number3").innerHTML = " "

document.getElementById("number4").innerHTML = " "

document.getElementById("number5").innerHTML = " "

document.getElementById("number6").innerHTML = " "

document.getElementById("number7").innerHTML = " "

document.getElementById("number8").innerHTML = " "

document.getElementById("txt0").disabled=false

document.getElementById("txt1").disabled=false

document.getElementById("txt2").disabled=false

document.getElementById("txt3").disabled=false

document.getElementById("txt4").disabled=false

document.getElementById("txt5").disabled=false

document.getElementById("txt6").disabled=false

document.getElementById("txt7").disabled=false

document.getElementById("txt8").disabled=false

document.getElementById("submit").disabled=false

}

}

function submit()

{

document.getElementById("number0").innerHTML = number[0]

document.getElementById("number1").innerHTML = number[1]

document.getElementById("number2").innerHTML = number[2]

document.getElementById("number3").innerHTML = number[3]

document.getElementById("number4").innerHTML = number[4]

document.getElementById("number5").innerHTML = number[5]

document.getElementById("number6").innerHTML = number[6]

document.getElementById("number7").innerHTML = number[7]

document.getElementById("number8").innerHTML = number[8]

numberv[0] = document.getElementById("txt0").value

numberv[1] = document.getElementById("txt1").value

numberv[2] = document.getElementById("txt2").value

numberv[3] = document.getElementById("txt3").value

numberv[4] = document.getElementById("txt4").value

numberv[5] = document.getElementById("txt5").value

numberv[6] = document.getElementById("txt6").value

numberv[7] = document.getElementById("txt7").value

numberv[8] = document.getElementById("txt8").value

for(i=0i<9i++){

if(number[i]!=numberv[i]){

document.getElementById("txt"+i).style.backgroundColor = '#FF0000'

}

}

document.getElementById("start").disabled=false

document.getElementById("submit").disabled=true

}

</script>

</head>

<body>

<div id="txt"></div>

<div id="abc">

<table width="200" border="1" class="tab1">

<tr>

<td><span id="number0"></td>

<td><span id="number1"></td>

<td><span id="number2"></td>

<td><span id="number3"></td>

<td><span id="number4"></td>

<td><span id="number5"></td>

<td><span id="number6"></td>

<td><span id="number7"></td>

<td><span id="number8"></td>

</tr>

</table>

</div>

<div id="div2">

<table width="200" border="1" class="tab1">

<tr>

<td><input type="text" id="txt0" size="2" disabled/></td>

<td><input type="text" id="txt1" size="2" disabled/></td>

<td><input type="text" id="txt2" size="2" disabled/></td>

<td><input type="text" id="txt3" size="2" disabled/></td>

<td><input type="text" id="txt4" size="2" disabled/></td>

<td><input type="text" id="txt5" size="2" disabled/></td>

<td><input type="text" id="txt6" size="2" disabled/></td>

<td><input type="text" id="txt7" size="2" disabled/></td>

<td><input type="text" id="txt8" size="2" disabled/></td>

</tr>

</table>

<center><input id="start" type=button value="开始游戏" onClick="startgame()"></center>

<center><input id="submit" type=button value="提交 " onClick="submit()"></center>

</div>

</body>

</html>

这是js的猜数字，我这里木C语言的猜数字。呵呵。希望能有点用。

<body>

<div style=" width:50pxheight:50pxbackground-color:#F00border-radius:25px">

<span style="height:50pxline-height:50pxdisplay:blockcolor:#FFFtext-align:center">4</span>

</div>

</body>

首先我们需要分析一下整个牌的构造，以普通数字牌1为例，共可分为5个部分，分别是1、外框2、颜色3、上下角标数字4、里面的白色椭圆5、中间的大数字

对应不同的部分，我们将其分解为5部分的html代码并为其添加class，1、卡牌背景2、卡牌颜色（由于布局相同只有颜色不同，故将颜色抽出成为单独的类）3、上下角标数字4、白色椭圆背景5、大数字

以下均采用代码和效果图对比的方式展示效果

布好局之后，为其添加样式。首先新建css样式表，并将其关联至html文件

首先写背景的样式，按牌的比例写出宽高，留白使用padding来写，css3的新特性我们使用了如图的圆角和阴影，为牌制造立体的感觉

然后来写牌的背景颜色，Uno牌一共有黑红黄绿蓝5种颜色，因此我们只需要事先定义好这五种颜色，之后将其对应的类名添加进来就可以了。

另外，因为上下角标的数字需要使用绝对定位，因此它们的父级元素就需要定义为相对定位

下面来写上下角标的数字，由于这里使用的是em行内元素标签，因此设置宽高的时候要记得display：inline-block。

绝对定位到需要的位置，然后将右下角的数字使用css3的旋转函数180度旋转，就可以制造出倒过来的数字了

中间的白色椭圆要怎么画呢，我们知道border-radius的值与宽高相等可以画出圆形，那么当它的值为宽的一半比高的一半时，则可以画出椭圆形，这时我们再将它旋转到合适的角度，就可以得到想要的椭圆

最后就是中间的数字，由于它是椭圆形的子元素，因此椭圆形旋转的时候，它也跟着一起旋转，要想让它摆在一个比较正的位置，还应将它旋转回来。并为它挑选一个合适的字体

至此，我们的普通数字牌已经写好了