移动 计数

  
                          测试一下自己


方案及目的：

       虽然是个很小的程序，但是里面凝会这思想，首先这个程序分为2种方案：

方案其一：

          执行方案一，如果在游戏中玩家打错题程序将不提示任何错误继续游戏，如果在规定的30内答对10道题，游戏将终止并且给出像应的反馈（例如：题数，时间）。
         
方案其二：
          执行方案二，如果在游戏中玩家答题出现错误，这时候玩家将无法继续游戏必须从新开始。
      
目的： 
         虽然是个小的游戏，但是从很多方面上是很有价值的，首先可以锻炼一个人的思维，其次可以锻炼一个人的注意力，最后可以锻炼一个人的速度和技巧。    
     

程序功能：
        1.游戏模块可以随处拖拉（包括：鼠标左键点击拖拉、鼠标右键点击拖拉、鼠标滑
         轮滚动拖拉）。

        2.开始之后将倒计时30秒，并执行方案一，同时可以取消游戏。

        3. 点击，重置、方案二 确定将执行方案二，取消将从新开始。

        4.点击开始出现随机数（这个随机数是2个随机数之和），通过第一个数和第二个
          数的和比较随机数，如果相等则继续，并继续游戏。（方案二则直接退出游戏）。

        5.如果30秒之内10次正确则推出游戏，提示花了多少时间及答对题数。

        6. 如果超过30秒未通过，则提示答对多少个花费多长时间

                  
功能实现:
       首先功能实现：使用了css做样式  xul做页面  javascript做业务处理。

       1.我是这样做的，首先我先总结程序的功能、思路、如何实现。

       2. 接下来就开始实现了，最初是这样的我先将两个输入框数据获取，通过 documente.getElementByid的方式进行获取.

       3.我实现求和（第一个数与第二个数相加的和）   定义3个数 ，第一个和第二个可以直接获得，第三个是第二个的和。

       4.求随机数，通过Math.random()*10 来获得随机数，随机数获得之后求随机数之和
parseInt(Math.random()*10)+parseInt(Math.random()*10)，因为默认是字符串类型，所以要转 换成int类型，所以用parseInt（）；
        
       5.通过计数器定义var total=0;var righttotal=0; 每执行一次+1，一方面来计算时间，
一方面来计算所答对的题数。

     6.使用disabled 属性，他其值可以是true或false,若为true表示按钮被禁用，反之   
为启 ，用他来控制开始。

     7.拖动，通过鼠标移动，开始拖动，停止拖动来控制模块，同时重要的一点要在css样式中固定样式。
   
     8.游戏背景采用图片，游戏小模块也采用图片的形式展现。

XUL  实现：
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://desktopxframe/content/bindings/workareaframe/workarea.css" type="text/css"?>
<?xml-stylesheet href="main.css" type="text/css"?>

<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
        xmlns:html="http://www.w3.org/1999/xhtml"
        title=""
        onload="">
  <script type="application/x-javascript" src="main.js"/>
  <!-- your xul code -->
<vbox id="zfx">
<box id="xafx">
      <box>
      <textbox id="shur1" disabled="true"/>+ <textbox id="shur2" disabled="true"/>=<textbox id="shur3" disabled="true"/>
      </box>
      <box>
      <button label="开始/方案1"  oncommand='startNumberSum(this)'/>
      <button id="numBtn10" label="方案2/重新" oncommand='pause()'/>
      <button id="numBtn0"  disabled="true" label="0" oncommand='startNumber(this)'/>
      </box>
      <hbox pack="start" >
        <button id="numBtn1"  disabled="true" label="1" oncommand='startNumber(this)'/>
        <button id="numBtn2"  disabled="true" label="2" oncommand='startNumber(this)'/>
        <button id="numBtn3"  disabled="true" label="3" oncommand='startNumber(this)'/>
      </hbox>
      <hbox pack="center" >
        <button id="numBtn4"  disabled="true" label="4" oncommand='startNumber(this)'/>
        <button id="numBtn5"  disabled="true" label="5" oncommand='startNumber(this)'/>
        <button id="numBtn6"  disabled="true" label="6" oncommand='startNumber(this)'/>
      </hbox>
      <hbox  pack="end" >
        <button id="numBtn7"  disabled="true" label="7" oncommand='startNumber(this)'/>
        <button id="numBtn8"  disabled="true" label="8" oncommand='startNumber(this)'/>
        <button id="numBtn9"  disabled="true" label="9" oncommand='startNumber(this)'/>
      </hbox>
      </box>
      <button id="numBtn11"   label="帮助按钮" onclick='write();'/>
</vbox>
</window>

javascript实现：

var total=0;
var righttotal=0;

var fz=0;

var total1;
var totaltime;
var dom1=0;

var date =new Date();

