介绍 & lt; style>
* {
保证金:0;
填充:0;
}
{#面板
宽度:202 px;
身高:252 px;
保证金:30 px汽车;
边界:3 px固体# ccc;
}
#{屏幕
宽度:134 px;
高度:40像素;
保证金:5 px;
显示:inline-block;
边界:1 px固体# ddd;
行高:40像素;
padding-left: 3 px;
padding-right: 3 px;
text-align:正确;
}
输入(type=癰utton") {
宽度:40像素;
高度:40像素;
边界:1 px固体# ddd;
保证金:5 px;
字体类型:“微软雅黑“;
字体大小:18 px;
粗细:大胆的;
}
#面板div、p、输入{
浮:左;
}
& lt;/style> & lt; script>
窗口。onload=function () {//获取计算器面板
var面板=. getelementbyid (“panel");//为计算面板动态添加单击事件
面板。onclick=function (e) {//参数e用来接收事件对象//获取所有输入元素
var输入=e.toElement;//获取P元素
屏幕var=. getelementbyid (“screen");
如果输入。类型==癰utton") {//如果获取到的是输入元素,则开始执行运算逻辑
如果输入。值=https://www.yisu.com/zixun/=癈”) {
屏幕上。innerHTML=" ";
如果(输入其他}。值=="="){
尝试{
屏幕上。innerHTML=eval (screen.innerHTML);
}捕捉(特异){
屏幕上。innerHTML=按砦蟆?
}
其他}{
屏幕上。innerHTML +=inputs.value;
}
其他}{//如果单击的地方不是输入元素,则程序不回应
返回;
}
}
}
& lt; body>
& lt; div id=皃anel"祝辞
& lt; div>
& lt; p id=皊creen"祝辞& lt;/p>
& lt;输入类型=癰utton"值=https://www.yisu.com/zixun/" C "/>
这篇文章运用简单易懂的例子给大家介绍使用JavaScript实现一个网页计算器功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
<强>要求:在网页上实现简单的计算器功能和界面
CSS样式代码:
JavaScript代码:
HTML代码:
