html+js+css学习

最新推荐文章于 2024-08-03 15:42:27 发布

IT烟酒僧

最新推荐文章于 2024-08-03 15:42:27 发布

阅读量1.1k

点赞数

分类专栏： html+css+js 文章标签： html javascript

本文链接：https://blog.csdn.net/m0_38091800/article/details/78678449

版权

html+css+js 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

利用html+js实现一个简单的计算器

js中的代码

var result_1;
//加法
function add() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re =Number( a) +Number( b);
    sendResult(re);
}

//减法
function subtract() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a - b;
    sendResult(re);
}

//乘法
function ride() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a * b;
    sendResult(re);
}

//除法
function devide() {
    var a = getFirstNumber();
    var b = getTwiceNumber();
    var re = a / b;
    sendResult(re);
}

//给p标签传值
function sendResult(result_1) {
    var num = document.getElementById("result")
    num.innerHTML = result_1;
}

//获取第一位数字
function getFirstNumber() {
    var firstNumber = document.getElementById("first").value;
    return firstNumber;
}

//获取第二位数字
function getTwiceNumber() {
    var twiceNumber = document.getElementById("second").value;
    return twiceNumber;
}

html中的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p style="text-align: center;color: red;font-size: 20px;font-family: 'Times New Roman'">简单计算器</p>
<table border="1" style="text-align: center">
    <tr>
        <td>第一个数:</td>
        <td><input type="text" id="first"/></td>
    </tr>
    <tr>
        <td>第二个数:</td>
        <td><input type="text" id="second"/></td>
    </tr>
   <!-- colspan:合并两列
        &nbsp:空格
    -->
    <tr>
        <td colspan="2">
            &nbsp;
            <button style="width: inherit" onclick="add()">+</button>
            &nbsp;
            <button style="width: inherit" onclick="subtract()">-</button>
            &nbsp;
            <button style="width: inherit" onclick="ride()">*</button>
            &nbsp;
            <button style="width: inherit" onclick="devide()">/</button>
        </td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <p id="result"></p>
        </td>
    </tr>
</table>
<!--html中调用js-->
<script type="text/javascript" src="js.js"></script>
</body>
</html>

效果图

这里写图片描述

html与css之间的调用

css代码

body{
    font-family: Verdana,sans-serif;font-size: 0.8em;
}
div#header,div#footer,div#content,div#post{
    border: 1px solid grey;
    margin: 5px;
    margin-bottom: 15px;
    padding: 8px;
    background-color: red;
}

div#header,div#footer{
    color:white;
    background-color: #444;
    margin-bottom: 5px;
}

div#content{
    background-color: #ddd;
}

div#menu ul{
    margin: 0;
    padding: 5px;
}

div#menu ul li{
    display: inline;
    margin: 5px;
}

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>H5</title>
   <link rel="stylesheet" type=text/css href=second.css media=screen>
</head>
<body>
<div id="header">
    <h1>Monday Times</h1>
</div>

<div id="menu">
    <ul>
        <li>News</li>
        <li>Sports</li>
        <li>Weather</li>
    </ul>
</div>

<div id="content">
    <h2>News Section</h2>

    <div id="post">
        <h2>News Article</h2>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
    </div>

    <div id="post">
        <h2>News Article</h2>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
        <p>Ipsum lurum hurum turum ipsum lurum hurum turum ipsum lurum hurum turum ipsum
            lurum hurum turum.</p>
    </div>

</div>

<div id="footer">
    <p>© 2014 Monday Times. All rights reserved.</p>
</div>
</body>
</html>

其中html调用css的代码

<link rel="stylesheet" type=text/css href=second.css media=screen>

运行效果图

这里写图片描述

IT烟酒僧

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录