溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

HTML5移動如何實現(xiàn)匯率計算器

發(fā)布時間：2021-03-06 10:57:23 來源：億速云 閱讀：215 作者：小新 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)HTML5移動如何實現(xiàn)匯率計算器，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

php實現(xiàn)匯率設(shè)置頁面的顯示

	<p class="setRates">
		<p class="header">
			<p class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></p>
		</p>
		<p class="bg">
			<!--列表-->
			<p class="list">
			  <p class="currency w100"><span class="strong">100</span><span class="f25">美元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r2" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">日元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r3" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">里爾</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r4" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r5" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">歐元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r6" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">克朗</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r7" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">英鎊</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r8" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
		</p>
		<p class="footer"></p>
	</p>

下面給出全部界面的源碼：

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標(biāo)題文檔</title>
<!--引入相關(guān)樣式框架-->
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<p data-role="page" id="index">
	<p class="exchangeRates">
		<p class="header">
			<p class="right"><a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a></p>
		</p>
		<p class="bg">
			<!--匯率國家列表-->
			<p class="list">
				<p class="currency">人民幣</p>
				<p class="money"><input type="number" id="c1" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">美元</p>
				<p class="money strong" ><input type="number" id="c2" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">日元</p>
				<p class="money strong" ><input type="number" id="c3" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">里爾</p>
				<p class="money strong" ><input type="number" id="c4" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">新加坡元</p>
				<p class="money strong" ><input type="number" id="c5" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">歐元</p>
				<p class="money strong" ><input type="number" id="c6" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">克朗</p>
				<p class="money strong" ><input type="number" id="c7" maxlength="12" value="0"/></p>
			</p>
			<p class="list">
				<p class="currency">英鎊</p>
				<p class="money strong" ><input type="number" id="c8" maxlength="12" value="0"/></p>
			</p>
		</p>
		<p class="footer"></p>
	</p>
</p>
<p data-role="page" id="setting">
	<p class="setRates">
		<p class="header">
			<p class="back"><a href="#" data-rel="back" id="backAndSave"><img src="images/tm.gif" width="93" height="54" border="0"></a></p>
		</p>
		<p class="bg">
			<!--列表-->
			<p class="list">
			  <p class="currency w100"><span class="strong">100</span><span class="f25">美元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r2" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">日元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r3" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">里爾</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r4" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">新加坡元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r5" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">歐元</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r6" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">克朗</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r7" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
			<p class="list">
			  <p class="currency"><span class="strong">100</span><span class="f25">英鎊</span></p>
			  <p class="equal">=</p>
			  <p class="setRates">
				<input type="number" id="r8" maxlength="8" value="1">
			  </p>
			  <p class="flagRight">人民幣</p>
			</p>
		</p>
		<p class="footer"></p>
	</p>
</p>
</body>
</html>

style.css

/* CSS Document */
body{
	background-color:#c19e7d;
	font-family:"黑體";
	margin:0px;
	padding:0px;
}

/*
1.text-align:center 設(shè)置文本或img標(biāo)簽等一些內(nèi)聯(lián)對象（或與之類似的元素）的居中。
2.margin:0 auto 設(shè)置塊元素（或與之類似的元素）的居中。
*/

.exchangeRates,.setRates{
	width:480px; 
	height:100%;
	margin:0 auto;
	font-family:"黑體";	
}

.header{
	width:480px;	
	height:116px;
	background:url(../images/title.png) no-repeat;
}

.header .right{ 
	float:right;
	width:80px;
	height:54px;
}
.header .right a{
	float:right;
	width:80px;
	height:54px;	
}
.header .right a:hover{
	float:left;
	width:80px;
	height:54px;	
	background:url(../images/setting.png) no-repeat;
}

.bg{
	width:480px;
	height:598px;
	background:url(../images/bg.png) no-repeat;
	background-color:#999933;
	overflow:hidden;
}

.bg .list{
	float:left;
	width:480px;
	height:77px;
	background:url(../images/line.png) 0px 64px no-repeat;	
}

.bg .list .currency{
	float:left;
	width:150px;
	height:77px;
	text-align:left;
	font-size:28px;
	line-height:50px;
	color:#bea58c;
	padding-left:30px;
}

.bg .list .money{ 
	float:left; 
	width:240px;
	height:77px; 
	text-align:right; 
	font-weight:bold; 
	line-height:50px; 
	color:#ffefda;
	padding-top:3px;
}
.bg .list .money input{
	float:right; 
	background-color:transparent; 
	width:210px; 
	height:25px;
	border:0px; 
	font-size:30px; 
	color:#ffefda; 
	font-family:Arial, Helvetica, sans-serif;
	padding-left:6px; 
	padding-right:6px; 
	text-align:right;
}

.strong{ font-weight:bold}

.footer{
	width:480px; 
	height:49px; 
	background:url(../images/bottom.png) no-repeat;
}


.bg .list .equal{
	float:left; 
	width:20px; 
	height:77px; 
	text-align:center; 
	font-size:30px; 
	font-weight:bold; 
	line-height:50px; 
	color:#ffefda; 
}
.bg .list .setRates{ 
	float:left; 
	width:153px; 
	height:77px; 
	text-align:left; 
	padding-top:3px;}
.bg .list .setRates input{
	float:right; 
	background-color:transparent; 
	width:128px; 
	height:28px; 
	border:2px solid #be9975; 
	background-color:#84613f; 
	border-radius:7px; 
	font-size:28px; 
	color:#ffefda; 
	font-family:Arial, Helvetica, sans-serif; 
	padding-right:6px; 
	text-align:right;
}
.bg .list .flagRight{
	float:left; width:67px;
	 height:77px; 
	 text-align:left; 
	 padding-left:6px; 
	 color:#bea58c; 
	 line-height:50px;
	 font-size:22px;}
/*setting*/
.setRates .header{
	width:464px; 
	height:116px; 
	background:url(../images/setting_title.png) no-repeat; 
	padding-left:16px; 
}
.setRates .header .back{ 
	float:left; 
	width:93px; 
	height:54px; 
} 
.setRates .header .back a{ 
	float:left; 
	width:93px; 
	height:54px; 
} 
.setRates .header .back a:hover{ 
	float:left; 
	width:93px; 
	height:54px; 
	background:url(../images/setting_back.png) no-repeat; 
} 

.f25{ font-size:25px;}
.w100{ width:100px;}

/*解決 jqmobile切換閃屏*/
.ui-page {  
	backface-visibility: hidden;  
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

手機上的運行效果：
HTML5移動如何實現(xiàn)匯率計算器HTML5移動如何實現(xiàn)匯率計算器

關(guān)于“HTML5移動如何實現(xiàn)匯率計算器”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手