html+js+css学习

利用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中的代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
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>
   
    <tr>
        <td colspan="2">
             
            <button style="width: inherit" onclick="add()">+button>
             
            <button style="width: inherit" onclick="subtract()">-button>
             
            <button style="width: inherit" onclick="ride()">*button>
             
            <button style="width: inherit" onclick="devide()">/button>
        td>
    tr>
    <tr>
        <td colspan="2" rowspan="2">
            <p id="result">p>
        td>
    tr>
table>

<script type="text/javascript" src="js.js">script>
body>
html>

效果图

html+js+css学习_第1张图片

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代码


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

<div id="menu">
    <ul>
        <li>Newsli>
        <li>Sportsli>
        <li>Weatherli>
    ul>
div>

<div id="content">
    <h2>News Sectionh2>

    <div id="post">
        <h2>News Articleh2>
        <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 Articleh2>
        <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>

运行效果图

html+js+css学习_第2张图片

你可能感兴趣的:(html+css+js)