1.使用HTML的表单以及表格标签，完成以下的注册界面（验证码不做）

html代码（css写于其中）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <style type="text/css">
  7.             body{
  8.                 width: 500px;
  9.                 margin: 10px auto;
  10.             }
  11.             form{
  12.                 display: inline-block;
  13.                 width: 500px;
  14.                 font-size: 10px;
  15.                 border: 1px solid #ccc;
  16.                 padding: 20px;
  17.             }
  18.             p{
  19.                 display: inline-block;
  20.                 margin: 0 5px;
  21.                 color: red;
  22.             }
  23.             input{
  24.                 box-shadow: -1px -1px 1px #888888;
  25.                 padding: 2px 7px;
  26.             }
  27.             .text{
  28.                 display: inline-block;
  29.                 width: 100px;
  30.                 text-align: right;
  31.                 margin-right: 20px;
  32.             }
  33.             .line{
  34.                 margin: 10px auto;
  35.             }
  36.             .sex{
  37.                 width: 45px;
  38.             }
  39.             .place{
  40.                 width: 55px;
  41.             }
  42.             .button{
  43.                 margin-left: 120px;
  44.                 background-color: blue;
  45.                 color: #fff;
  46.                 width: 65px;
  47.             }
  48.         </style>
  49.     </head>
  50.     <body>
  51.         <form name="form1" method="post" onsubmit="check()">
  52.             <div class="line">
  53.                 <div class="text" >用户名</div><input type="text" name="username"/><p>*</p><span>(带*的必须填写)</span>
  54.             </div>
  55.             <div class="line">
  56.                 <div class="text">密码</div><input type="password"  name="password"/><p>*</p>
  57.             </div>
  58.             <div class="line">
  59.                 <div class="text" >重复密码</div><input type="text" name="repassword"/><p>*</p>
  60.             </div>
  61.             <div class="line">
  62.                 <div class="text" >Email</div><input type="text" name="email"/><p>*</p><span>(将发送注册确认邮件)</span>
  63.             </div>
  64.             <div class="line">
  65.                 <div class="text">姓名</div><input type="text" />
  66.             </div>
  67.             <div class="line">
  68.                 <div class="text">性别</div><select class="sex" >
  69.                     <option value="1">女</option>
  70.                     <option value="2">男</option>
  71.                 </select>
  72.             </div>
  73.             <div class="line">
  74.                 <div class="text">地区</div><select class="place" >
  75.                 </select>
  76.                 <select class="place" >
  77.                 </select><p>*</p>
  78.             </div>
  79.             <div class="line">
  80.                 <div class="text">家乡</div><select class="place" >
  81.                 </select>
  82.                 <select class="place" >
  83.                 </select>
  84.             </div>
  85.             <div class="line">
  86.                 <div class="text">推荐人</div><input type="text" />
  87.             </div>
  88.             <div class="line">
  89.                 <div class="text">填写验证码</div><input type="text" /><p>*</p>
  90.             </div>
  91.             <input class="button" type="submit" value="确定"/>
  92.         </form>
  93.     </body>
  94.     <script language="JavaScript">
  95.         function check(){
  96.             var string=""
  97.             if(form1.username.value=="")
  98.                 string+="请输入用户名\n\r"
  99.             if(form1.password.value=="")
  100.                 string+="请输入密码\n\r"
  101.             if(form1.repassword.value!=form1.password.value)
  102.                 string+="两次密码不一致\n\r"
  103.             if(form1.email.value=="")
  104.                 string+="请输入Email\n\r"
  105.             if(string!="")
  106.                 alert(string)
  107.         }
  108.     </script>
  109. </html>

实验截图

2、计算到期存款总额:

css

  1. body{
  2.     width: 300px;
  3.     margin: 10px auto;
  4.     border: 1px solid #000;
  5. }
  6. h3{
  7.     text-align: center;
  8.     margin: 10px auto;
  9. }
  10. label{
  11.     margin: 5px 40px 5px 10px;
  12. }
  13. input{
  14.     box-shadow: -1px -1px 1px #888;
  15.     margin: 5px 0;
  16. }
  17. button{
  18.     width: 105px;
  19.     margin: 0 7px 0 2px;
  20.     box-shadow: 2px 2px 1px #000;
  21.     border:;
  22.     font-weight:;
  23. }

