本篇文章原创文章禁止抄袭和复制，否者必究。今天给大家讲解下，利用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计算器如下图：查看单个页面点击这里
完整的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> |