国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

用JS寫一個計算器(兼容手機端)

mudiyouyou / 2912人閱讀

先看成果:
1.PC端

2.

首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數

</>復制代碼

  1. 瑞雪的計算器
  2. LRX
  3. temmo
  4. 987
    654
    321
    0.
  5. +-
    */

不過現在樣式還很亂,不適合繼續寫JS所以,我開始設計樣式,先在紙上畫一畫大概的樣子............
寫CSS代碼:

</>復制代碼

  1. body{
  2. margin: 0;
  3. background:#d67f5e;
  4. }
  5. header{
  6. text-align: center;
  7. background: rgb(121, 118, 138);
  8. margin-bottom: 50px;
  9. height: 40px;
  10. line-height: 40px;
  11. color: #fff;
  12. }
  13. header li{
  14. text-align: center;
  15. width: 10%;
  16. background: rgb(148, 75, 75);
  17. border-top-right-radius: 20px;
  18. border-bottom-right-radius: 20px;
  19. }
  20. header li:hover{
  21. position: relative;
  22. margin-top: -34px;
  23. transition: 0.5s;
  24. }
  25. table{
  26. text-align: center;
  27. }
  28. .calculator_box{
  29. width: 450px;
  30. height: 420px;
  31. background: rgb(112, 124, 152);
  32. margin: 0 auto;
  33. padding: 15px 0;
  34. border: 7px double #b0b0b0;
  35. border-radius: 30px;
  36. background-image: linear-gradient(to bottom, #5b7896, #00587b 32%);
  37. box-shadow: 0 3px 33px 8px rgba(22, 6, 6, 0.4), inset 0 0 28px 3px #4d4952;
  38. }
  39. .display{
  40. width: 90%;
  41. margin: 0 auto;
  42. height: 70px;
  43. background: rgb(204, 194, 192);
  44. border-radius: 8px;
  45. background-color: #3f3c3b;
  46. box-shadow: 0 0 0px 1px #252829;
  47. font-size: 40px;
  48. color:#ffffff;
  49. text-align: right;
  50. line-height: 70px;
  51. padding-right: 10px;
  52. }
  53. .function button{
  54. height: 30px;
  55. width: 60px;
  56. margin: 6px;
  57. border-radius: 15px;
  58. background-color: #b58068;
  59. color: white;
  60. text-shadow: 0 0 18px #2f2402;
  61. box-shadow: 0 0 0px 1px #4d4c51;
  62. }
  63. .number_box,.calculator,.music{
  64. display: inline-block;
  65. }
  66. .content{
  67. width: 90%;
  68. margin: 0 auto;
  69. position: relative;
  70. }
  71. .function{
  72. margin: 10px auto;
  73. width: 90%;
  74. margin: 13 auto;
  75. position: relative;
  76. }
  77. .music{
  78. border-top: 2px double #3c94c0;
  79. border-bottom:2px double #3c94c0;
  80. width: 250px;
  81. height: 5px;
  82. border-radius: 3px;
  83. }
  84. .number_box tr,.calculator tr{
  85. width: inherit;
  86. }
  87. .number_box td{
  88. width: 98px;
  89. height: 60px;
  90. background: rgb(235, 232, 233);
  91. border-radius: 5px;
  92. box-shadow: inset 0 0 7px 3px #c9c8c8;
  93. }
  94. .number_box td:active{
  95. background:#6c6a6a;
  96. box-shadow: inset 0 0 0px 0px #c9c8c8;
  97. transition: 0.5s;
  98. color: #fff;
  99. }
  100. .calculator{
  101. width: 88px;
  102. position: relative;
  103. top: -47px;
  104. text-align: center;
  105. font-size: x-large;
  106. }
  107. .calculator td{
  108. width: 44px;
  109. height: 72px;
  110. border-radius: 3px;
  111. text-shadow: 0px 0px 10px #1f1f1f;
  112. background-color: rgb(185, 185, 185);
  113. box-shadow: inset 0 0 8px 2px #9a9a9a;
  114. color: #ffffff;
  115. }
  116. .calculator td:active{
  117. box-shadow: inset 0 0 0px 0px ;
  118. background-color:#9c1414;
  119. transition: 0.5s;
  120. }
  121. #r_out{
  122. width: 86px;
  123. height: 100px;
  124. border-radius: 8px;
  125. margin-top: 2px;
  126. color: aliceblue;
  127. background-color: #b55f5f;
  128. text-shadow: 0 0 12px black;
  129. box-shadow: inset 0 0 20px 3px #876161;
  130. }
  131. #r_out:active{
  132. background-color:#55595e;
  133. box-shadow: inset 0 0 0px 0px;
  134. transition: 0.5s;
  135. }
  136. footer img{
  137. width: 302px;
  138. height: 267px;
  139. }
  140. footer img:hover{
  141. margin-right: -150px;
  142. transition: 0.5s
  143. }
  144. @media only screen and (max-width: 500px) {
  145. .calculator_box{
  146. width: 95%;
  147. height: 390px;
  148. margin: 0 auto;
  149. }
  150. .number_box td{
  151. width: 70px;
  152. height: 57px;
  153. }
  154. .calculator{
  155. margin-top: -47px;
  156. }
  157. .calculator td{
  158. width: 44px;
  159. height: 66px;
  160. }
  161. .music{
  162. width: 165px;
  163. }
  164. .content {
  165. width: 81%;
  166. margin: 0 auto;
  167. position: relative;
  168. }
  169. header li{
  170. border-radius: 0px;
  171. border-bottom-right-radius: 20px;
  172. border-bottom-left-radius: 20px;
  173. }
  174. }
  175. @media only screen and (max-width: 400px){
  176. .calculator_box{
  177. width: 95%;
  178. height: 390px;
  179. margin: 0 auto;
  180. }
  181. .number_box td{
  182. width: 57px;
  183. height: 57px;
  184. }
  185. .calculator{
  186. margin-top: -47px;
  187. margin-left: 3px;
  188. }
  189. .calculator td{
  190. width: 44px;
  191. height: 66px;
  192. }
  193. .music{
  194. width: 154px;
  195. }
  196. }
  197. @media only screen and (max-width: 360px){
  198. .content {
  199. width: 89%;
  200. }
  201. .calculator_box{
  202. width: 95%;
  203. height: 390px;
  204. margin: 0 auto;
  205. }
  206. .number_box td{
  207. width: 64px;
  208. height: 57px;
  209. }
  210. .calculator{
  211. display: inline-block;
  212. margin-top: -47px;
  213. margin-left: 2px;
  214. }
  215. .calculator td{
  216. width: 44px;
  217. height: 66px;
  218. }
  219. .music{
  220. width: 154px;
  221. }
  222. }
  223. @media only screen and (max-width: 320px){
  224. .number_box td{
  225. width: 53px;
  226. height: 57px;
  227. }
  228. }
