路飞学城Python-Day50

05-运算符

常用运算符

算数运算符

赋值运算符

比较运算符

逻辑运算符

// 赋值运算符

var money = prompt('请输入金额');

var saveMoney = money * (1+0.02);

console.log(saveMoney);

document.write(saveMoney);

// 算数运算

var a = 10;

var b = 4;

var sum = a + b;

document.write(sum);

var min = a - b;

document.write(min);

// 组合运算符

var c = 7 , d = 8;

// d = c + d;

// d +=c;

// console.log(d);

// 自增和自减

//x++就是先赋值后自增

var c1 = d++;

console.log(c1);

console.log(d);

// ++x就是先自增再赋值

var c2 = ++d;

console.log(c2);

// 比较运算符: > < = <= >= == ===

console.log(a > b);

// 浏览器解析的时候，存在隐式转换，比较的是值的大小，===是类型和值都进行比较

// 逻辑运算符

// && 和 || 或

// and就是都真为真，只要有一个为假就是假，两个都是假就都是假

06-字符串处理

很多时候的后台的运算采用的是数字运算，但是实际上展示的时候需要转换为字符串显示

// 字符串的运算

// 字符串的运算就是通过 '+' 来进行拼接

// 字符串只能是拼接，不能是加减运算

var firstName = 'panda';

var lastName = 'boy';

console.log(firstName+ ' ' + lastName);

var str = '2003啊'+firstName+'实打实大框架爱不是的gas打瞌睡的男篮的尴尬';

console.log(str);

var a1 = '1';

var a2 = 'panda';

var a3 = '4';

var a4 = '6';

// 不能对字符串进行加减运算，会报NaN -> Not a Number ->实际上NaN就是number类型

console.log(parseInt(a1) + parseInt(a2));

console.log(a3 * a4);

</script>

07-数据类型转换

// 在JS中所有的数据类型，都被归为boolean

// 1.将数字类型转换为字符串类型

var n1 = 123;

var n2 = '';

var n3 = n1 + n2;

console.log(n3);

console.log(typeof (n3));

// 隐式转换 -> 数字和字符串相加会变成字符串优先变化，转换为字符串类型

// 强制类型转换 ->String(n1) -> num.toString()

var str1 = String(n1);

console.log(str1);

console.log(typeof (str1));

var num = 234;

console.log(num.toString());

console.log(typeof (num));

// 字符串转换为数字类型 -> Number(stringNum) -> parseInt(num3) ->parseFloat浮点数

// parseInt()可以解析一个字符串，并且返回一个整数

var stringNum = '789';

var num2 = Number(stringNum);

console.log(num2);

console.log(typeof (num2));

var num3 = '456';

console.log(parseInt(num3));

console.log(typeof (num3));

console.log(parseFloat(stringNum));

console.log(typeof (stringNum));

// -------------------------------------------------

// 布尔值 NaN 0 null undefined都是false 所有的数据类型都可以转换为数字类型

var b1 = '123';

console.log(Boolean(b1));

</script>

08-流程控制语句if

// if 语句就是如果...然后...

* var ji = 10;

if (ji >= 20){

console.log('恭喜你')

}else {

console.log('失败')

}*/

// 浏览器解析代码的顺序，是从上往下执行

// 考试系统录入

var math = 99;

var english = 85;

var sum = 485;

// 1. 模拟总分大于400 并且数学成绩大于89分，被清华大学录取

// if (sum > 400 && math > 89) {

// console.log('恭喜你被录取了')

// }else {

// console.log('没有完成条件，不能被录取')

// }

// 2.模拟如果总分大于400或者数学成绩大于85 就被复旦大学录入

// if (sum > 400 || math >=85){

// alert('你的成绩已经达标')

// }else{

// alert('成绩未达标')

// }

09-switch

// switch 开关

var gameScore = 'better';

// switch 和 case做比较，遇到break就跳出，后面的代码会继续执行，

// 运行方式类型于if else,只不过用法比较单一

switch (gameScore){

case 'good':

alert('case用来做比较');

break;

case 'better':

alert('case就是比较对不对');

break;

}

</script>

10-while

// var i = 1;

// while (i < 10){

// i++;

// console.log(i);

// }

// 练习：将1到100之间所有的是3的倍数输出出来

var i = 100;

while (i >= 1){

if (i % 3 === 0){

console.log(i);

}

// console.log(i);

i--;

}

