The value of the special
- null
- undefined
- NaN (not a number) is not equal to anyone, including myself
Provisions of null = = is undefined
<script>
// isNaN()
console.log(null= = =null);
console.log(undefined= = =undefined);
// Two equal signs are equal
console.log(null= =undefined); / / regulations
// true turns to a number
console.log(2= =true); // false
console.log(NaN= = =NaN); // false
var x = 3;
console.log(typeof x); // number
// isNaN() is used to determine NaN
console.log(isNaN(x)); //false
/ /! IsNaN () is used to determine if it is a number
console.log(!isNaN(x)); //true
// When comparing strings to strings, compare ASCLL values, which is a bit ratio
console.log('a' > 'A'); // true
// String comparison is a bit by bit ratio
console.log('212' > '2'); // false
// Compare the value of string and number to number for comparison
console.log('12' > 2);//true
</script>
Copy the codeThe Math object
- Math.random() generates a random number between 0 and 1, including 0 and no 1
- Math.ceil() rounds up
- Math.floor() is rounded down
- Math.round() is rounded
<script>
var x = Math.random();
console.log(x);
// A random number between 0 and 100
// x = x * 100 ;
x *= 100; / / 0-100
console.log(x);
x = Math.round(x);
console.log(x);
// Random integers between 10 and 20 ？？？？
// Minimum random number between 0 and 1 0 x
// The minimum value needs to be 10 x+10 y 10-11
var y = Math.random(); / / 0 to 1
y = y * 10; / / 0 to 10
y = y + 10; / / 10 to 20
// y = Math.round(y); I might get to the maximum of 20
// y = Math.ceil(y); It's possible to get to a maximum of 20, but it's more likely to get to a maximum
// y = Math.floor(y); If you can't get the maximum, you have a better chance of getting the minimum
console.log(y);
</script>
Copy the codeLoss of computer accuracy
console.log(0.1 + 0.2); / / 0.30000000000000004
console.log(9999999999999999= =10000000000000000); // true
Copy the codeAccuracy loss is not just a JS problem, but a computer problem solution:
- Round it up, take the decimal point
(0.2 * 0.1 * 10 + 10) / 10 - Decimal to whole number
Random number. Pick three decimal places at random
<script>
var x = Math.random();
// Between 100 and 1000, you can't marry 1000
x *= 900;
x += 100;
x = Math.floor(x);// round down
console.log(x);
var bai = x / 100;
bai = Math.floor(bai)
console.log(bai);
// Take the remainder of the hundreds place
var shi = x % 100 / 10;
shi = Math.floor(shi);
console.log(shi);
var ge = x % 10;
</script>
Copy the codeRandom number summary:
- Generate a random number x between 0 and 1
- Generates a random number x * Max between 0 and any value Max
- Generate random number x * (max-min) + min between min-max
Var a = math.round (math.random () * (max-min) + min)
<script>
/ / between 10 to 20
var x = Math.random();
var y = x * (20 - 10) + 10;
// y = math.round (y) y = math.ceil (y
y = Math.floor(y) // Can not marry the maximum
var si = Math.random();
// si = si * (10000 - 1000) + 1000 ;
// si = Math.floor(si)
si = si * (9999 - 1000) + 1000;
si = Math.round(si);
/ / 1234
var qian = Math.floor(si / 1000);
/ / 234
var bai = Math.floor(si % 1000 / 100);
/ / 34
var shi = Math.floor(si % 100 / 10);
var ge = Math.floor(si % 10 / 1);
// 3682s hours, minutes, seconds 1 1 22s
var s = 3682;
var day = Math.floor(s / (24 * 3600));
var hour = Math.floor(s % (24 * 3600) / 3600);
var minute = Math.floor(s % 3600 / 60);
var second = s % 60;
console.log(hour, minute, second);
</script>
Copy the codeMaximum and minimum
- Math.min();
- Math.max();
Manipulating label objects
- Understanding objects: Attributes + methods (functions)
- The parentheses are called functions, and the columns are
Console.log () math.random () math.floor () document.write(argument) - Properties without parentheses are called properties. For example:
obi.value obj.style obj.onclick
<script>
// console.log()
Math.random() function 0-1
// Math.floor()
// First find the object input
// Find the element with id inp in the document
var oInp = document.getElementById('inp');
console.log(oInp);
oInp.value = '666'
oInp.style.color = 'red'
var oP = document.getElementById('p');
oP.style.color = 'green'
</script>
Copy the code
sum
<body> <input type="number" id="inp1"> <span>+</span> <input type="text" id="inp2"> <button id="btn">=</button> <input Type ="text" name="" id="result"> <script> var oInp1 = document.getelementById ('inp1') var oInp2 = document.getElementById('inp2') var oBtn = document.getElementById('btn') var oResult = document.getElementById('result'); console.log(oInp1, oInp2, oBtn, oResult); Var n1 = oinp1.value; var n1 = oinp1.value; // console.log(n1); // We can't get the data because js is executed when the page is opened. Obtn.onclick = function() {// alert(666) {var n1 = oinp1.value; console.log(n1); Var n2 = oinp2. value; console.log(n2); Var sum = n1 * 1 + Number(n2); console.log(sum); Oresult. value = sum; } </script> </body>Copy the code
statement
The three flow control statements of the program
- Sequential structures execute code from the top down
- Selection structure judgment
- The loop structure does one thing repeatedly
Single branch statement: conditional code execution syntax: if(condition) {code executed when the condition is met}
// Each single branch statement here performs a judgment
if(light === 'green') {
alert('go');
}
if(light === 'red') {
alert('stop');
}
if(light === 'yellow') {
alert('wait');
}
// This is not recommended to write, the execution is inefficient, each judgment will be executed once
Copy the codeDouble branch statement: Syntax: if(condition) {condition meets code executed} else {condition does not meet code executed}
var score = 66 ;
if(score >= 60) {
alert('666')}else {
alert('See you in the next class');
}
Copy the codeMulti-branch statements: Multi-branch: Syntax: if(condition) {condition satisfies the code executed} else if(condition 2) {condition does not satisfy the code executed} else if(condition 3) {condition does not satisfy the code executed}… Else {execute here if none of the above conditions are met}
var light = 'red';
if (light === 'red') {
alert('stop')}else if (light === 'green') {
alert('go')}else if (light === 'yellow') {
alert('wait')}// Else at the bottom is optional
else {
alert('The light is out')}Copy the codeIf the nested
if() { if() {} }
Let’s make a simple calculator
<body>
// Take the object first, try not to put the take object inside the click object, because this event will be executed many times
//section use, option can be either written or not written, can not be empty, js when obtaining a value, the first to take the value, there is no value to take the content of option.
//value cannot be saved in advance.<input type="text" id="inp1"> <select ID ="fuhao"> <option value="" disabled selected> Please select the operator </option> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" id="inp2"> </button> <input type="text" id="inp3"> <script> var oInp1 = document.getElementById("inp1") var oInp2 = document.getElementById("inp2") var oInp3 = document.getElementById("inp3") Var oBtn = document.getelementById (" BTN ") var oFuhao = document.getelementById ("fuhao") //console.log(inp1) // Bind click events oBtn.onclick = function() { var a = oInp1.value var b = oInp2.value var result = oInp3.value if (a === "" || b === "") { Alert (" input can't be empty ")} else if (isNaN (a) | | isNaN (b)) {alert (" please enter the number ")} else {the if (oFuhao. Value = = = "+") {result = Number(a) + Number(b); inp3.value = result } else if (oFuhao.value === "-") { result = Number(a) - Number(b); inp3.value = result } else if (oFuhao.value === "*") { result = Number(a) * Number(b); inp3.value = result } else if (oFuhao.value === "/") { result = Number(a) / Number(b); inp3.value = result } } } </script> </body>Copy the code
This is a random five-digit factorization number
<body> <div class="box_center"> <button id=" bTN1 "> </button> <input type="text" id="inp1"> <button </ div class="box"> <span> </span><input type="text" id="inp2"> <span> </span><input type="text" id="inp4"> </span> </span>< span type="text" id="inp5"> </span><input type="text" id="inp6"> </div> </div> <script> var oBtn1 = document.getElementById("btn1") var oBtn2 = document.getElementById("btn2") var x; Obtn1. onclick = function() {// random number: x = math.floor (math.random () * (100000-10000) + 10000); inp1.value = x; var y = x; console.log(x) oBtn2.onclick = function() { var a = Math.floor(y / 10000); inp2.value = a; var b = Math.floor(y % 10000 / 1000); inp3.value = b; var c = Math.floor(y % 1000 / 100); inp4.value = c; var d = Math.floor(y % 100 / 10); inp5.value = d; var e = Math.floor(y % 10); inp6.value = e; } } </script> </body>Copy the code
Do the year, month and day
<body>
<span>years</span><input type="text" id="year"> <span> <span> <span> <input type="text" id="day"> <button id=" BTN "> </button> <script> Var oYear = document.getelementById ('year'); var oYear = document.getelementById ('year'); var oMonth = document.getElementById('month'); var oDay = document.getElementById('day'); var oBtn = document.getElementById('btn'); Obtn.onclick = function() {var y = oyear.value; If (y >= 1000 &&y <= 2000 &&y % 1 === 0) {var m = omonth. value; If (m >= 1 &&m <= 12 &&m % 1 === 0) {var d = oday.value; Var maxDay; if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) { maxDay = 31 } else if (m == 4 || m == 6 || m 9 = = | | m = = {30} maxDay = 11) else if (m = = 2) {/ / determine if the number of days in February according to the years (y % 4 = = = 0 && y % 100! == 0 || y % 400 === 0) { maxDay = 29 } else { maxDay = 28 } } if (d >= 1 && d <= maxDay && d % 1 === 0) { alert('ok') } Else {alert(' year input error ')}} else {alert(' year input error ')}} </script> </body>Copy the code