html代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>简易计算器</title>
  6. <link rel="stylesheet" href="calculator.css">
  7.     </head>
  8.     <body>
  9.         <h3>简易计算器</h3>
  10.         <form name="form">
  11.             <label>存款类型</label><input name="radio" type="radio" value="dingqi" />定期&nbsp;
  12.             <input name="radio" type="radio" value="zhengcun" />整存<br />
  13.             <label>存款期限</label><input type="text" name="time" />年<br />
  14.             <label>存款利率</label><input type="text" name="rate" /><br />
  15.             <label>期初存款</label><input type="text" name="start" /><br />
  16.             <hr >
  17.             <button type="button" onclick="calculate()">计算到期总额</button><input type="text" name="sum" />
  18.             <hr >
  19.         </form>
  20.         <script type="text/javascript">
  21.             function calculate(){
  22.                 if(form.radio.value==""||form.time.value==""||form.rate.value==""||form.start.value=="")
  23.                     alert("请填写完整")
  24.                 else{
  25.                     if(form.radio.value=="dingqi"){
  26.                         form.sum.value=(1+eval(form.time.value)*eval(form.rate.value)*0.6)*eval(form.start.value)
  27.                     }else{
  28.                         form.sum.value=(1+eval(form.time.value)*eval(form.rate.value))*eval(form.start.value)
  29.                     }
  30.                 }
  31.             }
  32.  
  33.         </script>
  34.     </body>
  35. </html>

实验截图

3、参考下面给出的代码，使用HTML与JavaScript完成界面功能

html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>shopping</title>
  6.         <link rel="stylesheet" type="text/css" href="shop.css"/>
  7.     </head>
  8.     <body>
  9.         <form name="form">
  10.             <div><i class="iconfont icon-gouwuche"></i></div>
  11.             <span>购物车</span>
  12.             <h4>购物简易计算机</h4>
  13.             <label>第一个数</label><input name="first" /><br>
  14.             <label>第二个数</label><input name="second" /><br>
  15.             <button type="button" onclick="compute('+')">+</button>
  16.             <button type="button" onclick="compute('-')">-</button>
  17.             <button type="button" onclick="compute('*')">*</button>
  18.             <button type="button" onclick="compute('÷')">÷</button><br>
  19.             <label>计算结果</label><input name="end" />
  20.         </form>
  21.         <script type="text/javascript">
  22.             function compute(op)
  23.                {
  24.                     var num1,num2;
  25.                     num1=eval(form.first.value);
  26.                     num2=eval(form.second.value);
  27.                     console.log(num1,num2)
  28.                     if (op=="+")
  29.                         form.end.value=num1+num2 ;
  30.                     if (op=="-")
  31.                         form.end.value=num1-num2 ;
  32.                     if (op=="*")
  33.                         form.end.value=num1*num2 ;
  34.                     if (op=="÷"  &&  num2!=0)
  35.                         form.end.value=num1/num2 ;
  36.               }
  37.         </script>
  38.     </body>
  39. </html>

css

