需要适应手机，平板和笔记本。

代码如下

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<link rel="stylesheet" href="style.css">

<SCRIPT language=LiveScript>
var computed = false
var destination = "/"
var decimal = 0
function convert (entryform, from, to)
{
 convertfrom = from.selectedIndex
 convertto = to.selectedIndex
 entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value *100)/100
}
function addChar (input, character)
{
 if((character=='.' && decimal=="0") || character!='.')
 {
 (input.value == "" || input.value == "0") ? input.value = character : input.value += character
 convert(input.form,input.form.measure1,input.form.measure2)
 
 computed = true 
 if (character=='.')
 {
 decimal=1
} 
}
}
function openVothcom()
{
 window.open("","Display window","toolbar=no,directories=no,menubar=no");
}
function clear (form)
{
 form.input.value = 0
 form.display.value = 0
 decimal=0
}
function changeBackground(hexNumber)
{
 document.bgColor=hexNumber
}
entryform.display.value = Math.round(entryform.input.value * from[convertfrom].value / to[convertto].value )
function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

</SCRIPT>
</head>
<body>
<select class="dropdown" name="list" onchange="window.location=this.value; ">
    <option value="mass.html">&#x2660 mass &#x2660</option>
    <option value="area.html">&#x2665 area &#x2665</option>
    <option selected value="volume.html">&#x2666 volume &#x2666</option>
    <option value="lenth.html">&#x2663 lenth &#x2663</option>
    </select>
<div class=frame><div class="title">UNIT TRANSFER</div></div>

</div>
<FORM method=post name=calculator>
<TABLE>
<TBODY>
       
<TR class="inputa"> 
	<TH><b></b></TH>
<TD>
<input class="country" type="text" id="select1" value="CHN" readonly="readonly">
<INPUT name=input onchange="convert(this.form,form.measure1, form.measure2)"  placeholder="input" height="48" style="position: relative; left: 0px; font-size: 20px;">
</TD>
<TD> 
<SELECT name=measure1 
 onchange="convert(this.form,this, form.measure2)" style="position: absolute; left: 600px; font-size: 20px; border: 0px; appearance: none;">

 <OPTION selected value=0.001>&#x265a ml &#x265a

    <OPTION value=1>&#x265b l &#x265b
    
    <OPTION hidden value=0.473>&#x265a pint &#x265a
    
    <OPTION  hidden value=3.785>&#x265b gallon &#x265b
    
    <OPTION hidden value=0.0295>&#x265c ounce &#x265c
    
</OPTION>
</SELECT>
</TD>
</TR>




<TR class="inputb"> 
	<TH ><b></b></TH>
<TD> 
<input class="country" type="text" id="select2" value="UK" readonly="readonly">
<INPUT name=display placeholder="output" height="48" style="position: relative; left: 0px; font-size: 20px;" >
</TD>
<TD> 
<SELECT name=measure2 
 onchange="convert(this.form,form.measure1, this)" style="position: absolute; left: 600px; font-size: 20px;  border: 0px; appearance: none;">
 
 <OPTION hidden value=0.001>&#x265a ml &#x265a

    <OPTION hidden value=1>&#x265b l &#x265b
    
    <OPTION selected value=0.473>&#x265a pint &#x265a
    
    <OPTION value=3.785>&#x265b gallon &#x265b
    
    <OPTION value=0.0295>&#x265c ounce &#x265c

</OPTION>    
</SELECT>
</TD>
</TR>
<TR>
    <TD>
    <input type="button" onclick="swap(this.form);" value="&#x2191 &#x2193" class="swapbutton" />
    
    <script type="text/javascript">
    function swap(form) {
            for (var i = 0; i < form.measure1.options.length; i++) {
            var t = form.measure1.options[i].hidden;
            form.measure1.options[i].hidden = form.measure2.options[i].hidden;
            form.measure2.options[i].hidden = t;
        }
        var t = form.measure1.value;
        form.measure1.value = form.measure2.value;
        form.measure2.value = t;
        convert(form,form.measure1, form.measure2)

        var aa=document.getElementById('select1').value
        var bb=document.getElementById('select2').value
        document.getElementById('select1').value=bb
        document.getElementById('select2').value=aa
    }
    </script>
    </TD>