//点击1-9按钮 将按钮值放入 第一 第二输入框 将2个输入框的数相加求和并和第三个框的数进行比较。
function startNumber(filed){
var value = document.getElementById("shur1").value;
if(value==null||value==""){
document.getElementById("shur1").value =filed.label;
}else{
document.getElementById("shur2").value =filed.label;
total=total+1;
var nuone = document.getElementById("shur1").value ;
     var nutwo = document.getElementById("shur2").value ;
var nothree =parseInt(nutwo) + parseInt(nuone);
var shur3value = document.getElementById("shur3").value;
if(nothree==shur3value){
document.getElementById("shur1").value ="";
document.getElementById("shur2").value ="";
righttotal=righttotal+1;
//如果10道题正确
if(righttotal ==10)
{
var a = new Date();
totaltime=a.getTime();
//alert(totaltime+","+total1)
dom1=(totaltime-total1)/1000;
alert(dom1+"秒=答题"+righttotal);
alert("恭喜通过将从新开始");
   window.location.href=window.location.href;
}
}else{
document.getElementById("shur1").value ="";
document.getElementById("shur2").value ="";
if(fz==1) {
alert("很抱歉您答错了!重新开始吧");
    window.location.href=window.location.href;
}
}
writerandom();
} 
}
//获得随机数之和，写进第三个文本框
function writerandom(){
var getrandom=parseInt(Math.random()*10)+parseInt(Math.random()*10);
document.getElementById("shur3").value =getrandom;
}
//点击oppen弹出对话框把随机数之和写进文本框，开始计时30秒
function startNumberSum(){
//
total1=date.getTime();


fz=-1; 
   var getrandom=parseInt(Math.random()*10)+parseInt(Math.random()*10);
   if(confirm("30秒内10道题，您确定挑战吗？"))
{
for(var i=0; i<10; i++)
{
document.getElementById("numBtn"+i).setAttribute("disabled","false");
}

document.getElementById("shur3").value =getrandom;

//30秒后执行 startTimer()方法.
setTimeout("startTimer()",30000); 

}
}

//30秒后执行提示，并从新开始
function startTimer(){
  alert("很抱歉时间已到从新开始");
window.location.href=window.location.href;
// alert(total+"秒=答题"+righttotal);
// if(righttotal == 10){
//    alert("恭喜通过");
//    window.location.href=window.location.href;
// }else{
// alert("时间到");
//
// }
}


//模型移动
function getRealStyle(obj,s) {
var style;
if (window.getComputedStyle) {//W3C DOM
style=window.getComputedStyle(obj,null);
} else if (obj.currentStyle) {//IE
style=obj.currentStyle;
}
return style[s];
}

function innerSize() {
return {
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
};
}
window.onload=function () {
var oDiv=document.getElementById("xafx");

addEvent(oDiv,'mousedown',function (evt) {
evt.preventDefault();
this.flag=true;
this.savedMousePos={
x:evt.layerX,
y:evt.layerY
};
});
addEvent(oDiv,'mousemove',function (evt) {
evt.preventDefault();
if (!this.flag) {
return;
}
this.style.left=evt.clientX-this.savedMousePos.x+"px";
this.style.top=evt.clientY-this.savedMousePos.y+"px";
});
addEvent(document,'mouseup',function (evt) {
oDiv.flag=false;
});
};
function addEvent(obj,evt,fn) {
if (obj.addEventListener) {
if (String(window.opera)=="[object Opera]") {
obj.addEventListener(evt,function (evt) {
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
fn.call(this,evt);
},false);
} else {
obj.addEventListener(evt,fn,false);
}
obj.addEventListener(evt,fn,false);
return obj;
}


if (!obj.functions) obj.functions={};
if (!obj.functions[evt])
obj.functions[evt]=[];
//obj.functions["mousedown"]=[]
var functions=obj.functions[evt];
for (var i=0;i<functions.length;i++) {
if (functions[i]===fn) return obj;
}
functions.push(fn);
//fn.index=functions.length-1;


if (typeof obj["on"+evt]=="function") {
//alert(obj["on"+evt]);//当这一行执行到时，obj["on"+evt] 就是handler
//alert(obj["on"+evt]==handler);
if (obj["on"+evt]!=handler)
functions.push(obj["on"+evt]);
}
obj["on"+evt]=handler;
return obj;


}

function handler() {//哪个事件发生了?
//对event对象标准化
var evt=fixEvt(window.event);
var evtype=evt.type;
var functions=this.functions[evtype];
for (var i=0;i<functions.length;i++) {
if (functions[i]) functions[i].call(this,evt);
}
}

function fixEvt(evt) {
evt.target=evt.srcElement;
if (evt.type=="mouseover")
evt.relatedTarget=evt.fromElement;
else if ("mouseout"==evt.type)
evt.relatedTarget=evt.toElement;

evt.stopPropagation=function () {
evt.cancelBubble=true;
};
evt.preventDefault=function () {
evt.returnValue=false;
};
evt.layerX=evt.offsetX;
evt.layerY=evt.offsetY;
evt.pageX = evt.clientX+document.documentElement.scrollLeft;
evt.pageY = evt.clientY+document.documentElement.scrollTop;

return evt;
}
//第二套方案/从新开始
function pause(){
fz=1;
var getrandom=parseInt(Math.random()*10)+parseInt(Math.random()*10);
var r=confirm("确认执行第二种方案，取消则从新开始")
  if (r==true)
    {
    for(var i=0; i<10; i++)
{
document.getElementById("numBtn"+i).setAttribute("disabled","false");
}
document.getElementById("shur3").value =getrandom;
setTimeout("startTimer()",30000); 
    //document.write("从新开始！")
    }
  else
    {
    window.location.href=window.location.href;
    }

}
//帮助按钮的
function write(){
if(confirm("温馨提示：方案一：30秒时间到或答对10道题才会结束,方案二：只要错误就结束游戏")){
document.getElementById('numBtn11').style.display='none'

}else{
document.getElementById('numBtn11').style.display='none'
}

}



css实现：

#zfx{
background:url(chrome://work/content/image/1.jpg);
min-width:900px;
min-height:900px;
}
#xafx{
background:url(chrome://work/content/image/1.jpg);
width:270px;
height:145px;
        
    position:fixed;
top:100px;
left:100px;

}
  #an{
   min-height:250px;
   min-width:200px;
}
#shur1{
min-height:25px;
max-width:78px;
}
#shur2{
min-height:25px;
max-width:78px;
}
#shur3{
min-height:25px;
max-width:78px;
}

#numBtn11{
min-height:25px;
  max-width:78px;

}
//如果想取整数时间Math.round();dom1=Math.round((totaltime-total1)/1000);将原来的变成这样。
效果图 请看附件：