Javascript猜数字游戏
2016-03-14 00:10
387 查看
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> </head> <body> <div style="width:200px;height:200px;border:dashed;background-color:darkseagreen;border-width:1px;"> <p>1.猜測一个0到100的数<br />2.雙擊文本框重新輸入<br />3.輸入result顯示目標數值</p> <label id="lblResult" style="width:30px;background-color:crimson">显示对错</label> <br /> <label id="lblCount" style="background-color:darkcyan">猜测次数:0</label> <br /> <input type="text" id="txtNum" onchange="getResult()" ondblclick="CaiShu()" /> <br /> <label id="lblDebug">Coded By Phoenix©2016</label> <button hidden="hidden" id="btnReset" onclick="reset()">重新開始</button> </div> <script> var shuzhi = parseInt(Math.random() * 100);//得到要让人家猜测的数 var cishu = 0; //document.getElementById("realValue").innerHTML = shuzhi; var lblResult = document.getElementById("lblResult"); var lblDebug = document.getElementById("lblDebug"); var txtNum = document.getElementById("txtNum"); function CaiShu() { var num = txtNum.value;//猜测的数 //alert(num); if (shuzhi>num) { lblResult.innerHTML = "猜小了"; cishu = cishu + 1; txtNum.textContent = ""; } if(shuzhi<num) { lblResult.innerHTML = "猜大了"; cishu = cishu + 1; txtNum.textContent = ""; } if(shuzhi==num) { lblResult.innerHTML = "猜對了"; document.getElementById("btnReset").hidden = null; } //顯示猜測次數 document.getElementById("lblCount").innerHTML ="猜測次數"+ cishu; } function reset() { shuzhi = parseInt(Math.random() * 100); cishu = 0; document.getElementById("btnReset").hidden = "hidden"; document.getElementById("txtNum").value = ""; document.getElementById("lblResult").innerHTML = "顯示對錯"; document.getElementById("lblCount").innerHTML = 0; } function getResult() { var result = txtNum.value == "result"; //lblDebug = result; if (result) { txtNum.value = shuzhi; } } </script> </body> </html>
相关文章推荐
- JSP自定义标签简单入门教程
- javascript实现PC网页里的拖拽效果
- javascript实现数组去重的多种方法
- 使用javascript插入样式
- 基于javascript html5实现3D翻书特效
- 原生javascript+css3编写的3D魔方动画旋扭特效
- javascript复制数组
- 说说JSON和JSONP,也许你会豁然开朗
- 深入理解JavaScript系列
- JavaScript 小技巧
- JS处理事件小技巧
- JavaScript基础篇(三)— — DOM事件揭秘
- 浅谈JS代码和OC代码的交互
- (转)js闭包初入门
- JavaScript基础篇(二)— — DOM事件基础
- html JS
- JSP的一些笔记
- 配置iis支持.json格式的文件
- js 中对象
- JavaScript高级程序设计(第三版)学习笔记13、14章