【JavaScript练习案例】网页计算器

最新推荐文章于 2024-09-02 08:59:04 发布

龍雅

最新推荐文章于 2024-09-02 08:59:04 发布

阅读量2.3k

点赞数 2

分类专栏： HTML页面设计案例文章标签：计算器案例 JavaScript事件机制冒泡机制 JavaScript练习案例 HTML CSS布局

本文链接：https://blog.csdn.net/Dragon_201314/article/details/81908594

版权

本文介绍了如何使用JavaScript实现一个网页计算器，包括CSS样式设计和HTML布局，讲解了JavaScript事件机制在计算器按键交互中的应用。

摘要由CSDN通过智能技术生成

要求：在网页上实现简单的计算器功能和界面

CSS样式代码：

<style>
   * {
	margin: 0;
	padding: 0;
    }
    #panel {
	width: 202px;
	height: 252px;
	margin: 30px auto;
	border: 3px solid #ccc;
    }
    #screen {
	width: 134px;
	height: 40px;
	margin: 5px;
	display: inline-block;
	border: 1px solid #ddd;
	line-height: 40px;
	padding-left: 3px;
	padding-right: 3px;
	text-align: right;
    }
    input[type="button"] {
	width: 40px;
	height: 40px;
	border: 1px solid #ddd;
	margin: 5px;
	font-family: "微软雅黑";
	font-size: 18px;
	font-weight: bold;
	}
    #panel div, p, input {
	float: left;
	}
</style>

JavaScript代码：

<script>
    window.onload = function(){
        //获取计算器面板
        var panel = document.getElementById("panel");
        //为计算面板动态添加单击事件
        panel.