Java(隨筆)——利用HTML,CSS,JavaScript,JQuery編寫的簡易計算器
一．利用剛學過的前端知識作一個簡易的計算器
裏邊使用到了HTML,CSS,JavaScript以及JQuery的知識代碼以下：
（1）利用CSS設計了計算器外形樣式；
（2）利用JavaScript實現了建議計算器的功能；
代碼：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡易計算器</title>
<link rel="stylesheet" href="css/counter.css" />
<script type="text/javascript" src="js/counter.js" ></script>
<style>
#mian{
width: 100%;
height:660px;
background-image: url(img/1TX761XVUM10.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
/*提示框設計*/
#tishikuang{
width:90px;
height: 520px;
margin-left: 30px;
margin: 30px;
border: 2px red solid;
float: left;
background: yellowgreen;
font-family: 微軟雅黑;
font-size: 15px;
color: red;
display: block;
}
p{
font-size: 16px;
color: black;
}
/*外部背景*/
#wai{
width: 1000px;
height: 580px;
border: 15px black solid;
margin-left:120px;
background-image: url(img/QQ圖片20180315182956.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
box-shadow: 4px 4px rgb(40,40,40);
float: left;
}
/*手機外觀邊框*/
#jisuanqi{
width: 300px;
height: 540px;
border: 1.5px #E1A79C solid;
margin-top: 30px;
margin-left: 300px;
float: left;
display: none;
border-radius:20px ;
background: white;
box-shadow: 2.5px 2.5px #E1A79C;
}
/*設置啓動手機按鈕外框*/
#tubiao{
width: 50px;
height: 50px;
border: 0px black solid;
float: left;
margin-left: 112px;
margin-top: 78px;
}
/*設置啓動手機軟件圖標屬性*/
#tupian{
width: 30px;
height: 29px;
border: 0px black solid;
margin-left: 10px;
background-image: url(img/timg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
/*設置啓動手機軟件圖標下文字屬性*/
#wenzi{
width: 50px;
height: 19px;
border: 0px black solid;
font-size: 10px;
color: #DCDCDC;
text-align: center;
line-height: 19px;
}
/*設置手機內邊框屬性*/
#pinbian{
width: 269px;
height: 450px;
border: 0.5px black solid;
margin-left: 15px;
margin-top: 35px;
background-color: rgb(38,38,38);
}
/*手機喇叭設計*/
#laba{
width: 60px;
height: 5px;
border: 1.5px gray solid;
border-radius: 15px;
margin-top: 13px;
margin-left: 10px;
background: gray;
float: left;
}
/*設計手機喇叭攝像頭*/
#shexiang{
width: 7px;
height: 7px;
border: 1.5px gray solid;
border-radius: 7px;
background:gray;
margin-left: 104px;
margin-top: 13px;
float: left;
}
/*手機菜單按鈕外框設計*/
#caidan{
width: 30px;
height: 30px;
border: 1px gray solid;
border-radius: 30px;
background:#FFEFD5;
margin-top: 10px;
margin-left: 135px;
}
/*手機菜單按鈕內框設計*/
#caidannei{
width: 15px;
height: 15px;
border: 1px gray solid;
border-radius: 15px;
background: #FFEFD5;
margin-top: 6.2px;
margin-left: 6.2px;
}
/*時間顯示欄設計*/
#shijian{
width: 271px;
height: 18px;
border: 0px black solid;
background-color: rgb(33,33,33);
background-size: 101% 100%;
background-repeat: no-repeat;
font-size: 12px;
color: white;
text-align: center;
line-height: 18px;
display: none; /*爲了鎖屏顯示*/
}
/*手機桌面設計*/
#zhuomian{
width: 269px;
height: 430px;
border: 1px rgb(33,33,33) solid;
background-image: url(img/QQ圖片20180315215937_萬能看圖王.png);
background-size: 101% 100%;
background-repeat: no-repeat;
display: none; /*爲了鎖屏顯示*/
}
/*設置手機計算器軟件圖標屬性*/
#jipian{
width: 25px;
height: 22px;
border: 0px black solid;
margin-left: 10px;
border-radius: 15px;
background-image: url(img/timg.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
margin-left: 220px;
margin-top: 152px;
}
/*設置手機計算器軟件圖標下文字屬性*/
#jizi{
width: 50px;
height: 19px;
border: 0px black solid;
font-size: 8px;
color: #FF7F50;
text-align: center;
line-height: 19px;
margin-left: 210px;
margin-top: 4px;
}
#jizhuomian{
width: 269px;
height: 430px;
border: 0px black solid;
background: red;
margin-left: -1px;
display: none;
}
input{
border-style:none ;
height: 45px;
font-size: 20px;
color: black;
background: grey;
}
#show_number1{
width: 119px;
float: left;
}
#show_yusuanfu{
width: 25px;
float: left;
text-align: center;
line-height: 25px;
}
#show_number2{
width: 119px;
float: left;
text-align: end;
}
#show_denghao{
width: 25px;
float: left;
text-align: center;
line-height: 25px;
}
#show_jieguo{
width: 240px;
float: left;
text-align: end;
}
#jiwai{
width: 269px;
height: 384px;
border: 0px gray solid;
font-size: 22px;
background: #D3D3D3;
}
.qinqchu{
display: none;
}
#denghao{
width: 105px;
height: 45px;
border: 0px black solid;
border-radius: 45px;
font-size: 18px;
background: #6B8E23;
float: left;
margin-left: 20px;
margin-top: 18px;
text-align: center;
line-height: 45px;
box-shadow: 2px 2px grey;
}
#jiwai>div{
width: 46px;
height: 45px;
border: 0px black solid;
border-radius: 45px;
font-size: 18px;
background: #D3D3D3;
float: left;
margin-left: 16px;
margin-top: 18px;
text-align: center;
line-height: 45px;
box-shadow: 2px 2px grey;
}
#jiwai>div:active{
background: #9370D8;
}
#denghao:active{
background: #FF4500;
}
/*#xiakaung{
width:300px;
height: 55px;
margin-left: 550px;
border: 1px rgb(40,40,40) solid;
background: black;
box-shadow: 3px 3px rgb(45,45,45);
}*/
</style>
<script src="js/jquery-1.10.1.js"></script>
</head>
<body>
<!--背景桌面-->
<div id="mian">
<div id="tishikuang">
使用時請單擊電腦界面的網絡手機按鈕，彈出手機界面（再次單機會關閉網絡手機界面），
單機網絡手機主菜單按鈕（下方圓鍵），解除手機鎖屏（再次單機會繼續鎖屏），單機手機界面計算器按鈕，打開計算器,
進行四則運算 點擊提示框能夠隱藏提示框.
<p>做者：齊濤</p>
</div>
<!--外層佈局-->
<div id="wai">
<!--設計點擊開啓手機-->
<div id="tubiao">
<div id="tupian"></div>
<div id="wenzi">網絡手機</div>
</div>
<!--計算器外框，以手機形式展現-->
<div id="jisuanqi">
<!--手機前攝像頭設計-->
<div id="shexiang"></div>
<!--手機喇叭設計-->
<div id="laba"></div>
<!--手機屏幕邊框設計-->
<div id="pinbian">
<!--手機間框設計-->
<div id="shijian">時間顯示</div>
<div style="clear: both;">
<!--以上浮動清除-->
</div>
<!--手機桌面背景-->
<div id="zhuomian">
<!--設置手機計算器背景-->
<div id="jizhuomian">
<input type="text" value="0" id="show_number1" disabled="disabled"/>
<input type="text" value="" id="show_yusuanfu" disabled="disabled"/>
<input type="text" value="0" id="show_number2" disabled="disabled"/>
<div style="clear: both;">
<!--以上浮動清除-->
</div>
<input type="text" value="=" id="show_denghao" disabled="disabled"/>
<input type="text" value="" id="show_jieguo" disabled="disabled"/>
<div id="jiwai">
<div id="clean">C</div>
<div id="del">退格</div>
<div>%</div>
<div class="yunsuanfu">/</div>
<div class="qinqchu" style="clear: both;">
<!--以上浮動清除-->
</div>
<div class="number">7</div>
<div class="number">8</div>
<div class="number">9</div>
<div class="yunsuanfu">*</div>
<div class="qinqchu" style="clear: both;">
<!--以上浮動清除-->
</div>
<div class="number">4</div>
<div class="number">5</div>
<div class="number">6</div>
<div class="yunsuanfu">-</div>
<div class="qinqchu" style="clear: both;">
<!--以上浮動清除-->
</div>
<div class="number">1</div>
<div class="number">2</div>
<div class="number">3</div>
<div class="yunsuanfu">+</div>
<div class="qinqchu" style="clear: both;">
<!--以上浮動清除-->
</div>
<div class="number">0</div>
<div class="number">.</div>
<span id="denghao">=</span>
</div>
</div>
<!--設置手機計算器軟件按鈕背景-->
<div id="jipian"></div>
<div id="jizi">計算器</div>
</div>
</div>
<!--菜單按鈕外框設計-->
<div id="caidan">
<!--菜單按鈕內框設計-->
<div id="caidannei"></div>
</div>
</div>
</div>
<div class="qinqchu" style="clear: both;">
<!--以上浮動清除-->
</div>
<!-- 電腦下框設計
<div id="xiakaung"></div>-->
</div>
</body>
<!--手機與手機計算器邏輯-->
<script>
/*//1.設置點擊事件,點擊軟件圖標，彈出手機
var tubaio=document.getElementById("tubiao");//獲取啓動手機按鈕圖標對象
var jisuanqi=document.getElementById("jisuanqi");//獲取手機界面對象
tubaio.onclick=function(){
jisuanqi.style.cssText="display: block";//解除手機桌面隱藏
}*/
//1.（01）（JQuery編寫打開關閉手機計算器框設置）
$("#tubiao").click(function(){
if ($("#jisuanqi").css("display")=="none"){
$("#jisuanqi").show();
} else{
$("#jisuanqi").hide();
}
});
//2.設置時間顯示,自動更新時間
function show_time() {
//獲取時間欄內容
var shijian=document.getElementById("shijian");
//獲取當前時間
var dateTime=new Date().toLocaleString();
//用當前時間替換div內容
shijian.innerHTML=dateTime;
}
show_time();//先手動調show_time方法
window.setInterval("show_time()",1000);//編寫定時器，每1000ms調用一次show_time方法
//3.設置手機計算器點擊事件，擊軟件圖標，彈出計算器
var jipian=document.getElementById("jipian");//獲取手機啓動計算器按鈕圖標id
var jizhuomian=document.getElementById("jizhuomian");//獲取計算器桌面id
jipian.onclick=function(){
jizhuomian.style.cssText="display: block";//解除計算器界面隱藏
}
//
//4.鎖屏解除操做，點擊主菜單按鈕，顯示手機桌面(原生javascript代碼編寫)
/* var caidan=document.getElementById("caidan");//獲取手機主菜單啓動按鈕圖標id
var shijian=document.getElementById("shijian");//獲取手機時間欄id
var zhuomian=document.getElementById("zhuomian");//獲取手機桌面id
caidan.onclick=function(){
shijian.style.cssText="display: block";//解除手機時間欄隱藏
zhuomian.style.cssText="display: block";//解除手機桌面欄隱藏
}*/
//5.鎖屏操做（利用JQuery寫方代碼）
//點擊手機主菜單按鈕：
//（1）當display屬性值爲none時，調用show（）方法 展現手機桌面（解除鎖屏）
//（2）當display屬性值爲block時，調用hide（）方法隱藏手機桌面（啓動鎖屏）
$("#caidan").click(function(){
if ($("#shijian").css("display")=="none"){
$("#shijian").show();
$("#zhuomian").show();
} else{
$("#shijian").hide();
$("#zhuomian").hide();
}
});
//6.設置隱藏提示框（點擊提示框，提示框消失）
$("#tishikuang").click(function(){
if ($("#tishikuang").css("display")=="block"){
$("#tishikuang").hide();
}
});
//7.計算器計算邏輯
//(1)定義三個變量 用來保存，用戶輸入的 第一個數字，第二個數字，和運算符
var numValue1 = "";
var numValue2 = "";
var czf = "";
var show_number1 = document.getElementById("show_number1");
var show_number2 = document.getElementById("show_number2");
var show_yunsuuan = document.getElementById("show_yusuanfu");
var show_jieguo = document.getElementById("show_jieguo");
var clean = document.getElementById("clean");
var del = document.getElementById("del");
var denghao = document.getElementById("denghao");
//(2)獲取全部的數字鍵
var numbers = document.getElementsByClassName("number");
for(var i = 0; i < numbers.length; i++) {
numbers[i].onclick = function() {
//計算器處理小數點的問題
if(this.innerHTML == ".") {
//判斷這個numValue1 裏面有沒有點，而且點不能出如今首位
if(numValue1.indexOf(".") == -1 && numValue1.length >= 1) {
//咱們點擊了數字顯示到文本框中
numValue1 += this.innerHTML;
//展現一下
show_number1.value = numValue1;
}
} else {
//咱們點擊了數字顯示到文本框中
numValue1 += this.innerHTML;
//展現一下輸入數字到文本框中
show_number1.value = numValue1 * 1;//去除首尾的無效0
}
}
}
//(3)給全部的操做符號 設置點擊事件
var opers = document.getElementsByClassName("yunsuanfu");
for(var i = 0; i < opers.length; i++) {
opers[i].onclick = function() {
//在這裏處理四則
if(numValue2 == "") {
//當你點擊了操做符以後，咱們把numValue1，給numValue2來保存
//把numValue1清空掉 而後讓他去接收第二個數字
numValue2 = numValue1;
numValue1 = "";
//保存操做符
czf = this.innerHTML;
show_yunsuuan.value = czf;//去除首尾的無效0
show_number2.value=numValue1;
} else {
//處理四則運算的邏輯：把前兩次個數的運算結果算出來，再賦值給numValue2
//而後把numValue1 清空，準備接收下一個數字
funResult();
//保存操做符
czf = this.innerHTML;
show_yunsuuan.value = czf;//去除首尾的無效0
show_number2.value=numValue1;
}
}
}
//(4)處理清空鍵的邏輯
clean.onclick = function() {
//把全部的設置歸置爲初始狀態
numValue1 = "";
numValue2 = "";
czf = "";
show_number1.value = "0";
show_number2.value = "0";
show_yunsuuan.value = "";
show_jieguo.value="";
}
//(5)處理退格鍵
del.onclick = function() {
if(numValue1.length > 1) {
numValue1 = numValue1.substring(0, numValue1.length - 1);
show_number2.value = numValue1;
show_number1.value = numValue2;
} else if(numValue1.length == 1) {
numValue1 = "";
numValue2 = "";
czf = "";
show_number1.value = "0";
show_number2.value = "0";
show_yunsuuan.value = "";
show_jieguo.value="";
}
}
//(6)處理等號邏輯
denghao.onclick = function() {
funResult();
}
function funResult() {
if(numValue1 != "") {
var one = Number(numValue2);
var two = Number(numValue1);
var jg = "0";
switch(czf) {
case "+":
jg = one + two;
break;
case "-":
jg = one - two;
break;
case "*":
jg = one * two;
break;
case "/": //處理除數爲0
if(two == 0) {
alert("除數不能爲0");
numValue1 = "";
numValue2 = "";
czf = "";
show_number.value = "0";
} else {
jg = one / two;
}
break;
}
var n = new Number(jg);
var finalR = n.toFixed(4);
numValue2 = finalR; //把結果再賦值給numValue2
numValue1 = ""; //清空numValue1
//去掉首尾無效的0 給值*1 便可
show_jieguo.value =numValue2 * 1;
}
}
</script>
</html>
運行結果展現：css
點擊左邊的提示框：html
點擊屏幕上的網絡手機圖標：前端
點擊手機圓形主菜單按鈕：java
點擊手機上的計算器按鈕：jquery
例輸入23+45求和：網絡
點擊清空：ide
再例如（2+3）*5：佈局
小數點運算23.4*45.6：this
輸入788：
點擊退格：
點擊主菜單鍵關機
點擊網絡手機關閉計算器：
【簡易計算器製做完畢】
相關文章
- 1. HTML+CSS+Javascript實現簡易計算器
- 2. JavaScript 編寫的簡易計算器
- 3. 純 HTML+CSS+JavaScript 編寫的計算器應用
- 4. 簡易html+css+js計算器
- 5. html+css+js實現簡易計算器
- 6. HTML CSS, JavaScript 計算器
- 7. 用JavaScript編寫一個簡易計算器
- 8. java寫一個簡易的計算器
- 9. jQuery簡易計算器
- 10. HTML+CSS+JavaScript簡易教程
- 更多相關文章...
- • XSD 簡易元素 - XML Schema 教程
- • jQuery Mobile CSS 類 - jQuery Mobile 教程
- • Git可視化極簡易教程 — Git GUI使用方法
- • 使用Rxjava計算圓周率
相關標籤/搜索
-
html+css+javascript+jquery
html+css+javascript+html
html+css+javascript+jquery+ajax
html+css+javascript+html5+jquery
php&javascript&css&jquery
html&&css&&javascript
html+javascript+css
javascript+css+html
html+css+javascript
html&css&javascript
JavaScript
JQuery
Java
HTML
CSS
jQuery Mobile 教程
瀏覽器信息
Hibernate教程
計算
java
應用
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
