会过敏的企鹅-CSDN博客

原创 JavaScript 切换图片

JavaScript 切换图片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...

2019-06-04 19:54:53 294

原创 JavaScript 中字符串

JavaScript 中字符串 1. 对象的创建方法 var txt = new String("hello"); console.log(txt,txt.valueOf(),txt.toString(),typeof txt) 2.只有引用类型可以添加自定义属性 txt.age = 18; 3.基本类型字符串 txt = "hello"; // 访问的时候...

2019-06-04 19:44:54 204

原创 JavaScript 数组内置方法补充

JavaScript 数组内置方法补充 1.forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数注意: forEach() 对于空数组是不会执行回调函数的。 var numbers = [4,9,16,25]; function fn(value,i) { console.log("测试回调打印",value,i); } numbers.forEach(f...

2019-06-04 10:34:38 334

原创 JavaScript 中基本类型和引用类型赋值的区别

JavaScript 中基本类型和引用类型赋值的区别一、基本类型(Number、String、Undefined、Null、Boolean): 1.基本类型的值是不可变的,我们不能给基本类型添加属性和方法验证:基本类型的值不可变 var person = "jozo"; // 添加age属性 person.age = 22; console.log(perso...

2019-06-03 20:44:48 383

原创 JavaScript 中的数组的内置方法

JavaScript 中的数组的内置方法 1. 创建数组的两种方式方式一： var numbers = [10,20,30]; console.log(numbers); 如图所示：方式二： numbers = new Array(100,200,300); console.log(numbers); 如图所示： 2. 二维数组把所有的数...

2019-06-01 15:26:24 299

原创 JavaScript 中随机生成7个数字,保存到数组中,范围[1-10]----不能重复

JavaScript 中随机生成7个数字,保存到数组中,范围[1-10]----不能重复 arr.indexOf(value) 假如没有:返回-1 有:返回下标 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name...

2019-06-01 14:49:31 3288

原创 JavaScript 自定义函数

JavaScript 自定义函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...

2019-05-31 18:10:16 440

原创 JavaScript 随机变颜色和高度

JavaScript 随机变颜色和高度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...

2019-05-31 18:06:42 374

原创 JavaScript Math内置函数

JavaScript Math内置函数 /* Math 对象 pow(x,y) 返回 x 的 y 次幂 sqrt(x) 返回 x 的平方根 */ console.log(Math); console.log(Math.PI); var n = Math.abs(-10); console.lo...

2019-05-31 17:57:54 394

原创 JavaScript中编程将所有“水仙花数”打印出来，并打印其总个数。

JavaScript中编程将所有“水仙花数”打印出来，并打印其总个数。 “水仙花数”是一个各个位立方之和等于该整数的三位数(个位数立方 + 十位数立方 + 百位数立方 = 这个整数)。方法一： var count = 0; //水仙花总个数数 var numArr = []; // 保存水仙花数; // 百位数 for(var i = 1; i < ...

2019-05-31 17:46:51 2776

原创 JavaScript 给定某年某月,输出其为这一年的第几天

JavaScript 给定某年某月,输出其为这一年的第几天方法一: var year = 2000; var month = 3; var day = 10; var sum = 0; if (month == 1) { sum = 0; } else if (month ==...

2019-05-31 17:40:46 402

原创 JavaScript 中用循环找数组中的最大最小值

JavaScript 中用循环找数组中的最大最小值 //var numbers = [100,200,888,109,1,5,100]; 找里面的最大值,以及它所在下标 // 假设一个最大值 var numbers = [100,200,888,109,1,5,100]; var max = numbers[0]; var min ...

2019-05-31 17:31:00 1147

原创 JavaScript 循环for、while、do while

JavaScript 循环for、while、do while 一、for 循环 // 1-10; 循环 // i++ 自增i,控制循环结束 for(var i = 1; i <= 10; i++){ document.write(i+','); } document.write("<hr>跳出循环时 i = "+i); 如图所示: // ...

2019-05-30 17:55:09 200

原创 JavaScript 点击灯泡开关

JavaScript 点击灯泡开关首先导入两张照片：方法一: <img src="./img/1.gif" alt="" onclick="toggle()" id="bulb"> <script> var bulbImg = document.getElementById('bulb'); ...

2019-05-30 17:26:13 2835

原创 JavaScript 条件语句 if 、switch、三元运算符

JavaScript 条件语句 if 、switch、三元运算符一、if 语句 // 找最大值,保存最大值 var a = 160, b = 20, c = 135; // 假设a是最大值 var max = a; if (max < b) { max = b; } if (max < c) { max = c; } console.log(ma...

2019-05-29 19:47:46 252

原创 JavaScript 中比较、逻辑运算符

JavaScript 中比较、逻辑运算符一、比较运算 1.比较运算：返回true 或者 false 2.一个等于号是赋值,两个或者三个才是比较 var x = 18; var value = x == "18"; //一个疑问句 x是不是等于18？ console.log(value); // 返回一个布尔值 var value = x >= 18; //一个疑...

2019-05-29 19:30:27 275

原创 JavaScript三种引入类型:对象、数组、函数

JavaScript 三种引入类型: 对象(Object) 数组(Array) 函数(Function) 一、对象(Object) var person = { // key:value // 对象下的属性 name: "lll", age: 18, sex: "男", girl:{ name:"小宁" }, // 对象下的方法 buyBread:functio...

2019-05-29 17:48:49 210

原创 JavaScript基础语法

JavaScript基础语法一、js的三种调试方式 1.控制台调试输出(最优方式) console.log("hello word"); console.log("学习JavaScript"); 如图所示： 2.document.write("") document.write("hello world"); document.write("<h...

2019-05-29 17:24:49 115

原创单行文本超出隐藏后使用省略号表示超出部分

单行文本超出隐藏后使用省略号表示超出部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...

2019-05-27 17:56:07 175

原创利用border制作小三角

利用border制作小三角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...

2019-05-27 17:40:40 151

原创清除图片底部离父元素的间距

图片默认底部距离父元素有一点点间隙 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...

2019-05-27 17:12:12 267

原创页面高度百分百

让图片铺满,并且可以滚动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

2019-05-27 16:52:39 321

原创 relative、absolute定位居中以及小总结

relative、absolute 定位小总结: 一、relative 定位总结: 特点: 1.除了位置被left等四个属性影响,对元素没有任何影响(大小) 2.只设置position属性,元素没有任何变化 3.元素的参照位置是自身的初始位置 4.定位偏移后,元素的位置会被保留 5.定位元素会被提升层级,会遮挡没有定位的元素;如果都有定位,下面的元素层级会大于上面的元素 ...

2019-05-27 16:36:09 1747

原创清除浮动的三种方式

清除浮动的三种方式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...

2019-05-27 16:04:00 107

原创 CSS中Margin的注意问题

Margin中有三种问题一、同级塌陷谁小塌陷到大的里面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...

2019-05-23 15:40:52 811

原创 css中display问题

display可以将元素变为内联元素,也可以将元素变为块元素一、display:inline 将元素变为内联元素(同一行显示块元素) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content...

2019-05-22 20:02:37 325