当前位置：首页 > 网页特效 > 其他

简单的Material Design风格计算器

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

在页面的head中引入bootstrap.min.css，creative.min.css以及谷歌Roboto字体文件。

```html
<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/creative.min.css">
```
在页面底部引入jquery，bootstrap.min.js和calculate.js文件。

```html
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/calculate.js"></script>   
```       
#####  HTML结构
该计算器的基本HTML结构如下：

```html
<div class="container">
  <div class="col-md-4 col-md-offset-4 calculator" align="center">
    <div class="row displayBox">
      <p class="displayText" id="display">0</p>
    </div>
    <div class="row numberPad">
      <div class="col-md-9">
        <div class="row">
          <button class="btn clear hvr-back-pulse" id="clear">C</button>
          <button class="btn btn-calc hvr-radial-out" id="sqrt">√</button>
          <button class="btn btn-calc hvr-radial-out hvr-radial-out" id="square">x<sup>2</sup></button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="seven">7</button>
          <button class="btn btn-calc hvr-radial-out" id="eight">8</button>
          <button class="btn btn-calc hvr-radial-out" id="nine">9</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="four">4</button>
          <button class="btn btn-calc hvr-radial-out" id="five">5</button>
          <button class="btn btn-calc hvr-radial-out" id="six">6</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="one">1</button>
          <button class="btn btn-calc hvr-radial-out" id="two">2</button>
          <button class="btn btn-calc hvr-radial-out" id="three">3</button>
        </div>
        <div class="row">
          <button class="btn btn-calc hvr-radial-out" id="plus_minus">±</button>
          <button class="btn btn-calc hvr-radial-out" id="zero">0</button>
          <button class="btn btn-calc hvr-radial-out" id="decimal">.</button>
        </div>
      </div>
      <div class="col-md-3 operationSide">
        <button id="divide" class="btn btn-operation hvr-fade">÷</button>
        <button id="multiply" class="btn btn-operation hvr-fade">×</button>
        <button id="subtract" class="btn btn-operation hvr-fade">−</button>
        <button id="add" class="btn btn-operation hvr-fade">+</button>
        <button id="equals" class="btn btn-operation equals hvr-back-pulse">=</button>
      </div>
    </div>
  </div>
</div>  
```

web299.com

简单的Material Design风格计算器

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果