下方@font-face 一块是iconfont（图像字体-一种无限放大也不失真的字体）

  1. @font-face {font-family: "iconfont";
  2.   src: url('//at.alicdn.com/t/font_1428445_7bltond27zt.eot?t=1569342659395'); /* IE9 */
  3.   src: url('//at.alicdn.com/t/font_1428445_7bltond27zt.eot?t=1569342659395#iefix') format('embedded-opentype'), /* IE6-IE8 */
  4.   url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAA1QAAsAAAAAGGAAAA0AAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCFSAqgDJlNATYCJANICyYABCAFhG0HgVcbMhRRlJFWKNnPgpzMNVVHE2WmTVt0isBm7i6huPKXeVndq9bP89v8c999PF7ROqOejLW1ajsAdeGGCIiFIroodI2bi2LtKtJFJD8i4IG6195md4KVqFE8E814qBYMBqOFA3R4c5oyfsKtAf355nwvG9+1HCjYEci92an5th9RDulicxbyEQKfAAIDIybkV9mRpycJHN/btnrST3OvNhnLgprDG6EwBVlp7n3MUZf3+f4wHeanCG7AClFNT00mI0wHCHIS3IydlDMYW3owXRRpxhfauIrbAwSAFSoCaiVnaoFGYhyh29JqMQCdSSMbyhG6nqq4apKhhSBC5+YStwBgQfDn0Sf0CjQAQRSB3VHuOKkMYl/YL13Y6cVGxSZwnk8DgBcEgAFEACA99VVpewACPVRirD/pJACoCUgE/sEepSfII3jUni6eCE+8J8uT76n2LPPc9Xz/hfhLl/eC5hqq1ocdGFHzkZrTA0hIccQI7NIMQJKT4ZfNZWAK9z8vD0zwWr3KNCqAh5UIkgepBIIUMggIHKQABDGkGggEZBdwOF5GAEEEGQ8EGjILCCRkPhDkkFVAkEFWA4GHXAYEBHkXCBTk95gOGPCFeDrA4EtXERSYUOqraACMBKICAHUAqHlBW0SMhGVbAkWMicbSeCKK54ERFVrF+dK0bzDFMEpKKWdZvgMvkDJSLg9lWcTw4byt4VHqr+BVynxKThLBszKND6PlcqaslSSwA8+j5AWppJLoyBGodt2pW67aRKq16MTEiZrN7x4dEjhPZgda7A7UDvJdKMo8FX1A9Sa/cJOPHxk96VmjNOlCm5NIDVHvV3zrHu0ynGvyxiPVHxx1ACO35C2p1/v9VzQrJ/FxqWO91SQoaUm/Hf1fYfsQlOo5h6zLwCbiRrPGdw4E6YjCngW8SJbVpVfhj/ftetPcnYDrXnY7IPEikrXMf81iKsJRV1GLLRQGiQko3COGllvfQhsQiA1uUnjbHfFGryrcayZBSGiyP4Q0S8Aywm3kQXqxQAmtsFXrHZSHfTSSWN/6EH+wL8hlqnIwWcBgHUyAEY0LqElHnHj18t3wlsUkQOqhr3AtDACmX9Fl1nRVkFIcXr2MuJbF5KVKeIWb2PnckhYmAUoh7+LVgTPEi/gtYCzSy8tlaUNjr5IvybH+5iY5r8/Gk9HBydOQS68/bwhMnYUiGbSclMJGk/R3iWZURqy+Rq8/79+yuOZEP4eRsq0WeLUW1pqfLwxM/NTY0VLNUpXz+YGZ3hsbrx5kSVV0d9zXKC5fXk2Sl5a+0KbucK7rkukOXtEsNDXJPPcm+o5CV40/tMlzxiiVLU+z1Eg2zt7unZVYY6Jh4Bad+HaJO7w6qZGkFf+VblXopvOUydPwNScjKl3WS/qVazDVbbyWkr3uR7ijFRuKYOtpy24qV+q6zvpdTiH9cEnT5/r285blTFcZYJ8liJrsu2iLCUhs5G0cCxRNsRk0qFJV8Cpv7WJgWE2KYcSo4gh4RhS8IuTcHk5sYZgWJVXzqhZUzc6vnjlXwmDlzOBzYpfv0gV6P2sUHRRyOW+5quSvaK3FrE6BCY0N7eLHJWaOhrzYJvtcci/cCm1dSu1B8dRG41lDOE9Om8GzZF6dC4dOxSbDX7Z869WcTptcloVPHg6159guZeXDQcDsIaMIA42nKEztStBvC1Uam7e9VCXaFVqEywejC3HjCulmYdX+TAGd/TLRc8SiHXLNSUWRka92JnndXl7UZEGbRsGakZPrfVwUszcaVPkN068uPry/1drBxE0dnMPHLX6q99qmyXlaymVhhZIfsr5+Xkap1je1K/YzdOQ0WGvoP+tpFrnXmJtHpBx6h4F5dBQd+abaVfF0/mrrHSdEMrdSrIB8vVfKLaNiFvIvolbh1Jf/w8vZYOC/4PjTwaXI4G3Vmg+x45L6QH5nXtS5IlQ3DhUN6j3ydFFo3Spk6k1UupfXEkVoXBmFz+S6oopYpC8MC5OFWPhR2eQ0vIfeUyCxOyYVpX2ZdrJ3fIQoJcUwX7NyocaZhsaW+BR0lvQpEXVOHG4fAsciB/ct+XPWKQlXPMetWZebktKB6x9vXbk5KxGNKUHESnIpPsXDOAjfdfON499x3Xqw8tnxPwuznJH7gW2SKoIV0rLh6qB3O85JKsJfrUiLmBbjbWv04zkNRO8Z+lVZCTPV6QxAO7Yj/7EBioDuAVNDDvWH6bz33iyZULIw0BsAC6dIankJP+189/MAvR/PTzKkJeGrJJlt7KTa1CSfq6pHPJg5KdZNxL+IV21vDZ3ks91H9EKE3YNsp+6pg9X33KWwvJMQ+oXrexI1ixfXEDYCjHApwtmIGH146Gnh+vXTJ65nQdkIZaFMB1Q5MpmsLPhB6t0570fxHHEYJYOyZjDqhdkL1czq5+QF7cqm5lBh4jm97w170e/Fkr67nmfPmNyPVQe+CFSz/RbvfL7reUxzWG0fsUM8ngoTjQ/0nOn7yaZUyXuC6BjzLgEVF6OENi5Nt6ps0LHCJ7O2nasWLtiONj61bCkbPClNx7WhhOLijkPfOXX0u7Z3tOYlcVltW22H6zUxeGdXnm9VYSB88Xb/To7buZ96PVoVZjXZ8XlbWd13hte9Lqf3VW/bhfz333QGlIKKJmFGJW6KHb4joGOg2zK4JQdvfPZsIyxMM3gj4W2W4Qd6a/GDB3gNXkvYWhcogKL1mgut+OxZrKz5LiBCKaxWfPdTY3+UtUO4dtmCwP+GZIZUPyi9n0GKtj3mxb3Gt4d2/qp5+ij7wveFNh2/6r7uSCyqnlE5ICn5n+TF3vmbQpUv+X+3XsfviNnbd8xBzcSePUQzZTxAZo60fIj52ZIx8upDRDLIW+SFvywS5o3aOp84c4aYL644wmeNtuz5XvP9Hkv26MO8uAItOXaMKYjw/2DJPOJalJFo3rOnmZiDtu8gZotP9yABfxSSkCE9ZKDrGrn3RxkUs/Dv3Y4m8yy9/Fygbe6Uz1aCci8PAhZp9Tv1j736yLhMditH+yFa2AmPvM22TiW9ncrZKl23MaB/0MECzTi5Dpg8tbuzXdnOdGecbaRT1aCq88HhS24j+fQZuQFvePJsMy6FraP65WkR0Ry/UBeVujRbuw3mGdgSql5AJsyJ5cyKVwr9wMRVaedm1s64dMmsNL94aVLdUpnb2w8czNw2YdzokiqCwoPDgxTHr8iSBF2YLtTklka/JiTB7B9+bGuwP7K924IqQtuJUWF1wXXDZL0ibN3vByEhgSCgBOpE5UImdyCtMfyVZMVQIdWhqLet+PRp3DpW8j7mvWQsKpk6tURZCBTx/N/CradPtw6uJ9xuot4Z19YcyG+IcxL1bjfsmrZ9BI7i3vZ7+o77fMsfyvTPPMTjOZ3dPi93ljjNdA1tdgZtZn0vVUtrpCrBdwAXXjO3GdQKX8rZW6pb7Eg0cSIaydxuHz0XHzmC57LLHy3KtufkxI5+t55fi+cePUIvaUutPlvNTIeMtrMpc6mg/k8AGaliYy64ehDC7ODpwRv+ZeMlR/M7iRv/K9gYwZVKtoqWUQ504PbKXDq3k4hqEC3dKinlIjf9pxWPy+t8RRLPnFqejuW1fv5ZHevXM/QS6XEHGxvzc24/tORPgpqKVn2xt10ovHniT7Sk3695F6dJ6SXM+umZHf2r/GBadgfWgHfECJyBhAF4z5PElXcPl+G8pvSVaOXgHvEeY51pDW4qPccLcUxXC3MRS8qfia/H/hwT8VDvKt6Fg6vKnzA31hmPY6f3JZZj/+yQRCCLxsSTPwDOBrZN+KQxsiG/0dz/BEc932+6FCTMrgAa8cNGwo/7NmkNgPd/vR2EZZTpd9g6yE3PybbOusTNrAClGT8nTYKxfC8AL8l7Y1r5do79naF8E0IQCyEYTWOSwyOICKcPodCGE1YPKdfmqNhhKDEA0N1MhyBy+whB6hzB5G5TUAx/TUQ6+I5Q5AETlj6oQnI6ByubYDcZHKYyoXSCYDXaaswi52DD7vkmS0OVwZ5OBGP0Jnu9daXQMyom35xiqjHZz3GJ+kZLL4fDLJjttmoh2bkzU1WVTai12ypMRkdUucNROyg62lx1ySijrRpYCexMDBx6yjKCUhPmtTKyqWHevwNb+P35TCwaVDGwN6zxYV49E7t61pMX9BQlpoOZImo6rXEofes1sujFQVwzgdnralNNkEy0SRX3bAS11WeqYGLkEKX8CLfWINFkS+auIsq8qrZ9Ada3VvZ+lYFAGJFIhCgkRjRiEIs4xCMJkiIZkiMFUiIVyOZWQ43D1mCw223j+gzozUwst9VYjKrQQFvkg4xrMJabxKUGq8NqsJFGg71MZLD26jlQlGpbD4ctb7A1sdpq5MtO0TDBWmNJtRdVWY0GK7PZAZEOU71DXGedYDqTLZogLzXeSlbZjJVUeYPBbLLShqGkVGmgKqxHpQAAAAAA') format('woff2'),
  5.   url('//at.alicdn.com/t/font_1428445_7bltond27zt.woff?t=1569342659395') format('woff'),
  6.   url('//at.alicdn.com/t/font_1428445_7bltond27zt.ttf?t=1569342659395') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  7.   url('//at.alicdn.com/t/font_1428445_7bltond27zt.svg?t=1569342659395#iconfont') format('svg'); /* iOS 4.1- */
  8. }
  9.  
  10. .iconfont {
  11.   font-family: "iconfont" !important;
  12.   font-size: 30px;
  13.   font-style: normal;
  14.   -webkit-font-smoothing: antialiased;
  15.   -moz-osx-font-smoothing: grayscale;
  16. }
  17.  
  18. .icon-gouwuche:before {
  19.   content: "\e707";
  20. }
  21. form{
  22.     width: 250px;
  23.     margin: 20px auto;
  24.     border: 1px solid #ccc;
  25.     background-color: #c9e495;
  26.     position: relative;
  27. }
  28. div{
  29.     width: 64px;
  30.     height: 64px;
  31.     border-radius: 50%;
  32.     border: 1px solid #000;
  33.     position: absolute;
  34.     top: 2px;
  35.     left: 2px;
  36.     background: linear-gradient(to bottom, rgba(255,255,255,0.9), rgba(0, 0, 0, 0.1));
  37. }
  38. span{
  39.     font-size: 10px;
  40.     position: absolute;
  41.     top: 45px;
  42.     left: 20px;
  43.     color: red;
  44.     font-weight:;
  45. }
  46. h4{
  47.     text-align: center;
  48. }
  49. label{
  50.     margin: 3px 10px;
  51. }
  52. button{
  53.     width: 55px;
  54.     font-size: 15px;
  55.     margin-left: 3px;
  56.     box-shadow: 1px 0.5px 0px #ccc;
  57.     border-top:;
  58.     border-left:;
  59. }
  60. input{
  61.     border: 2px solid #000;
  62.     padding: 2px 5px;
  63. }
  64. i{
  65.     position: absolute;
  66.     color: red;
  67.     top: 10px;
  68.     left: 30px;
  69. }

