Calculator application written in pure HTML + CSS + JavaScript

Calculator application written in pure HTML + CSS + JavaScript A pen exam

I accidentally saw a company's pen question. The question is as follows:

Use HTML5, CSS3, and JavaScript to create a webpage, such as a form Calculator

The key is composed of appName + id. The id increases automatically and is unique. You can delete a record by id and appName. If you enter *, all records are deleted.

Package apps

After writing the mobile Web calculator, I want to make it an APP to run on my mobile phone. Because I have never used a framework such as a hybrid APP such as ionic, I have referenced it, it is very convenient to select Hbuild for development and app packaging. (HBuild ).

Single-handed Mode

You can switch to the single-handed mode when sliding left or right. This requires touch events on the Mobile End. Use the following code to determine whether the event is left or slippery:

/** Single-handed mode */function singleModel () {var calc = document. getElementById ("calc"); var startX = 0, moveX = 0, distanceX = 0; var distance = 100; var width = calc. offsetWidth; // sliding event calc. addEventListener ("touchstart", function (e) {startX = e. touches [0]. clientX;}); calc. addEventListener ("touchmove", function (e) {moveX = e. touches [0]. clientX; distanceX = moveX-startX; isMove = true;}); window. addEventListener ("touchend", function (e) {if (Math. abs (distanceX)> width/3 & isMove) {if (distanceX> 0) {positionFun ("right "); // sliding right} else {positionFun ("left"); // sliding} startY = moveY = 0; isMove = false ;});}

If it is a slide, position: absolut; left: 0, bottom: 0, and then the outermost DIV is reduced to 80%, so that the left slide calculator is reduced to the lower left corner. The right slide is the same.

Call Function

When the phone number is entered, you can call the phone number by pressing the equals sign. This function is nothing magical. on mobile Web, it processes numbers that look like phone numbers as phone links, for example:

• Seven digits, such as: 1234567

• A number with parentheses and a plus sign, for example: (+ 86) 123456789

• A number in the double connection line, for example, 00-00-00111.

• 11 digits, such as: 13800138000

Other types of numbers may also be identified. We can use the following meta to enable automatic identification of phone numbers.

Enable the call Function

123456

Enable SMS:

123456

However, in the Android system, you can only call the dial-up interface of the system. on iOS, you can call this step to call the phone.

Version Update Check

On the page, there is a version Update Check button to check whether there is a new version. The principle of this function is to send a JSOPN request to check the JSON file on the server and compare the version number, if the version on the server is higher than the version of the APP, the system will prompt that a new version can be downloaded. \

Client JavaScript code:

Function updateApp () {// check the new version var updateApp = document. getElementById ("updateApp"); updateApp. onclick = function () {var _ this = this; $. ajax ({type: 'get', url :' http://duni.sinaapp.com/demo/app.php?jsoncallback= ? ', DataType: 'jsonp', beforeSend: function () {_ this. innerHTML = "checking the new version... ";}, success: function (data) {var newVer = data [0]. version; if (newVer> appConfig. version) {var log = data [0]. log; var downloadUrl = data [0]. downloadUrl; if (confirm ("Check the new version [" + newVer + "], do you want to download it now? \ N Update log: \ n "+ log) {var a = document. getElementById ("telPhone");. href = downloadUrl; a.tar get = "_ blank";. click () ;}} else {alert ("you are very busy. It is now the latest version! ");} _ This. innerHTML = "check new version";}, error: function (msg) {_ this. innerHTML = "check new version"; alert ("check failed:" + msg. message );}});}}

Server JSON:

[{"Version": "3.1.0", "downloadUrl": "http://dunizb.b0.upaiyun.com/demo/app/myCalc-3.1.0.apk", "hashCode": "20160812224616", "log": "1. added the topic switching function \ n 2. new single-handed switching mode \ n 3. adjust UI "}]