ランダム推測とカウント

19457 ワード

1.head first html 5第4章の小さな例を少し追加しました
 1 <!doctype html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>guss</title>

 6 </head>

 7 <style>

 8     b{ color:red; }

 9 

10 </style>

11 <body>

12     <script>

13     window.onload=init;

14     function init(){

15         var click=document.getElementById("click");

16         click.onclick=gussU;

17     }

18     var guss_count_num=0;//    

19     var right_count_num=0;//     

20     function gussU(){

21         guss_count_num++;

22         var guss=document.getElementById("guss");

23         var text=guss.value;

24         var answer=null;

25 

26         var answer=["red","green","blue"];

27         var index=Math.floor(Math.random()*answer.length);

28 

29         var tip=document.getElementById("tip");

30 

31         var guss_count=document.getElementById("guss_count");

32             guss_count.innerHTML=guss_count_num;

33         

34         var right_count=document.getElementById("right_count");

35         

36         if(text==answer[index]){

37             right_count_num++;

38             right_count.innerHTML=right_count_num;

39             tip.innerHTML="You are right I was thinking of <b>"+answer[index]+"</b>";

40             

41             }else{

42                 tip.innerHTML="Sorry I was thinking of <b>"+answer[index]+"</b>";

43             }                                               

44              var persent=Math.floor((right_count_num/guss_count_num)*100)+"%";

45             var right_person=document.getElementById("right_persont");

46             right_person.innerHTML=persent;

47         }

48     

49     </script>

50     <p>      :blue,green,red</p>

51     <input type="text" placeholder="guss u" id="guss">

52     <input type="button" id="click" value="click me">

53      <p id="tip"></p>

54      <p>    <em id="guss_count"></em>  </p>

55      <p>    <em id="right_count"></em>  </p>

56      <p>      <em id="right_persont"></em></p>

57 </body>

58 </html>