官方bilibiliWindows破解入门Android逆向入门
【网络诊断修复工具】切换到窄版

吾爱破解 - 52pojie.cn

 找回密码
 注册[Register]

QQ登录

只需一步，快速开始

吾爱破解 - 52pojie.cn»网站 › 【 软件安全 】 › 『编程语言区』 › 高仿mac计算器
12下一页
返回列表 发新帖
查看: 4771|回复: 19
收起左侧

[其他转载] 高仿mac计算器

[复制链接]
jiujiukeji
jiujiukeji 发表于 2018-11-28 18:15
本帖最后由 jiujiukeji 于 2018-11-28 21:10 编辑

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html lang='en' class=''>
<head>
<style class="cp-pen-styles">html {
  font-size: 62.5%;
  box-sizing: border-box;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

body {
  width: 100vw;
  min-height: 100vh;
  background: radial-gradient(50% 100%, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)), linear-gradient(90deg, rgba(50, 100, 170, 0.7) 1px, transparent 0), linear-gradient(180deg, rgba(50, 100, 170, 0.7) 1px, transparent 0), linear-gradient(90deg, rgba(50, 100, 170, 0.4) 1px, transparent 0), linear-gradient(180deg, rgba(50, 100, 170, 0.4) 1px, transparent 0), linear-gradient(90deg, #3264aa 2px, transparent 0), linear-gradient(180deg, #3264aa 2px, transparent 0), url("//images.pexels.com/photos/1540258/pexels-photo-1540258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260") no-repeat;
  background-color: #074b97;
  background-size: 100% 100%, 50px 50px,50px 50px,25px 25px,25px 25px,100px 100px, 100px 100px, cover;
  background-attachment: local;
  background-blend-mode: lighten;
  display: flex;
  justify-content: center;
  align-items: center;
}

.calculator {
  background: #1d1e22;
  padding: 2.8rem .64rem .64rem;
  color: white;
  border-radius: .5rem;
  box-shadow: 0 0.3rem 3rem 0.1rem rgba(0, 0, 0, 0.6);
  position: relative;
  min-width: 40rem;
}

.calculator-bar {
  display: grid;
  grid-template-columns: repeat(3, 1.4rem);
  grid-column-gap: .6rem;
  position: absolute;
  top: .64rem;
  left: .64rem;
}
.calculator-bar > div {
  cursor: pointer;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 100%;
  position: relative;
}
.calculator-bar > div::before, .calculator-bar > div::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  color: #1d1e22;
  opacity: 0;
  transition: opacity .2s linear;
}
.calculator-bar:hover div::before, .calculator-bar:hover div::after {
  transition: opacity .2s linear;
  opacity: 1;
}
.calculator-bar .close {
  background: #ff5a5a;
}
.calculator-bar .close::before {
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.calculator-bar .close::after {
  transform: translate(-50%, -50%) rotate(45deg);
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.calculator-bar .minimize {
  background: #5adc5a;
}
.calculator-bar .minimize::before {
  transform: translate(-50%, -50%);
  width: 1rem;
  height: 1px;
  background: currentColor;
}
.calculator-bar .maximize {
  background: #ffc85a;
}
.calculator-bar .maximize::before {
  border: 5px solid transparent;
  border-color: transparent transparent transparent currentColor;
  transform: translate(0%, -90%) rotate(-45deg);
}
.calculator-bar .maximize::after {
  border: 5px solid transparent;
  border-color: transparent currentColor transparent transparent;
  transform: translate(-90%, 0%) rotate(-45deg);
}

.calculator-display {
  font-size: 5rem;
  height: 80px;
  padding: 0 20px;
  background-color: #1d1e22;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

button {
  height: 60px;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  font-size: 2rem;
  color: #333;
  background-color: #fff;
  background-image: linear-gradient(to bottom, transparent, transparent 50%, rgba(0, 0, 0, 0.04));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 1px 0 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 0 rgba(255, 255, 255, 0.15), 0 1px 0 0 rgba(255, 255, 255, 0.15);
  text-shadow: 0 1px rgba(255, 255, 255, 0.4);
}
button:hover {
  background-color: #eaeaea;
}
button.operator {
  background-color: #eee;
  color: #337cac;
}
button.all-clear {
  background-color: #f0595f;
  border-color: #b0353a;
  color: #fff;
}
button.all-clear:hover {
  background-color: #f17377;
}
button.equal-sign {
  background-color: #2e86c0;
  border-color: #337cac;
  color: #fff;
}
button.equal-sign:hover {
  background-color: #4e9ed4;
}

.calculator-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2rem;
  padding: 2rem 1.36rem;
  background-color: #fff;
  border-radius: 0 0 .5rem .5rem;
}

.equal-sign {
  grid-row: 2 / span 4;
  grid-column: 4 / 5;
  height: 100%;
}
/*.clear{
    background-color: #4e9ed4;
}
button.clear:hover {
  background-color: #f17377;
}*/
</style></head><body>
<div class="calculator" id="calculator">
    <div class="calculator-bar">
        <div class="close" id="close"></div>
        <div class="minimize"></div>
        <div class="maximize"></div>
    </div>
 
    <div class="calculator-display" id="calculator-display">0</div>

    <div class="calculator-keys">
        <button type="button" class="operator" value="+" data-ops="+">+</button>
        <button type="button" class="operator" value="-" data-ops="-">-</button>
        <button type="button" class="operator" value="*" data-ops="*">×</button>
        <button type="button" class="operator" value="/" data-ops="/">÷</button>

        <button type="button" class="num" value="7" data-num="7" >7</button>
        <button type="button" class="num" value="8" data-num="8">8</button>
        <button type="button" class="num" value="9" data-num="9">9</button>
<!--         <button type="button" id="clear" class="clear">C</button> -->

        <button type="button" class="num" value="4" data-num="4">4</button>
        <button type="button" class="num" value="5" data-num="5">5</button>
        <button type="button" class="num" value="6" data-num="6">6</button>

        <button type="button" class="num" value="1" data-num="1">1</button>
        <button type="button" class="num" value="2" data-num="2">2</button>
        <button type="button" class="num" value="3" data-num="3">3</button>

        <button type="button" class="num" value="0" data-num="0">0</button>
        <button type="button" class="num" value="." data-num=".">.</button>
        <button type="button" class="all-clear" id="reset" value="all-clear">AC</button>
       
        <button type="button" id="equal-sign" class="equal-sign"  data-result="">=</button>
    </div>
</div>

</body></html>
<script>
(function () {
        "use strict";
        var el = function (element) {
            if (element.charAt(0) === "#") {
                return document.querySelector(element);
            }
            return document.querySelectorAll(element);
        };
        var viewer =el("#calculator-display") , equals = el("#equal-sign"), nums = el(".num"), ops = el(".operator"), theNum = "",close= el("#close"),
            oldNum = "", resultNum, operator;

        var setNum = function () {
            if (resultNum) {
                theNum = this.getAttribute("data-num");
                resultNum = "";
            } else {
                theNum += this.getAttribute("data-num");
            }
            viewer.innerHTML = theNum;
        };
        var moveNum = function () {
            oldNum = theNum;
            theNum = "";
            operator = this.getAttribute("data-ops");
            equals.setAttribute("data-result", "");

        };
        var turnOff = function() {
           // console.log(1)
             el('#calculator').setAttribute("style","display:none");
        };
        var displayNum = function () {
            oldNum = parseFloat(oldNum);
            theNum = parseFloat(theNum);
            switch (operator) {
                case "+":
                    resultNum = oldNum + theNum;
                    break;
                case "-":
                    resultNum = oldNum - theNum;
                    break;
                case "*":
                    resultNum = oldNum * theNum;
                    break;
                case "/":
                    resultNum = oldNum / theNum;
                    break;
                default:
                    resultNum = theNum;
            }
            if (!isFinite(resultNum)) {
                if (isNaN(resultNum)) {
                    resultNum = "You broke it!";
                } else {
                    resultNum = "Look at what you've done";
                    el('#calculator').classList.add("broken");
                    el('#reset').classList.add("show");
                }
            }
            viewer.innerHTML = resultNum;
            equals.setAttribute("data-result", resultNum);
            oldNum = 0;
            theNum = resultNum;
        };
        // var clearAll = function () {
        //     oldNum = "";
        //     theNum = "";
        //     viewer.innerHTML = "0";
        //     equals.setAttribute("data-result", resultNum);
        // };
        for (var i = 0, l = nums.length; i < l; i++) {
            nums[i].onclick = setNum;
        }
        for (var i = 0, l = ops.length; i < l; i++) {
            ops[i].onclick = moveNum;
        }
        equals.onclick = displayNum;
       // el("#clear").onclick = clearAll;
        close.onclick = turnOff;
        el("#reset").onclick = function () {
            window.location = window.location;
        };
    }());
</script>



效果图
QQ20181128-181518@2x.png

附件：
高仿mac计算器.rar (2.95 KB, 下载次数: 71)

免费评分

参与人数 2吾爱币 +2 热心值 +2 收起 理由
一笔画情 + 1 + 1 我很赞同！
邃空 + 1 + 1 我很赞同！

查看全部评分

发帖前要善用【论坛搜索】功能，那里可能会有你要找的答案或者已经有人发布过相同内容了，请勿重复发帖。
回复

举报

泳诗
泳诗 发表于 2018-11-28 18:27
向楼主学学。做得不错
【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
回复 支持

举报

hydswcxx
hydswcxx 发表于 2018-11-28 18:34
吾爱破解论坛没有任何官方QQ群，禁止留联系方式，禁止任何商业交易。
高仿。做的好
如何升级？如何获得积分？积分对应解释说明！
回复 支持

举报

peterq521
peterq521 发表于 2018-11-28 18:41
《站点帮助文档》有什么问题来这里看看吧，这里有你想知道的内容！
建议楼主放出成品 多谢
呼吁大家发布原创作品添加吾爱破解论坛标识！
回复 支持

举报

qzaqwxsw
qzaqwxsw 发表于 2018-11-28 18:47
我也希望楼主放出成品 ！
如何快速判断一个文件是否为病毒！
回复 支持

举报

jiujiukeji
 楼主| jiujiukeji 发表于 2018-11-28 19:21
qzaqwxsw 发表于 2018-11-28 18:47
我也希望楼主放出成品 ！

这个就是成品啊~~~
回复 支持

举报

jiujiukeji
 楼主| jiujiukeji 发表于 2018-11-28 19:22
peterq521 发表于 2018-11-28 18:41
建议楼主放出成品 多谢

这个就是成品啊~~~
回复 支持

举报

喵了个咪的
喵了个咪的 发表于 2018-11-28 19:31
1.png
嗯，我打开方式有问题
回复 支持

举报

阳光下的少年
阳光下的少年 发表于 2018-11-28 19:36
本帖最后由 阳光下的少年 于 2018-11-28 19:38 编辑

感谢分享，今晚回去研究一下
回复 支持

举报

qzaqwxsw
qzaqwxsw 发表于 2018-11-28 19:44
下载链接呢？
回复 支持

举报

下一页 »
12下一页
返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则


免责声明：
吾爱破解所发布的一切破解补丁、注册机和注册信息及软件的解密分析文章仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:Service@52pojie.cn

返回列表

RSS订阅|小黑屋|处罚记录|联系我们|吾爱破解 - LCG - LSG ( 京ICP备16042023号 | 京公网安备 11010502030087号 )

GMT+8, 2024-11-16 15:37

Powered by Discuz!

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表