实验截图

4、使用HTML与JavaScript完成界面功能【点击 确认 弹出以下网页对话框】

css

  1. .all{
  2.     width: 300px;
  3.     margin: 10px auto;
  4.     background-color: pink;
  5. }
  6. h3{
  7.     text-align: center;
  8. }
  9. label{
  10.     display: inline-block;
  11.     width: 130px;
  12.     text-align: right;
  13. }
  14. button{
  15.     display: block;
  16.     margin: 5px auto;
  17. }
  18. select{
  19.     margin-left: 5px;
  20.     width: 80px;
  21. }

html

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title></title>
  6.         <link rel="stylesheet" type="text/css" href="sendinfo.css"/>
  7.     </head>
  8.     <body>
  9.         <div class="all">
  10.             <h3>送货地址确认</h3>
  11.             <form name="form1" method="post">
  12.                 <label>省份：</label><select name="province" onchange="change()">
  13.                     <option value="北京">北京市</option>
  14.                     <option value="上海">上海市</option>
  15.                 </select><br>
  16.                 <label>城市：</label><select  name="city" id="city"></select><br>
  17.                 <label>区：</label><select name="area" id="area" ></select><br>
  18.                 <label>街道：</label>
  19.                 <input type="text" name="street" /><br>
  20.                 <label>门牌号：</label>
  21.                 <input type="text" name="door" />
  22.                 <br>
  23.             </form>
  24.             <button type="button" onclick="confirm()">确认</button>
  25.             <script type="text/javascript">
  26.                 function change(){
  27.                     console.log(form1.province.value);
  28.                     if(form1.province.value=="北京"){
  29.                         document.getElementById("city").innerHTML="<option value='北京'>北京市</option>";
  30.                         document.getElementById("area").innerHTML="<option value='东城区'>东城区</option><option value='西城区'>西城区</option><option value='宣武区'>宣武区</option><option value='崇文区'>崇文区</option><option value='海淀区'>海淀区</option><option value='朝阳区'>朝阳区</option><option value='丰台区'>丰台区</option>";
  31.                     }
  32.                     else{
  33.                         document.getElementById("city").innerHTML="<option value='上海'>上海市</option>";
  34.                         document.getElementById("area").innerHTML="<option value='静安区'>静安区</option><option value='普陀区'>普陀区</option><option value='黄浦区'>黄浦区</option><option value='杨浦区'>杨浦区</option><option value='徐汇区'>徐汇区</option>";
  35.                     }
  36.  
  37.                 };
  38.                 function confirm(){
  39.                     if(form1.province.value==""||form1.street.value==""||form1.door.value==""){
  40.                         alert("请填写完整")
  41.                     }else{
  42.                         var info="你本次购买的商品信息如下：\n商品名称：跑跑游戏道具；\n商品数量：5件；\n商品单价：12.5美金；\n运费：10美金；总计72.5美金；\n送货地址："+form1.province.value+form1.city.value+form1.area.value+form1.street.value+form1.door.value+"\n请确认以上信息是否有误！！！"
  43.                         alert(info)
  44.                     }
  45.                 }
  46.             </script>
  47.         </div>
  48.     </body>
  49. </html>

