今天就跟大家聊聊有關使用JS實現多功能計算器,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結了以下內容,希望大家根據這篇文章可以有所收獲。
創新互聯服務電話:18982081108,為您提供成都網站建設網頁設計及定制高端網站建設服務,創新互聯網頁制作領域十多年,包括電動窗簾等多個方面擁有多年的營銷推廣經驗,選擇創新互聯,為企業保駕護航。compute.html:
<!-- * @Author: CSU_XZY * @Date: 2020-10-15 21:17:33 * @LastEditors: CSU_XZY * @LastEditTime: 2020-10-16 22:07:08 * @FilePath: \第二天\計算器\compute.html * @Description: just to play --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>計算器</title> </head> <style> *{ margin: 0; padding: 0; } body{ background-color: #FCFDFE; } .container{ overflow: hidden; box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3); margin: 150px auto; width: 548px; height: 274px; background-color: #fff; } .box{ background-color: #fcfdff; margin: 15px auto; overflow: hidden; width: 514px; height: 244px; } .number{ width: 514px; height: 189px; } .text{ width: 514px; height: 55px; margin: 0; } span{ border-top: solid 1px #ebebeb; border-right: solid 1px #ebebeb; box-sizing: border-box; float: left; display: block; width: 25%; font-size: 16px; color: #333; background-color: #fff; line-height: 37px; cursor: pointer; text-align: center; font-weight: 10px; } span:hover{ background-color: #d3d7d4; } span:active{ background-color: #afdfe4; } .text>p{ text-align: right; width: 514px; height: 24px; line-height: 25px; font-size: 25px; } .number>div{ width: 514px; height: 37.8px; } .around{ background-color: #f9f9f9; color: #f60; } .compute{ color: #333; } .bottom{ background-color: #fff; color: #f60; } .dot{ font-size: 23px; font-weight: 19px; } </style> <body> <div class="container"> <div class="box"> <div class="text"> <p id="text"></p> <p id="display"></p> </div> <div class="number"> <div class="around"> <span onclick="showDetails(this)" data-value="(" class="around">(</span> <span onclick="showDetails(this)" data-value=")" class="around">)</span> <span onclick="showDetails(this)" data-value="D" title="回退一位數" class="around">del</span> <span onclick="showDetails(this)" data-value="C" class="around compute">C</span> </div> <div> <span onclick="showDetails(this)" data-value="7">7</span> <span onclick="showDetails(this)" data-value="8">8</span> <span onclick="showDetails(this)" data-value="9">9</span> <span onclick="showDetails(this)" data-value="÷" class="around">÷</span> </div> <div> <span onclick="showDetails(this)" data-value="4">4</span> <span onclick="showDetails(this)" data-value="5">5</span> <span onclick="showDetails(this)" data-value="6">6</span> <span onclick="showDetails(this)" data-value="x" class="around">x</span> </div> <div> <span onclick="showDetails(this)" data-value="1">1</span> <span onclick="showDetails(this)" data-value="2">2</span> <span onclick="showDetails(this)" data-value="3">3</span> <span onclick="showDetails(this)" data-value="-" class="around">-</span> </div> <div> <span onclick="showDetails(this)" data-value="0">0</span> <span onclick="showDetails(this)" data-value="." class="around bottom dot">.</span> <span onclick="showDetails(this)" data-value="=" class="around bottom">=</span> <span onclick="showDetails(this)" data-value="+" class="around">+</span> </div> </div> </div> </div> </body> <script type="text/javascript" src="compute.js"></script> </html>
網頁題目:使用JS實現多功能計算器-創新互聯
轉載來于:http://vcdvsql.cn/article12/epcgc.html
成都網站建設公司_創新互聯,為您提供網站制作、App開發、品牌網站制作、靜態網站、網站內鏈、App設計
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