


Imitation Windows calculator (1)??Interface part_html/css_WEB-ITnose
Jun 24, 2016 pm 12:04 PM
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計(jì)算器</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

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

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

When encountering the "Windowscan'taccesssharedfolderonnetwork", you can usually solve the problem through the following steps: 1. Turn on the network discovery and file sharing function and turn off password protection; 2. Make sure that the target computer is enabled to share and set the correct permissions; 3. Check the firewall rules and service status to ensure that it allows shared access; 4. Use the credential manager to add network credentials for long-term and stable connection.

When you encounter Windows stuck in the "GettingWindowsready, Don't turnoff your computer" interface, you should first confirm whether it is really stuck; 1. Observe whether the hard disk indicator light is flashing, 2. Check whether the fan sound has changed, 3. Wait at least 30 to 60 minutes to ensure that the system has enough time to complete the update operation.

To run programs as administrator, you can use Windows' own functions: 1. Right-click the menu to select "Run as administrator", which is suitable for temporary privilege hike scenarios; 2. Create a shortcut and check "Run as administrator" to achieve automatic privilege hike start; 3. Use the task scheduler to configure automated tasks, suitable for running programs that require permissions on a scheduled or background basis, pay attention to setting details such as path changes and permission checks.

When the Windows clipboard history is not working, you can check the following steps: 1. Confirm that the clipboard history function is enabled, the path is "Settings>System>Clipboard", and if it is not enabled, Win V will not respond; 2. Check whether the copy content type is limited, such as large images, special formats or file paths may not be saved; 3. Ensure that the system version supports it, Windows 101809 and above, and some enterprise versions or LTSC do not support it; 4. Try to restart the ClipboardUserService service or end the clipups.exe process; 5. Clear the clipboard cache or reset the settings, close and then turn on the "Clipboard History" or run the "echooff|clip" command to clean up the cache

Don't rush to reinstall the system when the computer is stuck in the Windows restart interface. You can try the following methods first: 1. Force shutdown and then restart. Apply to the situation where the update is stuck. Repeat two or three times or can skip the lag; 2. Enter the safe mode to check, select Start repair or system restore through troubleshooting. If you can enter safe mode, it may be a driver or software conflict; 3. Use the command prompt to repair the system files, enter the three commands sfc and dism in the recovery environment to repair the damaged files; 4. Check the recently installed hardware or driver, unplug the non-essential devices or uninstall the new driver to eliminate incompatibility issues. In most cases, the above steps can solve the phenomenon of restart lag. If it really doesn’t work, consider reinstalling the system and paying attention to backing up data in advance.

The computer is stuck in the "Undo Changes made to the computer" interface, which is a common problem after the Windows update fails. It is usually caused by the stuck rollback process and cannot enter the system normally. 1. First of all, you should wait patiently for a long enough time, especially after restarting, it may take more than 30 minutes to complete the rollback, and observe the hard disk light to determine whether it is still running. 2. If there is no progress for a long time, you can force shut down and enter the recovery environment (WinRE) multiple times, and try to start repair or system restore. 3. After entering safe mode, you can uninstall the most recent update records through the control panel. 4. Use the command prompt to execute the bootrec command in the recovery environment to repair the boot file, or run sfc/scannow to check the system file. 5. The last method is to use the "Reset this computer" function

When encountering SYSTEM\_SERVICE\_EXCEPTION error, 1. Update or roll back the graphics card driver, try to update the driver with the device manager, download and install the official website, or use DDU to completely uninstall and reinstall; 2. Check the memory stick, detect abnormalities through the task manager and Windows memory diagnostic tool, and clean the memory stick or change the slot test if necessary; 3. Repair the system files, run the sfc/scannow and DISM commands with administrator permissions, and check Windows Update; 4. Uninstall recently installed software or updates, especially antivirus software or virtual machine tools. If the above method is invalid, it may be a hardware problem that needs further detection.

Corruption of user profile can be solved by creating a new account, using system tools to repair, manually migrating data, and modifying the registry. After confirming the problem, you can try the following methods in turn: 1. Create a new local account to determine whether it is the original account problem; 2. Use sfc/scannow and DISM tools to repair the system files; 3. Create a new user through the administrator account and manually migrate the old account files (including the hidden AppData directory); 4. Advanced users can try to locate the ProfileList item in the registry editor, check and repair the abnormal ProfileImagePath entry, and backup the registry before the operation.
