前端项目

您所在的位置:网站首页 电脑计算器的代码怎么输入 前端项目

前端项目

2024-06-27 14:34| 来源: 网络整理| 查看: 265

网页计算器的设计与实现

该项目综合了HTML,CSS和JavaScript三种技术,是前端技术的一个简单练习。复习前端知识的时候,可以综合案例进行复习。

设计细节: (1)HTML:

使用HTML,设计网页计算器的框架,首先用div标签在网页中确定算器一块地方,用于设计计的面板,在该div区域,设置用于显示的text标签,以及承载数字和运算符的button按钮。

(2)CSS:

使用CSS,设计搭建好的HTML标签显示样式,使用标签选择器对计算器的div标签(计算器页面)设置显示样式,使用属性选择器,对计算器的input标签下text属性(显示文本框),input标签下button属性(数字和运算符按钮)设置显示样式。

(3)JavaScript:

使用JavaScript完成计算器的业务逻辑,首先获取button按钮的属性值,根据button按钮属性值的不同执行不同的业务逻辑,如果button按钮的属性值是数字或运算符,则直接显示在文本框中;如果button按钮的属性值是“=”,则计算结果,并将结果显示到文本框中;如果button按钮的熟悉至是“C”,则清空显示文本框。

详细代码: 计算器 /*设置div样式*/ #showdiv{ border: solid 1px; border-radius: 10px;/*设置边框角度*/ width: 320px; height:400px; text-align: center; margin: auto;/*设置居中*/ margin-top: 50px; background-color: floralwhite; } /*设置输入框样式*/ input[type=text]{ margin-top: 20px; width: 290px; height: 40px; font-size: 20px; } /*设置按钮样式*/ input[type=button]{ width: 60px; height: 60px; margin-top: 20px; margin-left: 5px; margin-right: 5px; font-size: 30px; font-weight: bold; font-family: "萝莉体 第二版"; } //声明函数 function test(btn){ //获取button按钮对象的value值 var num=btn.value; //根据用户点击动作执行对应的业务逻辑 switch (num){ case "=": document.getElementById("inp").value=eval(document.getElementById("inp").value); break; case "c": document.getElementById("inp").value=""; break; default: //将按钮的值赋值给input输入框 document.getElementById("inp").value=document.getElementById("inp").value+num; break; } }

 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3