xul+css+javascript

<?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=""
        width="600px"
        height="600px">
   
  <script type="application/x-javascript" src="main.js"/>
  <!-- your xul code -->
<vbox id="zfx" >
<box id="xafx">
<groupbox id="an">
      <caption label="pack" />
      <box>
      <hbox>
      <textbox id="shur1"/>
        <menulist id="x1">
          <menupopup>     
            <menuitem label="+"/>
            <menuitem label="-"/>
            <menuitem label="*"/>
            <menuitem label="/"/>
          </menupopup>
        </menulist>
        <spacer flex="1"/>
      </hbox>
      <textbox id="shur2"/>=<textbox id="shur3"/>
      </box>
      <box>
      <button label="open" onclick='startNumberSum(this)'/>
      </box>
      <hbox pack="start" >
        <button label="1" onclick='startNumber(this)'/>
        <button label="2" onclick='startNumber(this)'/>
        <button label="3" onclick='startNumber(this)'/>
      </hbox>
      <hbox pack="center" >
        <button label="4" onclick='startNumber(this)'/>
        <button label="5" onclick='startNumber(this)'/>
        <button label="6" onclick='startNumber(this)'/>
      </hbox>
      <hbox  pack="end" >
        <button label="7" onclick='startNumber(this)'/>
        <button label="8" onclick='startNumber(this)'/>
        <button label="9" onclick='startNumber(this)'/>
      </hbox>
    </groupbox>
      </box>
</vbox>
</window>
------------------------------------------xul上面--------------------
function startNumber(thisButton){
   var value=document.getElementById("shur1").value;
   if( value==null||value==""){
     document.getElementById("shur1").value=thisButton.label;
   }else{
   document.getElementById("shur2").value=thisButton.label; 
   }
    //alert("thisButton");
}

function startNumberSum(){
   var valueA = document.getElementById('shur1').value;
   var valueOpr = document.getElementById('x1').label;
   var valueB = document.getElementById('shur2').value;
   if(valueA==null||valueA==""){
     valueA=0;
   }
if(valueB==null||valueB==""){
     valueB=0;
   }
   var result = 0;
   switch(valueOpr){
      case '+':
        result  = parseInt( valueA ) + parseInt( valueB );
      break;
      case '-':
       result  = parseInt( valueA ) - parseInt( valueB );
      break;
      case '*':
       result  = parseInt( valueA ) *parseInt( valueB );
      break;
      case '/':
     result  =  parseInt( valueA ) /parseInt( valueB );
      break; 
   }
   //最后把结果放进去
   document.getElementById('shur3').value = result;
}
----------------------------------------javascript--------------------
#zfx{
background:red;
min-width:600px;
min-height:600px;
}
#xafx{
background:green;
max-width:290px;
min-height:290px;
        
    position:fixed;
top:100px;
left:100px;
}
  #an{
   min-height:250px;
   min-width:200px;
}
#shur1{
min-height:20px;
max-width:60px;
}
#shur2{
min-height:20px;
max-width:60px;
}
#shur3{
min-height:20px;
max-width:60px;
}
-------------------------------------css--------------------------

最终实现计算器功能-------------------------------------------------------