JS 0 Foundation Step by step application full record

1. Causes

It is common for several people to call takeout together as a couple of late-stage patients with heavy-dependence cancer. Accidentally see the next dorm in the hungry when ordering food, see in the hungry home on the homepage there is a little game/tool, feel this small details, hungry is very good grasp. But it seems that we eat more is the United States, after coming back, Baidu "who went to get takeout Web version", no results. Think this thing doesn't look too hard anyway, just make one yourself. There is no time for all kinds of things in school, and time is quite ample after the holiday. So, as an HTML semi-starter +JS 0 Foundation of the child, so began, and now is the 2015.2.10 10:17.

2. Functional design

The basic function is to press a button or press a space, randomly generate a random number, show in a list, compare the smallest of all random numbers, and mark "I Go".

3. Interface Design

A good product should have a good interface. Fortunately, the professional art team, the strength of the front desk, I did not. Well, in fact, I mainly do backstage, as for the front desk words. Just take advantage of the @missde classmate this http://paiwadang.sinaapp.com/baiduwifi/page UI, the other features are added here.

The second step plus the button, the first button is like this

I'm guessing this button is out of the estimation and nobody wants to use it.--| |

Then you have to change the style! Individuals prefer the flat style of design (in fact because it is easy to make). ), here is the main setting is the height, width and background color, in addition, in order to make the button appears to be "flat", the Border-top-width, Border-left-width, Border-bottom-width, Border-right-width changed to 0. Finally, the font is modified to a suitable size. So the design of the button is finished. The effect becomes this:

See this button is not want to go to press the impulse big a lot? Ha ha. The code for the button style is as follows

style= "background: #00afff; width:300px; height:70px; border-top-width:0px; border-right-width:0px; border-left-width:0px; border-bottom-width:0px;font-size:20px;

The next step is to make some changes to the original page, because the basic style of the front desk has already, I just need to remove some of the content, and then modify some of the colors, and then the basic appearance is out, and in Baidu generated a share button in the lower left corner. So the Web page from the original look like this effect

The individual looks satisfied. The next step is to write code for this button.

4. Code Writing

The realization of the function is relatively simple, actually do still have a lot of detours. W3school teaching is very good, there are a lot of things to learn from, basically according to gourd painting scoop, create a new function, this function can be triggered by pressing the key, can also be triggered by pressing the space bar, in the function to get a non-repeating random number, the random number into the array, and find the smallest value in the array plus a mark. It's good to show it. Here are a few things to keep in mind:

First: The trigger event of the button selection is the onclick yes, but for the space bar trigger is divided into three kinds of situations: Onkeyup,onkeydown and onkeypress. The state of the keys for these three cases is not the same.

onkeypress
This event occurs when the user presses and releases any alphanumeric keys. System buttons (for example, arrow keys and Function keys) cannot be identified.

OnKeyUp
This event occurs when the user releases any previously pressed keyboard keys.

OnKeyDown
This event occurs when the user presses any keyboard key (including system buttons, such as arrow keys and Function keys).

Onkeypress,onkeydown refers to the keyboard press, then if I press the keyboard does not release, it may cause a number of triggers, so I choose to trigger the button is onkeyup, that is, the moment the release of the button trigger event. This way, only one trigger can be guaranteed.

When writing the spacebar to start a problem, press the space bar, the page back to scroll, the solution is to add the body inside the Overflow:hidden style property, but the result is that even with the scroll wheel and scrolling bar can not scroll. Therefore, the solution is a very two-cornered method-is to directly compress the content of the page, so that it is just full of a screen.

The next step is to generate a random integer, which in JS can be used

Math.floor (Math.random () * (95 + 1)) +3;

This sentence realization, math.random () can generate a 0-1 decimal, Math.floor is to take the whole, after generating a random number, finally I added a 3, why? The main consideration is to avoid the occurrence of 0 of such random numbers, resulting in the user, the next is not interested in playing, but if the number of the last throw is 3, so that users still have the hope to continue to throw down.

Another is the operation of the array in the JS is familiar with, JS in the operation of the array is simpler than in C + + or Python, which is mainly used in the array of Shift (), unshift (), push () and other operations.

The shift () method removes the first element from the array and returns the value of the first element.

The Unshift () method adds one or more elements to the beginning of the array and returns the new length.

But IE has a nonstandard place, the Unshift method returns the length of the new array, but IE6 and IE7 return undefined

The push () method adds one or more elements to the end of the array and returns the new length.

If the elements in the array are less than the number of elements set, then a new non-repeating random number is added at the end of the array push, otherwise the smallest random number is the first, and if it is, shift two random numbers come out, push into a new random number, and finally unpush the first random number. Otherwise, shift directly to a random number after push into a new random number.

5. Summary

In fact, C C + + has a priori foundation, and then to learn a new language is actually a very simple thing, with a variety of information on the web, as well as the blog summary of the various Daniel, it is really able to benefit a lot! The app was all done and uploaded to the Sina cloud last night. In fact, it is a day of Kung Fu. Although this small app is done, but there are many improvements, I hope that the great God can make a lot of corrections. Attach the application address: http://whowm.sinaapp.com/

JS 0 Foundation Step by step application full record