Html+css+javaScript写一个手机模型版的简易计算器，求大家指导

最新推荐文章于 2023-04-14 19:55:48 发布
最新推荐文章于 2023-04-14 19:55:48 发布
阅读量899 收藏 3
点赞数
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_65657988/article/details/123346264
版权

       我只是一个计算机专业的大一小白，大家路过求不要喷呀，不过写的不好的地方欢迎大家指导。

首先是Html部分

<!DOCTYPE html>

<html lang="en">

<head>

 <title>简易计算器</title>

 <link rel="stylesheet" href="text.css">

</head>

<body>

 <div class="jisuan-box">

     <div class="head-box">

         <div class="head-circle1"></div>

         <div class="head-length"></div>

     </div>

     <div>

         <h1 class="Title">简易计算器</h1>

     </div>

     <div class="count-box">

         <hr>

         <div class="num1">

             <h3>输入第一个数:

                 <input class="enter" type="text" id="number1">

             </h3>

         </div>

         <hr>

         <div class="num1">

             <h3>输入第二个数:

                 <input class="enter" type="text" id="number2">

             </h3>

         </div>

         <hr>

         <div class="count">

             <h3>选择运算符号:

                 <input class="inPut" type="button" value="+" οnclick="mycount('+')">

                 <input class="inPut" type="button" value="-" οnclick="mycount('-')">

                 <input class="inPut" type="button" value="*" οnclick="mycount('*')">

                 <input class="inPut" type="button" value="/" οnclick="mycount('/')">

             </h3>

         </div>

         <hr>

         <div class="daAn">

             <h3>最终运算结果:

                 <input class="enter" type="text" id="answer">

             </h3>

         </div>

         <hr>

     </div>

     <div class="bottom-box">

         <div></div>

         <div>

             <input class="bottom-circle" type="button">

         </div>

         <div></div>

     </div>

 </div>

 <script src="text.js"></script>

</body>

</html>

然后是javaScript部分

function mycount(arise){

 var n1=Number(document.getElementById("number1").value);

    

 var n2=Number(document.getElementById("number2").value);

 

 var answer="";

 

 switch(arise){

    case"+":

    answer=n1+n2;break;

    case"-":

    answer=n1-n2;break;

    case"*":

    answer=n1*n2;break;

    case"/":

    answer=n1/n2;break;

    }

 

 document.getElementById("answer").value=answer;

        

}

最后是css代码修饰一下

.jisuan-box{

 width: 290px;

 height: 631px;

 border: 6px solid black;

 border-radius: 50px;

 margin:0px auto;

}

.head-box{

 width: 100px;

 height: 30px;

 margin-left: 90px;

 margin-top: 10px;

}

.head-circle1{

 width: 20px;

 height: 20px;

 background-color: black;

 border: 1px solid black;

 border-radius: 50%;

 float: left;

}

.head-length{

 width: 100px;

 height: 20px;

 background-color: black;

 border: 1px solid black;

 border-radius: 50px;

 margin-left: 30px;

}

.Title{

 text-align: center;

}

.count-box{

 width: 280px;

 height: 298px;

 border: 5px solid white;

}

.inPut{

 width:30px;

 height:30px;

 border-radius: 50%;

 margin: 1px;

}

.enter{

    width:130px;

    height:35px;

    border-radius:50px;

    font-size:25px;

    text-align:center;

}

hr{

 width: 100%;

}

.bottom-box{

 width: 260px;

 height: 30px;

}

.bottom-circle{

 width: 55px;

 height: 55px;

 border: 1px solid black;

 border-radius: 50%;

 margin-left:115px;

 margin-top: 136px;

}

最后的结果就是下图这样

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQXJjaGll57yW56iL,size_20,color_FFFFFF,t_70,g_se,x_16

        输入第一个数和第二个数后，再选择运算符，即可在最终运算结果中显示答案。

       底部的home键单纯是做一个摆设，如果有大家可以添加功能，比如清空输入的数字及答案这种，还请大家教教我怎么实现，头都想秃了已经。

