日期:2014-05-17  浏览次数:20638 次

html5 的一个应用

     关于html的这块的文章最近没怎么写,学习的生活比较忙啊,忙!所以今天给大家分享一个我做的应用吧,是用html+css+javascript做的一个市场价转换。大家可以看一看,有什么不好的可以给我提一提建议!

html文件:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>市场价转换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/zns_move.js" type="text/javascript"></script>
<script src="js/zns_from.js" type="text/javascript"></script>
<link rel="stylesheet" href="zns_style.css" type="text/css"></link>
<script type="text/javascript" language="javascript" src="shichang.js" charset="utf-8"></script></head>

<body>
<div id="content">
     <h1>市场价转换</h1>
                                  <!-- 主界面 -->
     <div id="jiemian1">
        <div id="steps1">
            <form id="formElem" name="formElem">
                <fieldset class="step">
                   <legend >主页面</legend>
                   <a href="#"><img src="image/chaoshi1.jpg" style="width: 300px;  margin-left: 0px;" onclick="jie1();"></a>
                </fieldset>                         
            </form>
        </div>
     </div>
     
                                     <!-- 超市价钱比较 -->
     
     <div id="wrapper"  style="display:none;">
        <div id="steps2">
            <form id="formElem" name="formElem" >
                <fieldset class="step">
                    <legend>市场价</legend>
                    
                    
                    <p>
                    <label >物品名称</label>
                    <input id="xin1" value="商品" type='text' style="width: 200px;"  AUTOCOMPLETE=OFF />
                    <label>物品价钱(元)</label>
                    <input id="xin2" value="0" type='text' style="width: 200px;" AUTOCOMPLETE=OFF /> 
                    <label>物品质量</label>
                    <input id="xin3" value="0" type='text' style="width: 200px;" AUTOCOMPLETE=OFF />        
                    <select id="xiala" style="width: 78px; margin-left: 5px;">
                    <option id="xin4">斤</option>  
                    <option id="xin5">两</option>  
                    <option id="xin6">千克</option>  
                    <option id="xin7">克</option>
                    </select>                                                
                    <button id="bt1" class="button black" onclick="zhuanhuan();">OK</button>
                    </p>
                                       
                </fieldset>                         
            </form>
        </div>
        
        
        
        <div id="steps3" style="display:none;">
            <form id="formElem" name="formElem" >
                <fieldset class="step">
                   <legend>商品单价</legend>
                    <p>
                        <label>商品信息(元/千克)</label>