</TR>
</TBODY> 
</TABLE>



<TABLE margin=9 cellPadding=9  cellspacing="9" class="numberpad" >
<TBODY> 
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'7')" type=button value=7 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'8')" type=button value=8 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'9')" type=button value=9 class="abutton">
</TD>
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'4')" type=button value=4 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'5')" type=button value=5 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'6')" type=button value=6 class="abutton">
</TD>
<TR> 

<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'1')" type=button value=1 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'2')" type=button value=2 class="abutton">
</TD>
<TD class="button"> 
<INPUT onclick="addChar(this.form.input,'3')" type=button value=3 class="abutton">
</TD>
<TR> 
<TD class="button"> 
    <INPUT onclick="addChar(this.form.input,'0')" type=button value=0 class="abutton">
    </TD>
<TD class="button"> 
    <INPUT onclick="addChar(this.form.input,'.')" type=button value=. class="abutton">
    </TD>

<TD class="button"> 
<INPUT type="reset" type=button value=c class="abutton1">
</TD>
</TR>
</TBODY> 
</TABLE>
</FORM>
</body>
</html>

css 如下


    body{
        font-family: cursive;
        font-weight: 300;
    }
    .numberpad{
    text-align: center;
    font-size: 30px;
    background-color:black;
    border: 1px;
    position:absolute;
	top: 60%;
    left: 32%;
    width: 600px; 
    display: inline-flex;  
    
    }
    .inputa{
    position:absolute;
    right: 335px;
    top: 6%;
    font-size: 50px;
    color: white;
    size: 90px;
    border-style:solid;
    border-bottom-width: 0px;
    border-radius: 30px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-color: black;
    padding-left: 93px;
    padding-right: 123px;
    padding-bottom: 200px;
    background-color: white;
    width: 500px;

    }
    .inputb{
    position:absolute;
    right: 335px;
    top: 16%;  
    font-size: 50px;
    color: white;
    size: 50px;
    border-style:solid;
    border-top-width: 0px;
    border-radius: 30px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-color: black;
    padding-left: 100px;
    padding-right: 100px;
    padding-bottom: 270px;
    background-color: white;
    width: 516px;
    }
    .frame{
    height: 1153px;
    width: 765px;
    border: solid;
    position: absolute;
    left: 25%;
    
    background-color: black;

    
    }
    .button {
    text-align: center;
    padding: 30px 40px;
    text-decoration: none;
    display: inline-flexbox;
    height: 20px;
    width: 20px;
    margin: 20px;
    

    }
    .ukflag{
    height:100px;
    }
    
    .abutton{
    width: 100px; 
    height: 100px;
    display: inline; 
    font-size: 40px;
    border-color: black;
    font-size: 40px;
    color: white;
    background-color: #000000;
    font-family: cursive;
    font-weight: 300;
    }
    .abutton1{
    width: 100px; 
    height: 100px;   
    display: inline; 
    background-color: #000000;
    color: yellow;
    font-size: 40px;
    border-color: black;
    font-weight: 300;

    }
    .abutton2{
    width: 100px; 
    height: 100px;
    display: inline; 
    background-color: #000000;
    color: white;
    font-size: 25px;
    border-color: black;
    font-weight: 200;
    }
    .title{
    color: white;

    position: absolute;
    left: 40%;
    top: 2px;
    font-size: 20px;
    padding: 5px 10px;

    }
    .country{
    color: black;
    font-size: 20px;
    font-weight: bold;
    }
    input{
        border:none;outline:medium;
    }

    .dropdown{
        font-size: 15px;
        border: 0px;
        position: absolute;
        top: 50%;
        left: 60%;
        z-index:999;
        appearance: none;
     
    }
    .swapbutton{
        position: absolute; 
        left: 40%; 
        top: 50%;
        font-size: 15px; 
        width: 70px; 
        color: black; 
        background-color: white;
        font-weight: bold;
    }
    #select1{
        font-weight: 200;
    }
    #select2{
        font-weight: 200;
    }

谢谢

hchchc6016

小白关于c++string的疑问

3条回答

为你推荐