CSS3-製作簡單和科學的計算器
如果瀏覽不順暢請到 原文章出處：https://www.sky8g.com/css3-make-calculator/
請注意可能會提示風險，這是csdn設置網站設置的問題，請放心訪問，謝謝。
https://www.sky8g.com/css3-make-calculator/
本篇文章原創文章禁止抄襲和複製，否者必究。今天給大家講解下，利用css3製作計算器，此計算器包括簡單和科學的計算，供大家使用。我們使用CalcSS3，CalcSS3是一個基於CSS的簡單科學的計算器，您可以很容易地將其集成到您的網站中。它是iPhone計算器的克隆，不使用任何圖像。
如何使用計算器組件
首先下載全部代碼包：下載地址點擊此處 ，下載後主要有CalcSS3.css 和CalcSS3.js兩部分組成
首先在html標籤head裏面引入CalcSS3.css如下代碼：
|
1 |
<link href=”css/CalcSS3/CalcSS3.css” rel=”stylesheet” type=”text/css” /> |
其次在引入CalcSS3.js代碼
|
1 |
<script type=”text/javascript” src=”js/CalcSS3/CalcSS3.js”></script> |
演示簡單和科學的CSS計算器如下圖：查看演示請去原網站
點擊：www.sky8g.com/css3-make-calculator/
完整的HTML代碼如下：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8">
<meta name="Description" content="Scientific/simple JavaScript calculator, CSS3 remake of iPhone™ calculator." /> <meta name="Keywords" content="Scientific, calculator, Calc, javaScript, mathematics, realtime, application, program, programming, skin" /> <meta name="author" content="Peter Dematté" /> <link rel="shortcut icon" href="https://www.sky8g.com/favicon.ico" />
<link href="CalcSS3.css" rel="stylesheet" type="text/css" /> <link href="index.css" rel="stylesheet" type="text/css" />
<title>Calculator - CalcSS3</title> </head> <body> <div class="calc-main"> <div class="calc-display"> <span>0</span> <div class="calc-rad">Rad</div> <div class="calc-hold"></div> <div class="calc-buttons"> <div class="calc-info">?</div> <div class="calc-smaller">></div> <div class="calc-ln">.</div> </div> </div> <div class="calc-left"> <div><div>2nd</div></div> <div><div>(</div></div> <div><div>)</div></div> <div><div>%</div></div> <div><div>1/x</div></div> <div><div>x<sup>2</sup></div></div> <div><div>x<sup>3</sup></div></div> <div><div>y<sup>x</sup></div></div> <div><div>x!</div></div> <div><div>√</div></div> <div><div class="calc-radxy"> <sup>x</sup><em>√</em><span>y</span> </div></div> <div><div>log</div></div> <div><div>sin</div></div> <div><div>cos</div></div> <div><div>tan</div></div> <div><div>ln</div></div> <div><div>sinh</div></div> <div><div>cosh</div></div> <div><div>tanh</div></div> <div><div>e<sup>x</sup></div></div> <div><div>Deg</div></div> <div><div>π</div></div> <div><div>EE</div></div> <div><div>Rand</div></div> </div> <div class="calc-right"> <div><div>mc</div></div> <div><div>m+</div></div> <div><div>m-</div></div> <div><div>mr</div></div> <div class="calc-brown"><div >AC</div></div> <div class="calc-brown"><div>+/–</div></div> <div class="calc-brown calc-f19"><div>÷</div></div> <div class="calc-brown calc-f21"><div>×</div></div> <div class="calc-black"><div>7</div></div> <div class="calc-black"><div>8</div></div> <div class="calc-black"><div>9</div></div> <div class="calc-brown calc-f18"><div>–</div></div> <div class="calc-black"><div>4</div></div> <div class="calc-black"><div >5</div></div> <div class="calc-black"><div>6</div></div> <div class="calc-brown calc-f18"><div>+</div></div> <div class="calc-black"><div>1</div></div> <div class="calc-black"><div>2</div></div> <div class="calc-black"><div>3</div></div> <div class="calc-blank"><textarea></textarea></div> <div class="calc-orange calc-eq calc-f17"><div> <div class="calc-down">=</div> </div></div> <div class="calc-black calc-zero"><div> <span>0</span> </div></div> <div class="calc-black calc-f21"><div>.</div></div> </div> </div>
<script type="text/javascript" src="CalcSS3.js"></script> </body> </html> |