实验截图

5 、完成以下界面以及功能

html（css写于其中）

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8">
  5.         <title>个人所得税</title>
  6.         <style type="text/css">
  7.             td{
  8.                 padding-right: 10px;
  9.             }
  10.             input{
  11.                 margin: 3px 5px;
  12.                 font-size: 10px;
  13.                 box-shadow: -1px -1px 1px #888;
  14.             }
  15.             button{
  16.                 width: 80px;
  17.                 margin: 2px 5px;
  18.             }
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <table border="1" cellspacing="0" cellpadding="0">
  23.             <tr>
  24.                 <th colspan="2">个人所得税计算器</th>
  25.             </tr>
  26.             <tr>
  27.                 <td>请输入你的月收入：</td>
  28.                 <td><input type="text" id="income"/>元</td>
  29.             </tr>
  30.             <tr>
  31.                 <td>请输入所得税起征额：</td>
  32.                 <td><input type="text" id="start"/>元</td>
  33.             </tr>
  34.             <tr>
  35.                 <td>所得税：</td>
  36.                 <td><input type="text" id="tax"/>元</td>
  37.             </tr>
  38.             <tr>
  39.                 <th colspan="2">
  40.                     <button type="button" onclick="calculate()">计算</button>
  41.                     <button type="button" onclick="reset()">重填</button>
  42.                 </th>
  43.             </tr>
  44.         </table>
  45.         <script type="text/javascript">
  46.             function calculate(){
  47.                 var income=eval(document.getElementById("income").value);
  48.                 var start=eval(document.getElementById("start").value);
  49.                 if(income<start)
  50.                     document.getElementById("tax").value=0
  51.                 else{
  52.                     document.getElementById("tax").value=(income-start)*0.1
  53.                 }
  54.             }
  55.             function reset(){
  56.                 document.getElementById("tax").value="";
  57.                 document.getElementById("income").value="";
  58.                 document.getElementById("start").value="";
  59.             }
  60.         </script>
  61.     </body>
  62. </html>

