Xiaoqiang の HTML5 モバイル開発ロード (45) - 為替レート計算ツール [1]-H5 チュートリアル-php.cn

Xiaoqiang の HTML5 モバイル開発ロード (45) - 為替レート計算ツール [1]

Feb 15, 2017 pm 01:25 PM

ここ 2 日間で「PhoneGap in Action」を読みましたが、個人的にはこちらの方が優れていると思う為替レート計算ツールの例がありましたので、次の数記事で完成させたいと思います。この PhoneGap + Jquery モバイルを一緒に少し練習します。

1. 図に示すように、DrameWeaver で新しいサイトを作成します:

2. 為替レート計算ページを作成します

&lt;!doctype html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;utf-8&quot;&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;!--引入相关样式框架--&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;css/jquery.mobile-1.0.1.min.css&quot;/&gt;
&lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;js/jquery.mobile-1.0.1.min.js&quot;&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;p data-role=&quot;page&quot; id=&quot;index&quot;&gt;
    	&lt;p class=&quot;exchangeRates&quot;&gt;
        &lt;p class=&quot;header&quot;&gt;
        	&lt;p class=&quot;right&quot;&gt;
            	&lt;p class=&quot;right&quot;&gt;
                	&lt;a href=&quot;#setting&quot; data-transition=&quot;slide&quot;&gt;&lt;img src=&quot;images/tm.gif&quot; width=&quot;80&quot; height=&quot;89&quot; border=&quot;0&quot;&gt;&lt;/a&gt;
                &lt;/p&gt;
            &lt;/p&gt;
        &lt;/p&gt;
        &lt;p class=&quot;bg&quot;&gt;
        	&lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;人民币&lt;/p&gt;
                &lt;p class=&quot;money&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c1&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
        	&lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;美元&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c2&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
        	&lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;日元&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c3&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
        	&lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;里尔&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c4&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
        	&lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;新加坡元&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c5&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
            &lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;欧元&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c6&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
            &lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;克朗&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c7&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;
            &lt;p class=&quot;list&quot;&gt;
            	&lt;p class=&quot;currency&quot;&gt;英镑&lt;/p&gt;
                &lt;p class=&quot;money strong&quot;&gt;&lt;input type=&quot;number&quot; id=&quot;c8&quot; maxlength=&quot;12&quot; value=&quot;0&quot;/&gt;&lt;/p&gt;
            &lt;/p&gt;          
        &lt;/p&gt;
    &lt;/p&gt;
    &lt;p data-role=&quot;page&quot; id=&quot;setting&quot;&gt;
    	&lt;p class=&quot;setRates&quot;&gt;
        
        &lt;/p&gt;
    &lt;/p&gt;
&lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

このインターフェースは今のところ美しくありません。 style

はじめにスタイルファイル:

&lt;link rel=&quot;stylesheet&quot; href=&quot;css/style.css&quot;/&gt;

ログイン後にコピー

ヘッダースタイルを追加:

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

/*
1.text-align:center 设置文本或img标签等一些内联对象（或与之类似的元素）的居中。
2.margin:0 auto 设置块元素（或与之类似的元素）的居中。
*/

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

.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;
}

ログイン後にコピー