从入门到放弃的编程
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用html+css+js实现简易计算器
办公研究所
07-22 688
使用html+css+js实现简易计算器，效果图如下： html代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible.
html+js+css实现简易计算器.rar
最新发布
05-18
通过这段简单的HTML、CSS和JavaScript代码，我们已经成功创建了一个基本的计算器。当然，这只是一个起点。你可以根据需要添加更多功能，比如支持更多的数学运算，或者改进用户界面。现在，打开你的文本编辑器，开始...
HTML实现手机端适配
qq_32998295的博客
07-15 4271
HTML实现手机端适配_大前端工程师的博客-CSDN博客_html适配手机屏幕
HTML作业-简易计算器
qq_40467855的博客
12-13 1472
使用eval()函数完成简单的四则运算。具体请看代码，菜鸡勿喷。
使用html+css+javaScript 完成计算器
weixin_69252724的博客
04-14 707
点击数字按键并不能将按键的内容放到文本域里。如果foreach忘记的兄弟们。
HTML+CSS+JavaScript写计算器
JIAY_WX的博客
07-21 1194
计算器
html实现计算器
zmk0820的博客
03-24 4554
html实现计算器
基于html+css+js实现简易计算器代码实例
10-15
在Web开发中，创建一个简易计算器是一种常见的实践，有助于初学者理解和掌握HTML、CSS以及JavaScript的基本用法。本篇将详细介绍如何利用这三种技术来实现一个功能简单的计算器。 首先，HTML（HyperText Markup ...
HTML+CSS+JS制作一个简单的计算器
09-19
在本项目中，我们将探讨如何使用HTML、CSS和JavaScript（简称JS）这三种核心技术来创建一个功能简单的计算器。HTML负责构建网页的结构，CSS用于美化界面，而JavaScript则赋予计算器计算的功能。 首先，HTML...
html+css+js实现简易计算器.zip
05-30
在本项目中，“html+css+js实现简易计算器.zip”是一个包含HTML、CSS和JavaScript代码的压缩包，用于创建一个简单的在线计算器应用。这个计算器能够执行基本的数学运算，如加、减、乘、除，为初学者展示了前端开发中...
纯CSS3实现苹果iphone6手机模型特效.zip
07-03
纯CSS3实现苹果iphone6手机模型特效是一款通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
HTML5devicemockupsv3利用HTML5创建一些流行移动设备外观模型
08-08
HTML5 device mockups v3 利用HTML5创建一些流行移动设备外观模型
纯CSS3+js写的小米手机的web版模型机（附加简单的电话功能）
08-06
自己用CSS3和jquery写的一个小米手机的模型机 里面手机的外形和小米LOGO还有下面的导航键完全是用CSS3写的 当然，屏幕上面的桌面背景是一张图片 【由于时间原因，我只在firefox高版本下面测试过】 下面是代码下载，本人是初学者，如果觉得写的不好的勿喷，欢迎拍砖指教
纯CSS3制作逼真的iphone 6手机模型
12-13
这是一款使用纯CSS3制作的逼真的iphone 6手机模型特效。该特效中通过简单HTML代码配合CSS3渐变等效果，制作出逼真的iphone6手机模型效果。
收集HTML5几十种超炫手机页面模版源码
10-29
收集HTML5几十种超炫手机页面模版源码
JavaScript，HTML制作简易图形化界面计算器
06-23
在本项目中，我们将探讨如何使用HTML、JavaScript和CSS技术创建一个基本的图形化界面计算器。这个计算器将能够执行常见的四则运算（加法、减法、乘法、除法）以及处理正负数的运算。以下是每个技术在实现过程中所...
CSS写一个手机
杨青青个人博客（青青本人）
03-04 1465
手机外形上来说就是长方形，然后加上圆角边框，如果是简单的平面图形，几分钟就可以用html标签和css写一个手机模型。但如果有高光，菱角等让手机展示的更逼真，可以用到css背景渐变属性。
纯html+css+js高仿苹果手机时钟小组件
wohaiyang的博客
08-24 372
话不多数说，这是一款用html+css+js开发的高仿苹果手机时钟组件，作者将苹果的小组件移植到浏览器插件中，可以在BdTab插件安装该组件。
手机端的html文件模拟运行
洋葱专栏-有灵魂的程序员
04-01 6086
设置的手机端的html5文件，模拟运行常用在谷歌浏览器：Google Chrome，打开开发者模式，点击菜单栏，有一个手机样式的，点击一下就手机样式了。在浏览器顶部还可以选择不同的手机进行模拟。但是模拟嘛，总是有些不准确。还是封装到本地，进行测试比较好。
用html和css做一个简易的计算器
05-29
好的，以下是一个简单的计算器的 HTML 和 CSS 代码示例： HTML代码： ``` <div class="calculator"> <input type="text" id="result" readonly> <button id="clear" onclick="clearResult()">C</button> <button onclick="appendToResult('7')">7</button> <button onclick="appendToResult('8')">8</button> <button onclick="appendToResult('9')">9</button> <button onclick="appendToResult('/')">/</button> <button onclick="appendToResult('4')">4</button> <button onclick="appendToResult('5')">5</button> <button onclick="appendToResult('6')">6</button> <button onclick="appendToResult('*')">*</button> <button onclick="appendToResult('1')">1</button> <button onclick="appendToResult('2')">2</button> <button onclick="appendToResult('3')">3</button> <button onclick="appendToResult('-')">-</button> <button onclick="appendToResult('0')">0</button> <button onclick="appendToResult('.')">.</button> <button onclick="calculate()">=</button> <button onclick="appendToResult('+')">+</button> </div> ``` CSS代码： ``` .calculator { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; margin: 20px auto; width: 200px; text-align: center; } .calculator button { font-size: 20px; background-color: #eee; border: none; cursor: pointer; padding: 10px; } .calculator button:hover { background-color: #ddd; } #result { font-size: 20px; padding: 10px; border: none; text-align: right; } ``` 该计算器使用了 HTML 的 `<button>` 和 `<input>` 元素，以及 CSS 的网格布局和样式来实现。JavaScript 代码需要根据 HTML 元素的 id 属性来实现计算器的基本功能，包括清除、输入数字和操作符、计算结果等。由于 JavaScript 代码不属于本次问题的范畴，这里就不提供代码示例了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值