巨簡單巨醜的計算器（寫的我快自閉了）

阿新 • • 發佈：2019-02-28

如何 res 點擊事件樣式 body osi absolute shadow styles

學習前端已有兩月有余，去掉寒假劃水也學了一個多月了，

還是弱的可以。寫個計算器遇到了一堆問題，我真是個弟弟...

把問題和解決方法都塞在註釋裏了，小林要常回來看看

css樣式我真的8想寫了，就先這樣醜醜的放著吧

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <style>
        *{
            padding:  
0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        #container{
            margin: 0 auto;
            /* position: absolute; */
            /* puzzle1:絕對定位與外邊距？ */
            height: 40%;
            width: 35%;
             
/* puzzle2:如何使用百分比？ 成了！給html與body均設置寬高100%*/
            border: 2px solid aqua;
            background-color: antiquewhite;
        }
        input{
            /* margin-top: 5%; */
            display: inline-block;
            /* margin:0 auto; */
            /* margin：auto可以做到水平居中，但是有個前提條件就是，這個
            標簽必須是塊狀元素，並且有個確定的寬度，百分比的寬度也行；  
*/
            margin-top: 3%;
            margin-left: 1.5%;
            /* 百分比是相對於寬度的 */
            height: 13%;
            width: 80%;
            /* 其實這裏用px比較好，因為如果縮放網頁到一定程度輸入框就消失了
            還是要去橙旭園咨詢下 */
        }
            /*input:focus{
            box-shadow: 1px 1px ;
            }自帶focus？？*/
        #clear{
            display: inline-block;
            /* display是不繼承的 */
            background-color: aquamarine;
            /* position: absolute;再做一些修改就可以無論怎麽樣縮放網頁，清除按鈕都和輸入框在同一行上 */
            padding: 2px;
            border: 1px solid #dddddd;
            height: 14%;
            margin-left: 1px;
            margin-top: 3%;
            width: 15%;
            font-size: 18px;
            margin-bottom: 3%;
        }
        #clear:hover{
            border: 1px solid seagreen;
            box-shadow: 1px 1px sandybrown;
            /* 註意有兩個必須有的值 */
        }
        #btn{
            background-color:turquoise;
            padding-left: 5%;
            /* ???為什麽會導致btn這個div向右膨脹5%？？？ */
            /* width: 100%; */
            /* 為什麽把寬度註釋掉就可以了欸 */
            /* 如果設置了100%，再加上邊距，就會變成105%的寬度~ */
            /* html元素寬度不具有繼承特性，塊級元素(block)的寬度會占據一整行（一整行父元素的寬度），
            所以看似繼承了，實則不是。
            要讓一個元素的寬度根據內容撐開，只要設置其display不為塊級元素，不設置寬度就可以了 */
            height: 65%;
            /* 百分比？？？？ */
            /* 百分比是父元素內容的百分比，去掉內邊距等之後的部分！ */
            padding-top: 5%;
        }
        #btn .num,.calc,.result{
            display: inline-block;
            height: 20%;
            width: 20%;
            background-color: white;
            border: 1px solid seagreen;
        }
        /* .num,.calc,.result:hover{
            box-shadow: 3px 3px orange;
            border: 1px solid darkorange;
        } 錯誤寫法，會解析為“為num類”和“calc”類添加新的常規樣式，並（只）為“result類”添加偽類 */
        .num:hover{
            box-shadow: 2px 2px orange;
            border: 1px solid darkorange;
        }
        .calc:hover{
            box-shadow:  2px 2px orange;
            /* 用inset制造內嵌陰影 */
            border: 1px solid darkorange;
        }
        .result:hover{
            box-shadow: 2px 2px orange;
            border: 1px solid darkorange;
        }
    </style>
