HTML+CSS+JavaScript实现简易计算器

最新推荐文章于 2024-03-27 22:04:57 发布

Solitary_Jsx

最新推荐文章于 2024-03-27 22:04:57 发布

阅读量371

点赞数 1

本文链接：https://blog.csdn.net/weixin_44362135/article/details/105098158

版权

HTML+CSS+JavaScript实现简易计算器
成果展示
在这里插入图片描述
代码展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
    <title>计算器</title>
    <style>
		*{
			margin: 0;
			padding: 0;
			border: 0;
		}
        #Boundary{
			height: 100vh; 
			width: 100vw
            background-color: white;
        }
        #Boundary #Screen{
            position: relative;
            display: block;
            width: 100%;
            height: 36vh;
            overflow: hidden;		
        }
        #Boundary #Screen #showIntput {
            position: absolute;
            left: 5px;
            top: 5px;
            right: 5px;
            font-size: 40px;
			content: editable;
        }
        #Boundary #Screen #showOutput {
            position: absolute;
            bottom: 5px;
            right: 5px;
            text-align: right;
            font-size: 30px;
        }
        td{
			border: 1px solid #ccc; 
            width:calc(25vw - 2px);
            height: calc(13vh - 13px);
            border-radius: 5px 5px 5px 5px;
            text-align: center;	
        }
        span{
            font-size: 15px;
        }
    </style>
</head>
<body id="Boundary">
    <div id="Screen">
        <div id="showIntput" contenteditable="true"></div>
        <div id="showOutput" ></div>
    </div>
    <div>
        <table  border="0" cellspacing="8px">
            <tr>
                <td onclick="num('+')"><span>+</span></td>
                <td onclick="num('-')"><span>-</span></td>
                <td onclick="num('*')"><span>*</span></td>
                <td onclick="num('/')"><span>/</span></td>
            </tr>
            <tr>
                <td onclick="num(7)"><span>7</span></td>
                <td onclick="num(8)"><span>8</span></td>
                <td onclick="num(9)"><span>9</span></td>
                <td rowspan="4" onclick="equal()"><span>=</span></td>
            </tr>
            <tr>
                <td onclick="num(4)"><span>4</span></td>
                <td onclick="num(5)"><span>5</span></td>
                <td onclick="num(6)"><span>6</span></td>
            </tr>
            <tr>
                <td onclick="num(1)"><span>1</span></td>
                <td onclick="num(2)"><span>2</span></td>
                <td onclick="num(3)"><span>3</span></td>
            </tr>
            <tr>
                <td colspan="2" onclick="num(0)"><span>0</span></td>
                <td onclick="num('.')"><span>.</span></td>
            </tr>
        </table>
    </div>
</body>
<script>
    document.addEventListener("plusready", () => {
        plus.navigator.setStatusBarBackground("#FFF");
        plus.navigator.setStatusBarStyle('dark');
    });
    let show = document.getElementById("showIntput");
	let result = document.getElementById("showOutput");
    function num(figure){
        showNum = show.innerText + figure;
        show.innerText = showNum;
    }
    function equal()
    {
        result.innerText = parseFloat(parseFloat(eval(show.innerText)).toFixed(8));
        clear();
    }
    function clear() {
        show.innerText = "";
    }
</script>
</html>

Solitary_Jsx

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript实现简易计算器

HTML+CSS+JavaScript实现简易计算器成果展示代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=...
复制链接

扫一扫