Web Front-end
HTML Tutorial
Imitation Windows calculator (1)??Interface part_html/css_WEB-ITnose
Imitation Windows calculator (1)??Interface part_html/css_WEB-ITnose
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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1376
52
What should I do if Beyond Compare fails to case sensitivity when synchronizing Windows and Linux files?
Apr 01, 2025 am 08:06 AM
The problem of comparing and synchronizing BeyondCompare files: Case sensitivity failure when using Beyond...
Four ways to implement multithreading in C language
Apr 03, 2025 pm 03:00 PM
Multithreading in the language can greatly improve program efficiency. There are four main ways to implement multithreading in C language: Create independent processes: Create multiple independently running processes, each process has its own memory space. Pseudo-multithreading: Create multiple execution streams in a process that share the same memory space and execute alternately. Multi-threaded library: Use multi-threaded libraries such as pthreads to create and manage threads, providing rich thread operation functions. Coroutine: A lightweight multi-threaded implementation that divides tasks into small subtasks and executes them in turn.
How to avoid third-party interfaces returning 403 errors in Node environment?
Apr 01, 2025 pm 02:03 PM
How to avoid the third-party interface returning 403 error in the Node environment. When calling the third-party website interface using Node.js, you sometimes encounter the problem of returning 403 error. �...
Where to download Python .whl files under Windows?
Apr 01, 2025 pm 08:18 PM
Python binary library (.whl) download method explores the difficulties many Python developers encounter when installing certain libraries on Windows systems. A common solution...
Why can't my code get the data returned by the API? How to solve this problem?
Apr 01, 2025 pm 08:09 PM
Why can't my code get the data returned by the API? In programming, we often encounter the problem of returning null values when API calls, which is not only confusing...
How to efficiently read Windows system logs and get only information from the last few days?
Apr 01, 2025 pm 11:21 PM
Efficient reading of Windows system logs: Reversely traverse Evtx files When using Python to process Windows system log files (.evtx), direct reading will be from the earliest...
In front-end development, how to use CSS and JavaScript to achieve searchlight effects similar to Windows 10 settings interface?
Apr 05, 2025 pm 10:21 PM
How to implement Windows-like in front-end development...
How to speed up the loading speed of PS?
Apr 06, 2025 pm 06:27 PM
Solving the problem of slow Photoshop startup requires a multi-pronged approach, including: upgrading hardware (memory, solid-state drive, CPU); uninstalling outdated or incompatible plug-ins; cleaning up system garbage and excessive background programs regularly; closing irrelevant programs with caution; avoiding opening a large number of files during startup.
