----恢复内容开始---
上午第二节课拿着电脑去教室，又练了上周老师讲的——用JS实现简单的计算器功能。连续点击数字按钮实现字符串相连那部分还是有点不太明白，晚上要再练习一遍。
还练习了网页时钟。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>计算器</title> 6 <style> 7 div input{ 8 margin-top: 10px; 9 height: 40px; 10 width: 40px; 11 border: none; 12 background-color: #999; 13 } 14 input{ 15 border-radius: 8px; 16 17 } 18 </style> 19 </head> 20 <body> 21 <input class="show" type="text" id="show"> 22 <div> 23 <input type="button" value="1" id="number"> 24 <input type="button" value="2" id="number"> 25 <input type="button" value="3" id="number"> 26 <input type="button" id="operate" value="+"> 27 </div> 28 <div> 29 <input type="button" id="number" value="4"> 30 <input type="button" id="number" value="5"> 31 <input type="button" id="number" value="6"> 32 <input type="button" id="operate" value="-"> 33 </div> 34 <div> 35 <input type="button" id="number" value="7"> 36 <input type="button" id="number" value="8"> 37 <input type="button" id="number" value="9"> 38 <input type="button" id="operate" value="*"> 39 </div> 40 <div> 41 <input type="button" style=" 130px;" id="number" value="0"> 42 <input type="button" id="operate" value="/"> 43 </div> 44 <div> 45 <input type="button" id="count" value="计算" style=" 85px;"> 46 <input type="button" id="clear" value="清除" style=" 85px;"> 47 </div> 48 <script type="text/javascript" src="jquery-1.11.1.js"></script> 49 <script> 50 var shownum1 = ""; 51 var shownum2 = ""; 52 var ope = ""; 53 $("input#number").click(function(){ 54 if(ope == ""){ 55 $("#show").val(shownum1 + this.value); 56 shownum1 = $("#show").val(); 57 }else{ 58 $("#show").val(shownum2 + this.value); 59 shownum2 = $("#show").val(); 60 } 61 }).mousedown(function(){ 62 $(this).css("background-color","#ccc"); 63 }).mouseup(function(){ 64 $(this).css("background-color","#999"); 65 }) 66 $("input#operate").click(function(){ 67 ope = $(this).val(); 68 // $("#show").val(""); 69 }).mousedown(function(){ 70 $(this).css("background-color","#ccc"); 71 }).mouseup(function(){ 72 $(this).css("background-color","#999"); 73 }) 74 $("#count").click(function(){ 75 switch(ope){ 76 case "+" : $("#show").val(Number(shownum1) + Number(shownum2));break; 77 case "-" : $("#show").val(Number(shownum1) - Number(shownum2));break; 78 case "*" : $("#show").val(Number(shownum1) * Number(shownum2));break; 79 case "/" : $("#show").val(Number(shownum1) / Number(shownum2));break; 80 } 81 82 }).mousedown(function(){ 83 $(this).css("background-color","#ccc"); 84 }).mouseup(function(){ 85 $(this).css("background-color","#999"); 86 }) 87 $("#clear").click(function(){ 88 shownum1 = ""; 89 shownum2 = ""; 90 $("#show").val(""); 91 ope = ""; 92 }).mousedown(function(){ 93 $(this).css("background-color","#ccc"); 94 }).mouseup(function(){ 95 $(this).css("background-color","#999"); 96 }) 97 </script> 98 </body> 99 </html>
---恢复内容结束--