11-do_while

var i = 0;

do{

i++;

console.log(i);

}while (i < 3)

12-for循环

// for 循环

// for(var i = 1;i <= 10;i++){

// console.log(i);

// }

// 打印1-100之间所有的偶数

// for (var i = 1; i<=100;i++ ){

// if(i % 2 ===0){

// console.log(i);

// }

// 计算1-100之间的数字的和

// var sum = 0;

// for (var i = 1;i <= 100;i++ ){

// sum += i;

// }

// console.log(sum)

// 打印在页面上3行6个*

// for (var i = 0;i<=2;i++){

// document.write('******'+'<br>');

// }

// 在浏览器中输出直角三角形

// *

// **

// ***

// ****

// *****

// ******

String.prototype.times = function(n) {

return Array.prototype.join.call({length:n+1}, this);

};

for(var i = 1;i<=6;i++){

document.write('*'.times(i)+'<br>');

}

</script>

13-for循环练习

14-数组的创建和使用

//

var colors = ['red','color','yellow'];

console.log(colors);

console.log(typeof (colors));

// 空数组

var emptyAray = [];

// 使用构造函数去创建，使用new关键词，对构造函数进行创建

var colors2 = new Array();

var col = new Array('red','123','yelow');

console.log(col);

// 数组的赋值

var arr = [];

arr[0] = 123;

arr[1] = '456';

console.log(arr);

15-数组的常用方法

// 1.数组的合并

var north = ['beijing','shandong','tianjin1'];

var sorth = ['dong','xi','shanghai1','nanfang1'];

var newArray = north.concat(sorth);

console.log(newArray);

// 2.数组转换为字符串

var numArray = [100,101,102,103];

// toString直接转换为字符串,每个元素使用逗号隔开

var str = numArray.toString();

console.log(str);

// join方法将数组中的方法是用指定的字符串连接，形成一个新的字符串

var str2 = numArray.join('|');

console.log(str2);

// 查找下标,如果查找的值不再数组内，则返回-1,正向查找

var index = numArray.indexOf(100);

console.log(index);

// 反向查找

var lastIndex = numArray.lastIndexOf(102);

console.log(lastIndex);

// 数组的排序

var names = ['panda', 'boy', 'zombie', 'engo'];

// 反向排序

var newName = names.reverse();

console.log(newName);

// 正向排序 sort按照26个字母顺序排序

var newName1 = names.sort();

console.log(newName1);

// 移除元素和添加元素,返回的结果是移除的第一个元素，原来数组中的第一个元素，被移除了

var firstName = names.shift();

console.log(firstName);

console.log(names);

// unshift()向数组添加一个元素,返回的新数组长度

var lastname = names.unshift(names);

console.log(lastname);

console.log(names);

// push()添加元素,往数组的最后一个位置添加元素

var newN = names.push('123');

console.log(newN);

console.log(names);

// pop()移除元素,从数组的最后去删除元素

var newN1 = names.pop();

console.log(newN1);

console.log(names);

16-函数的使用

函数是由事件驱动的，当它执行的时候是可重复使用的代码块

函数就是为了让代码更简洁

// 函数的创建

// 有函数的声明就一定有调用

function add(){

alert('函数被调用')

}

add();

// 声明函数的时候带参数

function add2(a, b) {

alert(a + b)

}

add2(3, 4);

function add3(x,y) {

return x+y

}

n = add3(4,5);

alert(n)

17-Object_构造函数

// 对象的创建

//字面量方式的创建，推荐使用

// 存储的方式就是key value

// var stu = {

// 'name':'panda',

// 'age':22,

// 'fav':'soup'

// };

// console.log(stu);

// 点语法,相当于get和set语法

// alert(stu.name);

// 使用Object创建对象

// function add() {

// }

// add()

// Object构造函数的特点

// 1.首字母大写

// 碰见构造函数，要想创建对象就是用new

// var obj = new Object();

// obj.name = 'xiaoming';

// obj.age = 45;

// console.log(obj);

// ----------------------------------构造函数--------------------------------------

// 1.函数名首字母要大写

// 2.构造函数不需要return

// 3.为对象添加成员变量 this.name = 'panda'

// var Stu = function () {

// this.name = 'panda';

// this.age = 18;

// this.fav = function(){

// console.log('boy')

// }

// };

// // 以上的方式每次new一个对象，各种属性都是相同的，不推荐这样去使用