</head>
<body>
<div id="container">
        <input id="input" placeholder="在此輸入數字">
        <button id="clear" value="clear" onclick="cle()">清除</button>
        <br>
    <div id="btn">
        <button value="7" class="num" onclick="get(this.value)">7</button>
        <button value="8" class="num" onclick="get(this.value)">8</button>
        <button value="9" class="num" onclick="get(this.value)">9</button>
        <button value="+" class="calc" id="add" onclick="get(this.value)">+</button>
        <br>
        <button value="4" class="num" onclick="get(this.value)">4</button>
        <button value="5" class="num" onclick="get(this.value)">5</button>
        <button value="6" class="num" onclick="get(this.value)">6</button>
        <button value="-" class="calc" id="sub" onclick="get(this.value)">-</button>
        <br>
        <button value="1" class="num" onclick="get(this.value)">1</button>
        <button value="2" class="num" onclick="get(this.value)">2</button>
        <button value="3" class="num" onclick="get(this.value)">3</button>
        <button value="*" class="calc" id="mul" onclick="get(this.value)">*</button>
        <br>
        <button value="." class="num" onclick="get(this.value)">.</button>
        <button value="0" class="num" onclick="get(this.value)">0</button>
        <button value="/" class="calc" id="div" onclick="get(this.value)">/</button> 
        <button value="=" class="result" id="re" >=</button>
    </div>
</div>
    <script>
        // console.log(eval(2+1));
        //獲取運算符元素
        function get(num){
            var show = document.getElementById("input");
            show.value += num;
        }
        var clear_btn = document.getElementById("clear");
        // clear_btn.onclick = clear;
        // 如果把點擊事件綁定在清除按鈕的HTML中會失效：在script中使用事件綁定或事件監聽器方可
        //原因：...clear是保留字...，也就是說這三種方式都可以，打擾了，我是弟弟
        function cle(){
            var show = document.getElementById("input");
            show.value = "";
        }
        //
        var result_btn = document.getElementById("re");
        function calculates(){
        var result = 0;
        var temp;
        var show = document.getElementById("input");
        temp = show.value;
        result = eval(temp);
        show.value = result;
        }
        result_btn.addEventListener("click",calculates,false);
    </script>
</body>
</html>

巨簡單巨醜的計算器（寫的我快自閉了）

如何 res 點擊事件樣式 body osi absolute shadow styles 學習前端已有兩月有余，去掉寒假劃水也學了一個多月了，還是弱的可以。寫個計算器遇到了一堆問題，我真是個弟弟... 把問題和解決方法都塞在註釋裏了，小林要常回來看看 css樣式

一，我的2016，我的編程小白之路（寫於2016最後一天）

模擬 gre 我只數據願望匯編關於計算機網絡思考明天元旦，2016年結束了，我已結束高考，然而高數考試馬上就來了。 qwq ---------- 過去一年，全是為了高考，感覺那時也沒想多少事，專心把題目做出就好了。於是該總結的總結，該做題的做題，做不完的題當然

android實現的簡單的計算器（原始碼+打包好的apk檔案）

一、啥也不說，先看效果二、再來看一下目錄結構吧：三、原始碼： .java檔案 package com.kjgym.mycalculatorv10; import android.support.v7.app.AppCompatActivity; imp

string類的簡單實現（寫時拷貝Copy-on-write）

前言：上一篇文章實現了string的深拷貝寫法；那我們能不能用淺拷貝寫string類呢？當然可以；一、（1）當我們需要對拷貝之後的物件進行修改時，採用深拷貝的方式；如果不需要修改，只是輸出字串的內容時，或者是當偶爾修改的的時候，我們再採用深拷貝的方

[轉]Idea2016 使用Maven配置簡單Web項目（受益比較多的一篇）

ast 資源文件技術為什麽 term 生成 nts apach 配置環境最近被同事一直吵著用Idea寫Java，於是偷偷的去試用了一下Idea。確實不錯，無論界面還是智能提醒都是蠻符合我的使用習慣，但是剛從Eclipse出來，使用Idea還是不太習慣的。所以這裏寫出來

【小程序】計算器（使用正則表達式實現）