实验截图

JavaEE-实验四 HTML与JSP基础编程的更多相关文章

  1. 2017-2018-2 20165215 实验四《Android开发基础》实验报告

    2017-2018-2 20165215 实验四<Android开发基础>实验报告 一.实验报告封面 课程:Java程序设计 班级:1652班 姓名:张家佳 学号:20165215 指导教 ...

  2. 20145212 实验四《Andoid开发基础》

    20145212 实验四<Andoid开发基础> 实验内容 安装Android Studio 运行安卓AVD模拟器 使用Android运行出模拟手机并显示自己的学号 实验过程 一.安装An ...

  3. 20145206实验四《Android开发基础》

    20145206 实验四<Android开发基础> 实验内容 ·安装Android Studio ·运行安卓AVD模拟器 ·使用安卓运行出虚拟手机并显示HelloWorld以及自己的学号 ...

  4. 2017-2018-2 20165237 实验四《Android开发基础》实验报告

    2017-2018-2 20165237 实验四<Android开发基础>实验报告 实验报告表头: No.1 实验要求: Android程序设计-1 实验要求: 参考<Java和An ...

  5. 2017-2018-2 20165236 实验四《Android开发基础》实验报告

    2017-2018-2 20165236 实验四<Android开发基础>实验报告 一.实验报告封面 课程:Java程序设计       班级:1652班       姓名:郭金涛     ...

  6. 2017-2018-2 20165306 实验四《Android开发基础》实验报告

    实验四<Android开发基础>实验报告 实验报告封面 实验内容 Android程序设计-1 实验要求: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java ...

  7. 2017-2018-2 20165207 实验四《Android开发基础》实验报告

    2017-2018-2 20165207 实验四<Android开发基础>实验报告 检查点1 安装测试Android Studio: 安装Android Studio 安装过程比较艰难,一 ...

  8. 20155229--Java实验四《Android开发基础》

    20155229 Java实验四<Android开发基础> 实验内容: 任务一: Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(E ...

  9. 20145209 实验四 《android开发基础》 实验报告

    20145209 实验四 <android开发基础> 实验报告 实验内容 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBI ...

随机推荐

  1. linux上搭建单机版hadoop和spark

    依赖的安装包 首先hadoop和spark肯定是必须的,而hadoop是用java编写的,spark是由Scala编写的,所以还需要安装jdk和scala. 大数据第三方组件我们统统都安装在/opt目 ...

  2. requests：用于发送http请求，专为人类设计

    介绍 requests模块是一个专门用来发送http请求的模块 如何发送请求 import requests """ 使用requests模块发送请求非常简单 首先请求有 ...

  3. 三，k8s集群的应用入门

    目录 kubernetes集群简单应用 kubectl常用命令: 创建pod service创建 测试其他pod通过series访问nginx 测试手动变更nginx对应的pod的ip pod和ser ...

  4. deepin下挂载的的Windows系统（NTFC）目录怎么是只读的？？？

    关键命令: df-h sudo ntfsfix /dev/sda4 重启 参考博客:深度官网问题之大神回复

  5. PhpStorm中如何使用database工具，详细操作方法

    1.简介:   PhpStorm是一个轻量级且便捷的PHP IDE,其提供的智能代码补全,快速导航以及即时错误检查等功能大大提高了编码效率.它以其独特的开发便利性,短时间内赢得了大量PHPer的青睐. ...

  6. 百度网盘，FTP上传异常、上传失败的解决办法

    若你的宽带上传上限速度为50KB,那么将百度网盘或FTP的上行速度调为50KB以下即可,就不会出现网络异常的情况了.

  7. Codeforces 837D - Round Subset DP

    先算出每个数的pop1(twonum),pop(fivenum)然后DP ans[i][j]表示选i个数有j个2时最多有多少个5 转移方程是 ;j--) { ;w++) { ans[j][w]=max ...

  8. Kendo UI for jQuery使用教程：操作系统/jQuery支持等

    [Kendo UI for jQuery最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support ...

  9. **JAVA参数传递方式 (按值传递与引用传递区别)

    https://blog.csdn.net/q5706503/article/details/82910428public class TestMain { public static void ma ...

  10. python深浅copy

    预备知识一——python的变量及其存储 在详细的了解python中赋值.copy和deepcopy之前,了解一下python内存中变量的存储情况. 在高级语言中,变量是对内存及其地址的抽象.对于py ...