用了好些個媒體查詢!手機端必須做好,因為計算器,手機用的比較多,所以響應式必須做好

最后就是JS代碼啦~

</>復制代碼

  1. window.onload = function() {
  2. FastClick.attach(document.body);
  3. }
  4. var display;
  5. var result="";
  6. var calresults;
  7. display=document.getElementById("dispaly");
  8. function calculator(){
  9. result+=event.srcElement.innerText;
  10. // alert(result);
  11. dispaly.innerText=result;
  12. }
  13. function resultscalcaulte(){
  14. var display=document.getElementById("dispaly");
  15. calresults=eval(result);
  16. display.innerText=calresults;
  17. }
  18. function empty(){
  19. result="";
  20. dispaly.innerText=result;
  21. }
  22. function back(){
  23. if (result!="") {
  24. result=result.substring(0, result.length - 1);
  25. dispaly.innerText=result;
  26. }
  27. }

然后就把計算器發給小伙伴們用吧!
不過在手機上按鍵會有延遲~正在解決ing

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112343.html

相關文章

  • JS一個算器兼容手機

    先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...

    shaonbean 評論0 收藏0
  • JS一個算器兼容手機

    先看成果:1.PC端showImg(https://segmentfault.com/img/bVRS4A?w=1896&h=914);2. showImg(https://segmentfault.com/img/bVRS4L?w=512&h=858); 首先確立html,有哪些東西我們要知道。布局大概的樣子在心里有個數 瑞雪的計算器 ...

    printempw 評論0 收藏0
  • 關于響應式布局,你必須要知道的

    摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

    Eirunye 評論0 收藏1
  • 關于響應式布局,你必須要知道的

    摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

    nevermind 評論0 收藏0
  • 關于響應式布局,你必須要知道的

    摘要:本文主要介紹一些響應式布局容易忽略但又很重要的知識點。單位不僅僅可以用來設置字號,還可以設置任何盒模型的屬性,比如有一點優勢就是可以和媒體查詢配合,實現響應式布局運用場景如果我們做的頁面只在移動端訪問,這是因為不兼容低版本的瀏覽器。 一、前言 響應式Web設計可以讓一個網站同時適配多種設備和多個屏幕,可以讓網站的布局和功能隨用戶的使用環境(屏幕大小、輸入方式、設備/瀏覽器能力)而變化。...

    amuqiao 評論0 收藏0

發表評論

0條評論

mudiyouyou

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<