Let me digress first. The blogger graduated in 2012 and has been engaged in development career. His main work performance is to copy-paste-change other people's code. I feel that I have not made much progress, and I want to change jobs recently. The main direction of submitting my resume is front-end, because as a girl, I am more interested in front-end pages. I feel that I have reached the entry level, but I have been rejected many times. Then I realized that the so-called Getting started is really too trivial, so let’s just start from the basics.
I have been watching "JAVASCRIPT The Return of the King" recently. I have been reading and my hands are a little itchy. I want to write something, but I don’t know what to write. I have to write the examples in the book myself. It imitates the calculator function of WINDOWS. Welcome everyone. Come give me advice.
Okay, after so much rambling, let’s get to the point.
The first interface is very simple. I just adjusted the layout and used the default style. You can directly enter the code.
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>仿Windows计算器</title> 6 <style> 7 .content{} 8 div,input{margin:0;padding:0;} 9 .console, .btnBar{margin:3px auto; }10 .console{ height:50px;border:1px solid #09F;width:190px;}11 .btnBar{width:195px; }12 input[type="button"] {width:34px; height:27px;margin-right:5px; display:block; float:left;}13 #equalBtn{height:56px; margin-top:-27px;}14 #n0Btn{width:73px;}15 input[type="text"]{display:block; border:none; height:25px; width:185px; font-size:20px;}16 #btmText{text-align:right;}17 </style>18 </head>19 <body>20 <div class="content">21 <div class="console">22 <input type="text" />23 <input type="text" id="btmText" value="0"/>24 25 </div>26 <div class="btnBar">27 <input type="button" id="mcBtn" value="MC"/>28 <input type="button" id="mrBtn" value="MR"/>29 <input type="button" id="msBtn" value="MS"/>30 <input type="button" id="mpBtn" value="M+"/>31 <input type="button" id="mmBtn" value="M-"/>32 <input type="button" id="bsBtn" value="←"/>33 <input type="button" id="ceBtn" value="CE"/>34 <input type="button" id="cBtn" value="C"/>35 <input type="button" id="pmBtn" value="±"/>36 <input type="button" id="sqrtBtn" value="√"/>37 <input type="button" id="n7Btn" value="7"/>38 <input type="button" id="n8Btn" value="8"/>39 <input type="button" id="n9Btn" value="9"/>40 <input type="button" id="divideBtn" value="/"/>41 <input type="button" id="percentBtn" value="%"/>42 <input type="button" id="n4Btn" value="4"/>43 <input type="button" id="n5Btn" value="5"/>44 <input type="button" id="n6Btn" value="6"/>45 <input type="button" id="multiplusBtn" value="*"/>46 <input type="button" id="divided1Btn" value="1/x"/>47 <input type="button" id="n1Btn" value="1"/>48 <input type="button" id="n2Btn" value="2"/>49 <input type="button" id="n3Btn" value="3"/>50 <input type="button" id="minusBtn" value="-"/>51 52 <input type="button" id="n0Btn" value="0"/>53 <input type="button" id="potBtn" value="."/>54 <input type="button" id="plusBtn" value="+"/>55 <input type="button" id="equalBtn" value="="/>56 </div>57 </div>58 </body>59 </html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