// // 创建这个对象

// var s = new Stu();

// console.log(s);

// var s1 = new Stu();

// console.log(s1);

// ---------------------推荐使用的构造函数方式-------------------------

function Animal() {

this.name = 'hua';

this.age = 18;

this.fav = function () {

console.log(this.age)

}

var a = new Animal();

a.fav();

</script>

18-String_Number

// 内置对象

// String 字符串对象

var str = 'hello panda';

console.log(str.length);

// 大写转换

var bigstr = str.toUpperCase();

console.log(bigstr);

// 小写转换

console.log(bigstr.toLowerCase());

// 两个参数，一个是分割的符号依据，一个是限制的长度

console.log(str.split(' ',2));

// 提取哪个字符到哪个字符之间的长度显示为字符串

console.log(str.substring(1,7));

// number

// 1.将bumber类型转换为字符串类型

var num = 123.23;

var numStr = num.toString();

console.log(numStr);

console.log(typeof (numStr));

// 2.保留一位小数，可以设置保留几位小数

var newNum = num.toFixed(1);

console.log(newNum);

</script>

19-Date的使用

// 创建日期对象

var myDate = new Date();

// 获取一个月中的某一天

myDate.getDate();

console.log(myDate);

// 获取当天的日期和时间

console.log(Date());

// 获取月份

console.log(myDate.getMonth()+1);

console.log(myDate.getDay());

console.log(myDate.getFullYear());

console.log(myDate.getTime());

</script>

20-Math对象的使用

// math对象用来执行数学的一些简单运算

// ceil向上取整数

var x = 1.234;

y = Math.ceil(x);

console.log(y);

// floor向下取整数

var a = Math.floor(x);

console.log(a);

// 求这两个输入的最大值和最小值

console.log(Math.max(1,5,6));

console.log(Math.min(1,56,8));

// 经常使用随机数包含0 不包含1

var ran = Math.random();

console.log(Math.floor(ran*100)+100);

// min~max之间的随机数 min+Math.random()*(max-min)

</script>

21-定时器的用法

// setInterval()方法可以根据指定的周期来调用函数或计算表达式

// setInterval()会不停的调用函数，直到直到clearInterval被调用或窗口被关闭

// 由setInterval()返回的ID值可用作直到clearInterval()方法的参数

// setTimeout()在指定了毫秒数之后调用函数或计算表达式

// setTimeout()本身只执行一次，如果想多次调用请执行setInterval()或者在code中进行多次调用

var n = 0;

var ti = window.setInterval(function () {

n++;

console.log(n);

},1000);

// var a = 0;

setTimeout(function () {

// a ++;

console.log(ti);

clearInterval(ti);

},5000);

</script>

22-正则表达式创建

var str = 'panda boy';

var reg = new RegExp('panda', 'g');

console.log(reg.test(str));

var reg1 = /ccc/g;

console.log(reg1.test(str));

console.log(str.match(reg));

// 正则表达式内有 replace test match search spilt

</script>

23-元字符和正则表达式练习案例

24-模态框案例

什么是dom？

DOM 是 Document Object Model（文档对象模型）的缩写。

规定把浏览器的所有的标签设置为树状结构，每个标签看做文档中的节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模态框</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        button{
            margin: 0 auto;
            display: block;
            color: #333333;
            font-size: 28px;
        }
        #box{
            width: 100%;
            height: 100%;
            background-color: #999999;
        }
        #content{
            position: relative;
            top: 150px;
            width: 400px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: black;
            background-color: #E6E6FA;
            margin: 0 auto;
        }
        #span1{
            position: absolute;
            color: red;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #FFFFFF;
        }
    </style>
</head>
<body>
    <button id="btn">弹出</button>
</body>
<script type="text/javascript">
        // console.log(document);
        // 获取dom元素
        var btn = document.getElementById('btn');
        // console.log(btn);
        // 创建div dom元素
        var oDiv = document.createElement('div');
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');
        oDiv.id = 'box';
        oP.id = 'content';
        oSpan.id = 'span1';
        oP.innerHTML = '模态框启动！';
        oSpan.innerHTML = 'X';
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);
    btn.onclick = function () {
       // 动态的添加标签到body中
        this.parentNode.insertBefore(oDiv,btn);
    };
    oSpan.onclick = function () {
        oDiv.parentNode.removeChild(oDiv)
    };
</script>
</html>

View Code

Win a contest, win a challenge