« »

Hiệu ứng tạo một máy tính cùng các phép tính toán đơn giản với các nút bấm được tô sáng">tô sáng khi rê con trỏ chuột đến.

Nhãn: Máy tính cơ bản

Báo cho chúng tôi lỗi JavaScript này

Demo
Phóng to
Tải lại
Cửa sổ mới

Mã nguồn
CSS
JavaScript
HTML
In

Copy All x2

<STYLE type=text/css>BODY DIV#tab {
	BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; CURSOR: move; HEIGHT: 20px; POSITION: absolute; WIDTH: 150px
}
BODY DIV#marker {
	BACKGROUND-COLOR: black; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; COLOR: white; HEIGHT: 200px; POSITION: absolute; WIDTH: 150px
}
BODY SPAN#screen {
	BACKGROUND-COLOR: darkblue; COLOR: lightyellow; HEIGHT: 20px; POSITION: relative; WIDTH: 130px
}
BODY A.button {
	BACKGROUND-COLOR: darkblue; BORDER-BOTTOM: white 2px outset; BORDER-LEFT: white 2px outset; BORDER-RIGHT: white 2px outset; BORDER-TOP: white 2px outset; COLOR: white; CURSOR: hand; FONT-WEIGHT: bold; HEIGHT: 20px; POSITION: relative; TEXT-DECORATION: none; WIDTH: 45px
}
BODY A:hover {
	BACKGROUND-COLOR: red; COLOR: white
}
</STYLE>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<SCRIPT language=JavaScript type=text/javascript>
<!--
var down=false;
var first;
var buffer="";
var toggle=false;
var func=new Array("*","/","+","-",".");
window.onload=main;

if(navigator.appName=="Netscape")
  window.document.captureEvents(event.MOUSEMOVE);

function MDown()
{
  down=true;
}
function MUp()
{
  down=false;
	document.getElementById('unsel').select();
}
function MMove(e)
{
 if(down)
	{
	  document.getElementById('tab').style.left=(navigator.appName=="Netscape")?e.PageX:event.clientX;
	  document.getElementById('tab').style.top=(navigator.appName=="Netscape")?e.PageY:event.clientY;
		document.getElementById('marker').style.left=(navigator.appName=="Netscape")?e.PageX:event.clientX;
		document.getElementById('marker').style.top=(navigator.appName=="Netscape")?e.PageY+20:event.clientY+20;
	}
}




function main()
{

 if(navigator.appName=="Netscape")
 {
   with(document.getElementById('tab').style)
	 {
    zIndex=1;
		top:0+"px";
		backgroundColor="transparent";
	 }
   with(document.getElementById('marker').style)
	 {
	  zIndex=0;
	  width=300+"px";
	  top=20+"px";
	 }
 }

 for(var x=-1;x<9;x++)
   creatButtons(x,true,"");
 creatBR();creatBR();
 for(var x=0,y=9;x<func.length;x++,y++)
   creatButtons(y,false,func[x]);
	 
 creatPerc();
 creatBR();creatBR();
 creatSQRT();
 creatPOW();
 creatEnter();
 creatCLS();
 creatBK(); 
 
window.document.onmouseup=MUp;
window.document.onmousemove=MMove;

}
function creatButtons(IDNo,num,txt)
{
   a=document.createElement('a');
	 a.id="aid"+IDNo;
	 a.className="button";
	 if(navigator.appName=="Netscape")
	   a.innerHTML=(num==true)?"<b style='visibility:hidden'>_</b>"+(IDNo+1)+"<b style='visibility:hidden'>_</b>":"<b style='visibility:hidden'>_</b>"+txt+"<b style='visibility:hidden'>_</b>";
	 else
     a.innerHTML=(num==true)?(IDNo+1):txt;
	 a.href="javascript:sendKey("+IDNo+","+num+")";
	 document.getElementById('marker').appendChild(a);
} 
function creatSQRT()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>SQRT<b style='visibility:hidden;'>_</b>":"SQRT";
	a.href="javascript:_SQRT()";
	document.getElementById('marker').appendChild(a);
}
function creatPOW()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>POW<b style='visibility:hidden;'>_</b>":"POW";
	a.href="javascript:_POW()";
	document.getElementById('marker').appendChild(a);
}
function creatPerc()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>%<b style='visibility:hidden;'>_</b>":"%";
	a.href="javascript:_Perc()";
	document.getElementById('marker').appendChild(a);
}
function creatEnter()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>=<b style='visibility:hidden;'>_</b>":"=";
	a.href="javascript:ALU("+toggle+")";
	document.getElementById('marker').appendChild(a);
}
function creatCLS()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>CLS<b style='visibility:hidden;'>_</b>":"CLS";
	a.href="javascript:CLS()";
	document.getElementById('marker').appendChild(a);
}
function creatBK()
{
  a=document.createElement('a');
	a.className="button";
  a.innerHTML=navigator.appName=="Netscape"?"<b style='visibility:hidden;'>_</b>BKSP<b style='visibility:hidden;'>_</b>":"BKSP";
	a.href="javascript:BK()";
	document.getElementById('marker').appendChild(a);
}
function creatBR()
{
  br=document.createElement('br');
	document.getElementById('marker').appendChild(br);
}
function sendKey(IDNo,num)
{  
   switch(IDNo)
	 {
     case 9:
		   temp=func[0];
	   break;
		 case 10:
		   temp=func[1];
	   break;
		 case 11:
		   temp=func[2];
	   break;
		 case 12:
		   temp=func[3];
	   break;
		 case 13:
		   temp=func[4];
	   break;
		 default:
		   temp=IDNo+1;
			 temp.toString();
	  }
	 buffer+=temp;
   document.getElementById('screen').innerHTML=buffer;
}
function ALU()
{
 if(toggle)
 {
  temp=Math.pow(eval(first),eval(document.getElementById('screen').innerHTML));
	toggle=false;
 }
 else
 {
  temp=eval(document.getElementById('screen').innerHTML);
 }
 buffer=temp.toString();
 document.getElementById('screen').innerHTML=temp;
}
function CLS()
{
  buffer="";
	toggle=false;
  document.getElementById('screen').innerHTML="";
}
function BK()
{
  buffer=document.getElementById('screen').innerHTML.substring(0,document.getElementById('screen').innerHTML.length-1);
	document.getElementById('screen').innerHTML=buffer;
}
function _SQRT()
{
  temp=Math.sqrt(eval(document.getElementById('screen').innerHTML));
  document.getElementById('screen').innerHTML=temp;
	buffer=temp.toString();
}
function _POW()
{
  toggle=true;
  first=document.getElementById('screen').innerHTML;
  document.getElementById('screen').innerHTML="";
	buffer="";
}
function _Perc()
{
  buffer="";
  temp=eval(eval(document.getElementById('screen').innerHTML)/100);
  document.getElementById('screen').innerHTML=temp;
	buffer=temp.toString();
}
//-->
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<DIV id=tab onmousedown=MDown() onmouseup=MUp()>~ Calculator ~</DIV><BR>
<DIV id=marker><BR><SPAN id=screen></SPAN><BR></DIV>
<INPUT id=unsel style="POSITION: absolute; top-900;left: -900" size="20">
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->