CSS3-制作简单和科学的计算器

44 篇文章 1 订阅
34 篇文章 1 订阅

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">&gt;</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>&radic;</div></div>

<div><div class="calc-radxy">

<sup>x</sup><em>&radic;</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>&pi;</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>+/&#8211;</div></div>

<div class="calc-brown calc-f19"><div>&divide;</div></div>

<div class="calc-brown calc-f21"><div>&times;</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>&#8211;</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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值