html随机数游戏,HTML+CSS入门 1-100随机数运算

本篇教程介绍了HTML+CSS入门 1-100随机数运算，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<

实现目标

1.点击随机生成两个数并进项随机的四则运算。

2.答案暂时隐藏，等孩子做完题后点击答案处显示答案。

3.背景设置的卡通些，激发孩子阅读兴趣...........T T。

代码部分

1 html>

2 

3 

4     

demo

5     

6         .wapper{

7             width: 560px;

8             height: 150px;

9             border: 1px solid green;

10             position: absolute;

11             top: 100px;

12             left: 200px;

13             background: url(back.jpg);

14         }

15         .wapper li{

16             padding: 0;

17             margin: 0;

18             list-style-type: none;

19             height: 100px;

20             width: 100px;

21             border: 1px solid pink;

22             float: left;

23             font-size: 50px;

24             color: blue;

25             text-align: center;

26             line-height: 100px;

27         }

28         .button{

29             width: 80px;

30             height: 40px;

31             background-color: green;

32             position: absolute;

33             top: 180px;

34             left: 625px;

35             cursor: pointer;

36         }

37         .result{

38             width: 200px;

39             height: 150px;

40             border: 1px solid green;

41             position: absolute;

42             top: 100px;

43             left: 820px;

44             background: url(back.jpg) repeat -70px 0px;

45             text-align: center;

46             line-height: 150px;

47             font-size:50px;

48             color: pink;

49             cursor: pointer;

50         }

51     

52 

53 

54     

55         

56             

请

57             

点

58             

击

59         

60     

61         Next

62     

点答案

63     

64         var first = document.getElementsByClassName("first")[0];

65         var symbol = document.getElementsByClassName("symbol")[0];

66         var second = document.getElementsByClassName("second")[0];

67         var ret = 0;

68         var resDiv = document.getElementsByClassName("result")[0];

69         randomDemo = function(){

70             var sym = ["+","-","*","/"];

71             var fir = Math.floor(Math.random()*100);

72             var sec = Math.floor(Math.random()*100);

73             var i = Math.floor(Math.random()*4);

74             first.innerHTML = fir;

75             symbol.innerHTML = sym[i];

76             second.innerHTML = sec;

77

78             switch(i){

79                 case 0: ret = fir + sec;break;

80                 case 1: ret = fir - sec;break;

81                 case 2: ret = fir * sec;break;

82                 case 3: ret = fir / sec;break;

83             }

84             ret = Math.floor(ret);

85             resDiv.innerHTML = "点答案";

86         }

87         show = function(){

88             resDiv.innerHTML = ret;

89         }

90

91     

92 

93 

本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML/CSS频道，获取更多HTML/CSS知识！