fin lag pre racket 公式優先級 += == 取數功能：實現加減乘除及拓號優先級解析用戶輸入 1-2*((60-30+(-40/5)*(9-2*5/3-2*(-18.3/3-(5*2+3+(-2*3)*(-7-1)/(5*7)*2)+2/6*7)

MyBatis動態SQL（認真看看，以後寫SQL就爽多了）

MyBatis 令人喜歡的一大特性就是動態 SQL。在使用 JDBC 的過程中，根據條件進行 SQL 的拼接是很麻煩且很容易出錯的。 MyBatis 動態 SQL 的出現，解決了這個麻煩。 MyBatis通過 OGNL 來進行動態 SQL 的使用的。目前，動態 SQL 支援以下幾種標籤

據說是springboot下實現cas的單點登入（但是我總感覺是MVC）----基於前後臺分離的

一、前言前後端分離開發是目前軟體開發的主流，大大提高了開發效率但也帶來了很多不方便之處。 1、優點： ① 傳統全棧開發的 MVC 模式將不適合，後臺採取 MVP 面向介面程式設計，耦合度大大降低 2、缺點： ① 跨域問題不勝其擾 3、原則：&n

hive安裝瘋狂報錯的坑（困擾我4天之久）

ERROR XBM0H: Directory /bin/metastore_db cannot be created. 這個錯誤是啟動hive之後，輸入show databases; 時報出來的，怎麼都解決不了，部落格都翻爛了，配置也找不到其他可以改的了。看錯誤大概意思是hive還是用de

跑動一個vue專案的完整步驟（寫給自己的新手指南）

一、配置vue環境值得注意的是在配置專案的名稱以及一些相關屬性的時候，以下兩項要特別注意 Projectname這裡設定的名稱會在專案的title中展示，如果你後來重新設定了title也會先展示它，但這裡似乎不可以使用中文，目前還沒有找到好的解決辦

簡單的聊天程式（java的socket+多執行緒）

服務端 import java.net.*; import java.util.*; import java.io.*; public class ChatServer { ServerSocket server = null; Collection

將github的php介面，放到伺服器上供訪問。（為了我的看板娘功能）

背景：從網上找到一個看板娘js的介面，在github上有原始碼，怕有一天服務關閉了，不是很悲催，想自己搭建api環境，裡面有看板孃的模版，只能通過爆漏介面的方式訪問。方法：在伺服器上安裝php+nginx/Apache 配置網站的資訊（nginx），

mybatis-generator程式碼快速自動生成（已經寫好程式碼給你了）

mybatis-generator程式碼快速自動生成：沒有實習之前寫的MyBatis的Mapping.XML都是手寫的，實習老大教了如何快速利用mybatis-generator程式碼自動生成工具來快速書寫xml，現在分享給大家。 1.首先，我先建立一個stu

改進Sketch based modeling（附我做的小軟體）

前段時間，本來已經做過一個Sketch based tree modeling的程式。但是後來整理電腦檔案的時候，把程式碼給整丟了……（按時存檔是一個多麼重要的好習慣啊！！！！）然後我就重新做了一遍

JRebel 熱部署（寫程式碼不用重啟伺服器）

2018年11月14日 12:01:26 Marlboro8023 閱讀數：7 標籤：工具配置

JavaBean簡單介紹與使用（例項：JSP+JavaBean註冊驗證）

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <% String path = request.getContextPath(); String basePath = request.getSchem

android輪播圖簡單實現（左右無限滑動,自動輪播）

直接上程式碼了，都有註釋，原理很簡單 public class MainActivity extends AppCompatActivity { private static final String Tag = MainActivity.class.getSimpleName();

學習筆記---css中偽元素與偽類（迷惑我的:after與:hover）

一直被偽類與偽元素所迷惑，以為是同一個屬性名稱，這兩天看css動畫，越來越多的看到諸如 a:hover:after，a.hover:after 的用法，越來越糊塗，索性翻翻定義研究研究。本文出現的偽類偽元素均為css2、css1中內容。css3中偽類、偽元素還未做

Jquery簡單過濾選擇器（應用最廣泛的選擇器）

（1）Jquery中簡單過濾選擇器 jquery根據某一類過濾規則進行元素匹配，書寫時以：開頭，是Jquery中應用最為廣泛的選擇器（2）簡單過濾選擇器的基本語法 ①first()或者：first 獲取第一個元素 ②last()或者：last

Linux缺頁異常（寫時複製請求調頁）

在程式的執行過程中，因為遇到某種障礙而使 CPU 無法最終訪問到相應的物理記憶體單元，即無法完成從虛擬地址到實體地址對映的時候，CPU 會產生一次缺頁異常，從而進行相應的缺頁異常處理。基於 CPU 的這一特性，Linux 採用了請求調頁（Demand Paging）和寫時複製（Copy On Write）的技

巨簡單巨醜的計算器（寫的我快自閉了）

相關推薦