HTML5 与css 之计算器

最新推荐文章于 2024-05-10 11:30:24 发布
最新推荐文章于 2024-05-10 11:30:24 发布
阅读量731 收藏 9
点赞数
分类专栏： 日常题目
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tututupro/article/details/94574543
版权

计算器外形以苹果手机自带计算器（以下为参考标准）
在这里插入图片描述
以此做参照进行css 的编写，在完成之后为了添加功能，在按键与输出框之间加上了类似导航栏的三角函数计算、记忆功能、对数函数计算等。

以下为源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style type="text/css">
        .dropbtn {
            background-color: #333333;
            color: white;

            font-size: 16px;
            border: none;
            cursor: pointer;
        }

        /* 容器 <div> - 需要定位下拉内容 */
        .dropdown {
            position: relative;
            display: inline-block;
            float: bottom;
        }

        /* 下拉内容 (默认隐藏) */
        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        }

        /* 下拉菜单的链接 */


        /* 鼠标移上去后修改下拉菜单链接颜色 */
        .dropdown-content input:hover {background-color: #333333}

        /* 在鼠标移上去后显示下拉菜单 */
        .dropdown:hover .dropdown-content {
            display: block;
        }

        /* 当下拉内容显示后修改下拉按钮的背景颜色 */
        .dropdown:hover .dropbtn {
            background-color: black;
        }
        input{
            float: left;
            height: 70px;
            width: 70px;
            border-radius: 100px;
            font-size: 25px;
            margin: 15px;

        }
        input.num{
            color:white;
            background-color: #333333;
        }
        input.calculate{
            color:white;
            background-color: orange;
        }
        input.funcs{
            background-color: #999999;
        }
        div.look{
            position:absolute;top:20px;padding:20px;width: 400px; height: 800px;background-color: #222222;border-radius: 40px;
        }
        input.data1{
            width: 400px;
            height:200px;
            background-color: #222222;
            border:none;
            float:left;
            color:white;
            float: bottom;
            text-align: right;
            font-size: 30px;
        }

    </style>
    <script language="JavaScript">
    var number = 0;
    var remember = null;
    function calc(number) {
        if(number == "%"){
            document.getElementById('data').value = Math.round(document.getElementById('data').value)/100;
        }
        else{
            document.getElementById('data').value += document.getElementById(number).value;
        }
    }
    function eva() {
        document.getElementById('data').value = eval(document.getElementById('data').value);
    }
    function clearNum() {
        document.getElementById('data').value = null;
        document.getElementById('data').focus();
    }
    function tuiGe() {
        var arr = document.getElementById("data");
        arr.value = arr.value.substring(0,arr.value.length-1);
    }
    function ex() {
        document.getElementById('data').value = -document.getElementById('data').value;
    }
    function log2x() {
        document.getElementById('data').value = Math.log2(document.getElementById('data').value);
    }
    function log10x() {
        document.getElementById('data').value = Math.log10(document.getElementById('data').value);
    }
    function tan() {
        document.getElementById('data').value = Math.tan(document.getElementById('data').value);
    }
    function sin() {
        document.getElementById('data').value = Math.sin(document.getElementById('data').value);
    }
    function cos() {
        document.getElementById('data').value = Math.cos(document.getElementById('data').value);
     }
    function ln() {
        document.getElementById('data').value = Math.log(document.getElementById('data').value);
    }
    function m1() {
        remember = document.getElementById('data').value;
        window.alert("记录成功！");
    }
    function m2() {
        document.getElementById('data').value = remember;
    }
    function m3() {
        remember = null;
    }
    function zhi2() {
        document.getElementById('data').value = Math.pow(document.getElementById('data').value,2);
    }
    function zhi3() {
        document.getElementById('data').value = Math.pow(document.getElementById('data').value,3);
    }
    function zhi05() {
        document.getElementById('data').value = Math.pow(document.getElementById('data').value,0.5);
    }

    </script>
</head>
<body>
    <div class="look">
        <div class="shuru">
            <input type="text" class="data1" id="data"></input>
        </div>
        <div class="dropdown">
            <button class="dropbtn">△</button>
            <div class="dropdown-content">
                <input type="button" class="calculate" value="tan" onclick="tan()">
                <input type="button" class="calculate" value="sin" onclick="sin()">
                <input type="button" class="calculate" value="cos" onclick="cos()">
            </div>

        </div>
        <div class="dropdown">
            <button class="dropbtn">lg</button>
            <div class="dropdown-content">
                <input type="button" class="calculate" value="log2" onclick="log2x()">
                <input type="button" class="calculate" value="log10" style="font-size: 15px" onclick="log10x()">
                <input type="button" class="calculate" value="ln" onclick="ln()">
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">#</button>
            <div class="dropdown-content">
                <input type="button" class="calculate" value="(" id="(" onclick="calc(this.id)">
                <input type="button" class="calculate" value=")" id=")" onclick="calc(this.id)">
                <input type="button" class="calculate" value="+/-" onclick="ex()">
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">指数</button>
            <div class="dropdown-content">
                <input type="button" class="calculate" value="2次" onclick="zhi2()">
                <input type="button" class="calculate" value="√" onclick="zhi05()">
                <input type="button" class="calculate" value="3次" onclick="zhi3()">
            </div>
        </div>
        <div class="dropdown">
            <button class="dropbtn">M</button>
            <div class="dropdown-content">
                <input type="button" class="calculate" value="M+" onclick="m1()">
                <input type="button" class="calculate" value="Mr" onclick="m2()">
                <input type="button" class="calculate" value="MC" onclick="m3()">
            </div>
        </div>
        <div id="keys" >
            <input type="button" id="AC" class="funcs" value="AC" onclick="clearNum()"></input>
            <input type="button" id="tui" class="funcs" value="←" onclick="tuiGe()"></input>
            <input type="button" class="funcs" value="%" id="%" onclick="calc(this.id)"></input>
            <input type="button" class="calculate" value="/" id="/" onclick="calc(this.id)" style="font-size: 30px"></input>

            <input type="button" class="num" value="7" id="7" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="8" id="8" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="9" id="9" onclick="calc(this.id)"></input>
            <input type="button" class="calculate" value="*" id="*" onclick="calc(this.id)" style="font-size: 30px"></input>
            <input type="button" class="num" value="4" id="4" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="5" id="5" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="6" id="6" onclick="calc(this.id)"></input>
            <input type="button" class="calculate" value="-" id="-" onclick="calc(this.id)" style="font-size: 30px"></input>
            <input type="button" class="num" value="1" id="1" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="2" id="2" onclick="calc(this.id)"></input>
            <input type="button" class="num" value="3" id="3" onclick="calc(this.id)"></input>
            <input type="button" class="calculate" value="+" id="+" onclick="calc(this.id)" style="font-size: 30px"></input>
            <input type="button" class="num" value="0" id="0" onclick="calc(this.id)" style="width: 170px"></input>
            <input type="button" class="num" value="." id="." onclick="calc(this.id)"></input>
            <input type="button" class="calculate" value="=" id="eva" onclick="eva()"></input>

        </div>
    </div>

</div>


</body>
</html>

实现效果：
在这里插入图片描述
在这里插入图片描述

tututupro
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css 与 html5
corn6的博客
11-28 107
折叠隐藏文字 快捷键：span*6，然后敲一个tap键，会生成6个span标签 写业务style之前，需要先清除style的内置样式 也就是在style里面写上* {margin: 0;padding: 0;} 注意body的height:100vh;不要写100% 弹性盒子能使子元素垂直居中的条件：弹性盒子本身具备高度 使用>直接控制子元素，而不会影响到孙元素 body { background-color:#003a8c; width: 100%
html网页访问计数器,HTML添加网站计数器(Cookie)
weixin_39750731的博客
06-15 607
Cookie 计数器function www_helpor_net(offset){var endstr=document.cookie.indexOf(";",offset);if(endstr==-1)endstr=document.cookie.length;return unescape(document.cookie.substring(offset,endstr));}function...
毕业季，作为程序员（it软件开发工程师），如何培养强大的解决问题的能力
南北极之间
08-12 1859
例如，如果一个孩子试图弄清楚如何打开一个玩具盒，他或她可能会尝试各种方法（例如，拉，推，举），直到找到正确的方法。良好的解决问题的能力包括能够创造性地和分析性地思考，将问题分解成更小的部分，并使用系统的方法找到解决方案。递归涉及将问题分解为较小的子问题，解决每个子问题，然后将子问题的解决方案组合在一起以解决更大的问题。另一个常见的例子是使用算法，例如快速排序算法，它将问题分解成更小的部分，解决每个部分，然后将解决方案组合到各个部分以解决更大的问题。如果你想成功，你需要有很强的解决问题的能力。........
探索计算之美：HTML & CSS 计算器案例
最新发布
五指山的网络员
05-10 424
计算器案例代码，HTML+CSS
HTML5 实现对用户访问某一页面进行计数
在代码身上，用心去飞翔
10-23 8344
HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储 localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。 sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据
HTML5 利用localStorage对页面访问量计数
winbobob的专栏
05-26 5327
if (localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount) +1; } else { localStorage.pagecount=1; } document.write("Visits: " + localStorage.pagecount + " time(s).");
html网站计数器代码,如何在网站添加计数器代码
weixin_36318586的博客
06-09 1156
在网站添加计数器代码放置计数器代码到网页当中，才能统计网站的访问情况。在这里需要注意一点的是：每个页面都需要放置这个代码，才能统计到每个页面。那么如何放置这个代码每个页面呢?在我们的网站系统后台将会很容易做到。步骤如下：1、登录系统，在前面有介绍过如何登录系统后台，这里就不重复了。2、点击导航菜单中的“标签”。3、在打开的页面下面，选择编码为“5”的{My:copyright}标签，这个标签是用来...
html5+css3计算器样式代码.zip
11-18
在这个“html5+css3计算器样式代码.zip”压缩包中，我们很显然会找到一个使用这些技术实现的计算器示例。这个计算器可能是一个静态的模拟计算器，也可能是具有实际计算功能的交互式应用。下面我们将详细探讨这些知识...
html5 css3响应式彩色计算器动画特效
11-24
在这个"html5 css3响应式彩色计算器动画特效"项目中，我们将深入探讨如何利用这两者来构建一个功能齐全且具有动态视觉效果的彩色计算器。 首先，HTML5（超文本标记语言第五版）是网页内容的结构框架，它引入了新的...
纯 HTML+CSS+JavaScript 的计算器
01-21
需求：制作web版计算器，要求实现+-*%和平方，开方。 2.0版：修复归零的问题 3.0版：支持正负数； 4.0版：修复多个多个运算符号导致不能计算的bug; 5.0版： 多个小数点的bug， 自然数e的问题， 0.1，0.2，0.04等...
Html+CSS+JS网页计算器
04-21
在这个“Html+CSS+JS网页计算器”项目中，我们将探讨如何使用这三种语言来设计一个功能完备的在线计算器。 首先，HTML（HyperText Markup Language）是网页内容的结构框架。在创建网页计算器时，我们需要定义各种...
基于html+css+js实现简易计算器代码实例
10-15
【基于HTML+CSS+JS实现简易计算器代码实例详解】 在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能...
html5计数器,CSS 计数器(counter)
weixin_39716044的博客
06-18 385
带计数器的自动编号CSS计数器就像“变量”。变量值可以通过CSS规则递增(它将跟踪它们被使用的次数)。要使用CSS计数器，我们将使用以下属性：counter-reset - 创建或重置计数器counter-increment - 增加计数器值content - 插入生成的内容counter()或counters()函数 - 将计数器的值添加到元素要使用CSS计数器，必须首先使用counter-re...
html+css+js实现简易计算器
热门推荐
weixin_45118138的博客
05-02 1万+
使用JavaScript制作一个简单的计算器 直接看效果，这个计算器可以实现简单的加减乘除 1、首先编辑HTML样式，把计算机上的按键全部打印出来 可以显示出以下结果 2、添加css样式 先设置a元素定宽定高，然后左浮动，在微调宽度和高度，使其到达一个合理布局的值 3、编写js代码 写一个for循环，不断接收a点击事件。 编写点击result，点击清零。 3. 点击数字，获取num1和num2的值。 4.获取按键加减乘除，记录下符号 5....
html 计算宽度,巧用CSS3的calc()宽度计算做响应模式布局
weixin_34966742的博客
06-26 525
于是就研究了一下，calc()从字面我们可以把他理解为一个函数function。其实calc是英文单词calculate(计算)的缩写，是css3的一个新增的功能，用来指定元素的长度。比如说，你可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。为何说是动态值呢?因为我们使用的表达式来得到的值。不过calc()最大的好处就是用在流体...
html5的calc,CSS 计算属性 calc()的完整指南（下）
weixin_28950415的博客
06-17 963
calc() 只作用于属性值calc() 用于长度和其他数值不能在媒体查询中使用混合单位与预处理器数学比较本文接着之前未完的工作，恰好是周末，一次把它完成。如果我的工作对你有帮助，希望可以点个赞和收藏分享。显示数学即使你没有使用只有calc()才能实现的功能，也可以用它在CSS里面 "展示你的工作"。例如，假设你需要精确计算一个元素的1⁄7的宽度......。.el {/* This is eas...
html5设置计数器
wu_xiao_qing的博客
04-10 2883
if(localStorage.pagecount) { localStorage.pagecount=Number(localStorage.pagecount)+1; } else{ localStorage.pagecount=1; } document.write("总访问数:" + localStorage.pagecount); if(sessionStorage
HTML 网页计数器
qq_40307529的博客
07-06 1万+
初学HTML一个简单的网页计数器，可以实现计数的功能代码如下：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;初学者(www.phplearn.cn)&lt;/title&gt; &lt;script&gt; var c=0; var t;
用HTML实现计数器功能
jisuanji_qiyongjie的博客
08-29 8598
在许多的网页中，我们都会看到计数器以及时钟，那么我们怎么自己实现着种功能呢？ 先说计数器，计数器的逻辑功能很简单，就是秒针每秒加一，逢60进一就可以。代码如下： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &
html+css简单计算器
10-17
好的，以下是一个简单的 HTML + CSS 实现的计算器，你可以在浏览器中打开查看效果： ```html <!DOCTYPE html> <html> 简单计算器 <style type="text/css"> body { background-color: #f2f2f2; font-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值