小强的HTML5移动开发之路（45）——汇率计算器【1】-H5教程-PHP中文网

首页

web前端

H5教程

小强的HTML5移动开发之路（45）——汇率计算器【1】

黄舟

Feb 15, 2017 pm 01:25 PM

这两天看了《PhoneGap实战》上面有一个汇率计算器的例子，个人觉得比较好，就拿出来和大家分享一下，在接下来的几篇文章中我们来一起完成这个PhoneGap + Jquery mobile的小练习。

一、在DrameWeaver中新建站点，如图：

二、编写汇率计算页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<!--引入相关样式框架-->
<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.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">
            	<p class="right">
                	<a href="#setting" data-transition="slide"><img src="images/tm.gif" width="80" height="89" border="0"></a>
                </p>
            </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>
    <p data-role="page" id="setting">
    	<p class="setRates">
        
        </p>
    </p>
</body>
</html>

这个界面现在还很不美观，我们来设计一下样式

引入样式文件：

<link rel="stylesheet" href="css/style.css"/>

添加头部样式：

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

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

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

以上就是小强的HTML5移动开发之路（45）——汇率计算器【1】的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越基础：H5代码中的高级技术May 02, 2025 am 12:03 AM

H5的高级技巧包括：1.利用进行复杂图形绘制，2.使用WebWorkers提升性能，3.通过WebStorage增强用户体验，4.实现响应式设计，5.利用WebRTC实现实时通信，6.进行性能优化和最佳实践。这些技巧帮助开发者构建更动态、互动和高效的Web应用。

H5：网络内容和设计的未来May 01, 2025 am 12:12 AM

H5（HTML5）将通过新元素和API提升网页内容和设计。1）H5增强了语义化标记和多媒体支持。2）它引入了Canvas和SVG，丰富了网页设计。3）H5的工作原理是通过新标签和API扩展HTML功能。4）基本用法包括使用创建图形，高级用法涉及WebStorageAPI。5）开发者需注意浏览器兼容性和性能优化。

H5：网络开发的新功能和功能Apr 29, 2025 am 12:07 AM

H5带来了多项新功能和能力，极大提升了网页的互动性和开发效率。1.语义化标签如、增强了SEO。2.多媒体支持通过和标签简化了音视频播放。3.Canvas绘图提供了动态图形绘制工具。4.本地存储通过localStorage和sessionStorage简化了数据存储。5.地理位置API便于开发基于位置的服务。

H5：HTML5的关键改进Apr 28, 2025 am 12:26 AM

HTML5带来了五个关键改进：1.语义化标签提升了代码清晰度和SEO效果；2.多媒体支持简化了视频和音频嵌入；3.表单增强简化了验证；4.离线与本地存储提高了用户体验；5.画布与图形功能增强了网页的可视化效果。

HTML5：标准及其对Web开发的影响Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括语义化标签、多媒体支持、离线存储与本地存储、表单增强。1.语义化标签如、等，提升代码可读性和SEO效果。2.和标签简化多媒体嵌入。3.离线存储和本地存储如ApplicationCache和LocalStorage，支持无网络运行和数据存储。4.表单增强引入新输入类型和验证属性，简化处理和验证。