HTML+CSS+JS制作简单计算器

最新推荐文章于 2023-04-14 19:55:48 发布

L_Monster66

最新推荐文章于 2023-04-14 19:55:48 发布

阅读量819

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/L_Monster66/article/details/106677444

版权

HTML+CSS+JS制作简单计算器

思路：把按钮输入的数据以字符串形式存储起来，再使用JS的eval()函数来计算字符串，最终在界面上显示出来。
代码如下：

<!DOCTYPE html>
<html>
<head>
	<title>计算器</title>
	<style type="text/css">
    		table{	
    			margin:0 auto;
    			border-collapse:collapse;
    			caption-side:top;
    			border-style: inset;
    			width: 365px;
    			height: 440px;
    		}
    		.tbs{
    			width: 73px;
    			height: 50px;
    			background-color : lightgray;
    			font-size: 1.6em;
    		}
    		.screen{
    			width: 420px;
            			height: 60px;
            			font-size: 2.0em;
            			color: white;
            			background-color: black;
            			text-align:right; 
    		}
      		.showtime{
       	 		width: 80px;
      	  		height: 20px;
        			background-color:lightgray; 
        			color: black;
        			font-size: 1.5em;
     		}

</style>
</head>
<body>
 <table bgcolor="Gray"  border="8">
	<caption style="font-size:30px">简易计算器</caption>
	<tr>
            <td colspan="5"><input class="screen" type="text" disabled /></td>
      	</tr>
      	<tr>
        	<td colspan="2" class="showtime" bgcolor="lightgray" id="showtime" align="center">00:00:00</td>
        	<

最低0.47元/天解锁文章

L_Monster66

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JS制作简单计算器

HTML+CSS+JS制作简单计算器思路：把按钮输入的数据以字符串形式存储起来，再使用JS的eval()函数来计算字符串，最终在界面上显示出来。代码如下：<!DOCTYPE html><html><head> <title>计算器</title> <style type="text/css"> table{ margin:0 auto; border-collapse:collap
复制链接

扫一扫