首页
Search
1
pc端小米官网首页部分练习
659 阅读
2
js中的内置对象
618 阅读
3
CSS实现动画效果
597 阅读
4
DOM(节点操作children-自定义属性-)
575 阅读
5
CSS中的选择器
549 阅读
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
登录
Search
标签搜索
冒泡排序
css
float
clear
边框
字体
font
meta标签
声明bianl
标识符
Number
数据类型
css常用选择器
css关系选择器
css属性选择器
css伪类选择器
css伪元素
css选择器的权重
a元素的伪类
浮动
Typecho
累计撰写
35
篇文章
累计收到
0
条评论
今日撰写
0
篇文章
首页
栏目
HTML
标签
JAVAScript
js数组
js函数
js基础
js循环
js对象
DOM
CSS
VUE
exercise
js练习
HTML/CSS练习
页面
用户登录
登录
搜索到
18
篇与
的结果
2022-01-29
js获取元素
导读:getElementById()获取元素get :获得 element :元素 by :通过 驼峰命名法参数 id 是大小敏感的字符串返回的是一个元素对象 var timer = document.getElementById('time'); console.log(typeof timer)打印我们返回的元素对象 更好的查看里面的属性和方法getElementByTagName()根据标签名获取使用 getElementByTagName('标签名') 注意: 因为得到的是一个对象的集合,所以我们想要操作里面的元素就需要遍历,得到元素对象是动态的返回的是 获取过来元素的集合,以伪数组形式存储我们想要依次打印里面的元素对象我们可以采取遍历的方式如果页面中只有一个li,发返回的还是伪数组如果页面中没有这个元素返回的空的伪数组的形式返回的是伪数组,所有就有序列号,从0开始 var lis = document.getElementsByTagName('li'); console.log(lis); console.log(lis[0]); for(var i = 0; i < lis.length; i++){ console.log(lis[i]); }还可以获取某个元素(父元素)内部所有指定标签名的子元素element.getElementsByTagName('标签名');注意:父元素必须是单个对戏(必须指明是哪一个元素对象).获取的时候不包括父元素自己一般不推荐这样写,用的话也是id,后边会有更简单的方法/*var ol = document.getElementByTagName('ol');console.log(ol[0].getElementByTagName('li'));*/ var ol = document.getElementById('ol') console.log(ol.getElementsByTagName('li')) 这种学完后边的基本也不用H5新增获取元素的方法通过HTML5新增的方法获取document.getElementsByClassName('类名');//根据类名返回元素对象集合document.querySelector('选择器');//根据指定选择器返回第一个元素对象document.querySelectorAll('选择器');//根据指定选择器返回 //1.getElementsByClassName 根据类名获得某些元素集合 var boxs = document.getElementsByClassName('box'); console.log(boxs); //2.querySelector 返回指定选择器得第一个元素对象 切记 里面的选择器需要加上对应符号 var firstBox = document.querySelector('.box'); console.log(firstBox); var nav = document.querySelector('#nav'); console.log(nav); var li = document.querySelector('li'); console.log(li); //3.qierySelectorAll('选择器');//根据指定选择器返回 var allBox = document.querySelectorAll('.box'); console.log(allBox);获取特殊元素(html和body)获取body元素document.body //返回body元素对象获取html元素document.documentElement //返回html元素对象 //1.获取body元素 var bodyEle = document.body; console.log(bodyEle); console.dir(bodyEle); //2.获取html元素 var htmlEle = document.documentElement; console.log(htmlEle);
2022年01月29日
322 阅读
0 评论
0 点赞
2022-01-05
js中Date()案例
导读:格式化时分秒要求封装一个函数返回当前的时分秒 格式为08:08:08 var date = new Date(); console.log(date.getHours());//时 console.log(date.getMinutes());//分 console.log(date.getSeconds());//秒 //要求封装一个函数返回当前的时分秒 格式为 08:08:08 function getTime(){ var time = new Date(); var h = time.getHours(); h = h < 10 ? '0'+ h : h; var m = time.getMinutes(); m = m < 10 ? '0'+ m : m; var s = time.getSeconds(); s = s < 10 ? '0'+ s : s; return h +':' + m + ':' + s ; } console.log(getTime());倒计时效果js实现倒计时效果1.核心算法:输入的时间减去现在的时间就是剩余时间,但是不能拿着时分秒相减,比如 05分减去25分 ,结果会是负数的2.用时间戳来做,用户输入时间总的毫秒数减去现在时间的总的毫秒数得到的就是剩余时间的毫秒数3.把剩余时间总的毫秒数转换为天,时,分,秒(时间戳转换为时分秒)转换公式如下: = parseTnt(总秒数/60/60/24); //计算天数 h = parseInt(总秒数/ 60/60 %24); //计算小时 m = parseInt(总秒数/60 % 60); //计算分 s = parseInt(总秒数%60); //计算当前秒数 function countDown(time){ var nowTime = +new Date();//返回当前时间总的毫秒数 var inputTime = +new Date(time);//返回的是用户输入时间总的毫秒数 var times = (inputTime - nowTime) /1000; // times是剩余时间的秒数 var d = parseInt(times / 60 / 60 /24); d = d < 10 ? '0'+ d : d; var h = parseInt(times / 60 / 60 %24); h = h < 10 ? '0'+ h : h; var m = parseInt(times / 60 % 60); m = m < 10 ? '0'+ m : m; var s = parseInt(times % 60); s = s < 10 ? '0'+ s : s; return d + '天' + h + '时' + m +'分' +s + '秒'; } console.log(countDown('2022-1-3 18:00:00'));
2022年01月05日
348 阅读
0 评论
0 点赞
2021-12-27
js中的内置对象
导读:内置对象Math对象其他搜索地址:https://developer.mozilla.org/zh-CN/Math 对象不是构造函数,它具有数学常熟的属性和方法,跟数学相关的运算(求绝对值,最大值,最小值等)可以使用Math中的成员Math解释Math.PI圆周率Math.floor()向上取整Math.ceil()向下取整Math.round()四舍五入就近取整Math.abs()绝对值Math.max()最大值Math.min()最小值Math.random()返回一个随机小数(0 =< x <1)Date()日期对象Date() 日期对象,是一个构造函数,必须使用new 来调用创建我们的日期对象使用Date 如果没有参数 返回当前系统的当前时间var date = new Date();参数的常用的写法 数字型 2021,10,01 或者'2019-10-1 8:8:8'其他部分方法方法名说明代码valueOf()和getTime()获取总的毫秒数,不是当前时间,而是从1970年1月1日开始:--:getFullYear()获取当年dObj.getFullYear()getMonth()获取当月(0-11) 只能返回0-11所以月份必须+1dobj.getMonth()getDate()获取当天日期dObj.getDate()getDay()获取星期几(周日0到周六6)dObj.getDay()getHours()获取当前小时dObj.getHours()getMinutes()获取当前分钟dObj.getMinutes()getSeconds()获取当前秒钟dObj.getSeconds()例子格式化日期 //格式化日期 var date = new Date(); console.log(date.getFullYear());// 返回当前日期的年份 2021 console.log(date.getMonth() + 1 ); // 月份 返回的月份小1个月 所以要+1 console.log(date.getDate()); //返回的是几号 console.log(date.getDay);// 周一返回的是1 周六返回的是6,周日返回的是0 //写一个 2021/12/30 星期五 var year = date.getFullYear(); var month = date.getMonth()+1; var dates = date.getDate(); var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'] var day = date.getDate(); console.log('今天是:' + year + '年' + month + '月' + dates + '日' + arr[day]);时间戳 获得Date 总的毫秒数(时间戳) 不是当前时间,而是1970年1月1日到现在日期 1.通过 valueOf() getTime() var date = new Date(); console.log(date.valueOf()); console.log(date.getTime()); 2. 简单的写法(最常用的写法) var date1 = +new Date(); console.log(date1); 3.h5新增加获取总的毫秒数 console.log(Date.now());数组(方法)方法名说明返回值push(参数1..)在数组的末尾,添加一个或者多个元素返回新的长度unshift(参数1..)向数组的开头添加一个或者多个数组返回新的长度pop()删除数组的最后一个元素返回被删除的元素shift()删除数组的第一个元素返回被删除的元素reverse()颠倒数组元素的顺序(翻转数组)改变原来数组的,返回新数组sort()对数组的元素进行排序改变原来数组,返回新数组添加删除数组元素的方法var arr = [1,2,3]; 末尾添加元素 arr.push(4); console.log(arr.push(5)); 输出结果 [1,2,3,4,5]; 数组开添加数组元素 console.log(arr.unshift(0,'red')); 删除数组的最后一个元素 console.log(arr.pop()); 删除数组的第一个元素 console.log(arr.shift()); 检测是否为数组的方法方法1 instanceof 运算符 可以检测是否为数组Array.isArray(); H5新增的方法,ie9以上才支持 <script> //翻转数组 function reverse(arr){ var newArr = []; if(arr instanceof Array){ for(var i = arr.length - 1; i >=0; i--){ newArr[newArr.length] = arr[i] } return newArr; }else{ return 'error 这个参数要求必须为数组' } } console.log(reverse([1,2,3])); console.log(reverse(1,2,3)); //检测是否为数组 //方法1 instanceof 运算符 它可以用来检测是否为数组 var arr = []; var obj = {}; console.log(arr instanceof Array); console.log(obj instanceof Array); //(2) Array.isArray(); H5新增的方法, ie9以上才行 console.log(Array.isArray(arr)); console.log(Array.isArray(obj)); </script>数组排序(方法)冒泡排序 sort();固定写法var arr1[13,2,1,33,5,4] arr.sort(function(a,b){ return a - b; 升序的顺序排序 return b - a; 降序的顺序排列 });返回数组元素索引号返回数组元素索引号①.indexOf(数组元素) 作用就是返回该数组元素的索引号,从前面开始查找②.lastIndexOf(数组元素) 从后面开始查找只返回第一个瞒住条件的索引号如果在该数组找不到元素,则返回 -1字符串内置对象(方法)数组转换为字符串toString() 将我们的数组转换为字符串,逗号分割每一项 返回一个字符串join(分隔符) 方法用于把数组中的元素转换为一个字符串 返回一个字符串数组补充,字符串同理方法说明返回值concat()链接两个或多个数组,不影响元素返回一个字符串slice()数组截取slice(begin,end)返回被截取新项目的新数组splice()数组删除splice(第几个开始,要删除个数)返回被删除项目的新数组基本包装类型基本数据类型var str = 'andy';console.log(str.length);对象 才有属性和方法 复杂数据类型才有属性和方法基本包装类型:就是把简单数组类型 包装称为了 复杂数据类型(1) 把简单数据类包装为复杂数据类型(2)执行步骤 ①.把简单数据类型包装成了复杂数据类型 var temp = new String('andy'); ②.把临时变量的值给str str = temp; ③销毁这个临时变量 temp = null;
2021年12月27日
618 阅读
0 评论
0 点赞
2021-12-27
js创建对象
导读:JS中对象一.认识对象在 JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串,数值,数组,函数等。 对象是由属性和方法组成的 属性:事物的特征,在对象中用属性来表示(常用名词) 方法:事物的行为,在对象中用方法来表示(常用动词)二.创建对象1.字面量创建对象1.1 利用对象字面量创建对象{} var obj = {}; //创建:创建了一个空的对象 ①.对象字面量:就是花括号{}里面包含了表达这个事物(对象)的属性和方法 {}里面采取键值对的形式表示 键:相当于属性名 值:相当于属性值,可以是任意类型的值(数字类型,字符串类型,布尔类型,函数类型) ②.多个属性或者方法中间用的逗号隔开的 ③.方法冒号后面跟的是一个匿名函数 var obj = { uname: '张三疯', age: 18, sex: '男', sayHi: function () { console.log('hi~'); } }①.对象的使用①.调用对象的属性 我们采用 对象名.属性名 console.log(obj.uname); 调用属性另一种方法 对象名['属性名'] console.log(obj['age']); 调用对象的方法 对象名.方法名() obj.sayHi();2利用new Object创建对象 利用 new Object 创建对象 var obj = new Object(); //创建一个空对象 我们是利用 等号 = 赋值的方法 添加对象的属性和方法 obj.uname = '张三疯'; obj.sex = '男'; obj.age = 18; obj.sayHi = function(){ console.log('hi~'); } console.log(obj.age); console.log(obj['uname']); obj.sayHi();3.利用构造函数创建对象利用构造函数创建对象 构造函数的语法格式: function 构造函数名(){ this.属性 = 值; this.方法 = function(){} } new 构造函数(); function Star(uname,age,sex){ this.name = uname; this.age = age; this.sex = sex; this.sing = function(sang){ console.log(sang); } } var zs = new Star('张三',18,'男');//返回类型为对象object console.log(zs.name); zs.sing('冰雨'); console.log(typeof zs); var ls = new Star('李四',28,'女'); console.log(ls.sex); 1. 构造函数名字首字母要大写 2.构造函数不需要return也能返回值 3.我们只要new Star() 调用函数就创建一个对象 4.构造函数必须使用 new 5.我们的属性和方法前面必须添加 this 构造函数和对象区别 构造函数:如Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class) 创建函数,如 new Stars(),特指某一个1,通过new 关键字创建对象的过程我们也称为对象示例化 new关键字执行 1.在内存中创建一个新的空对象 2.让this指向这个新的对象 3.执行构造函数里面的代码,给这个新对象添加属性和方法 4.返回这个新对象(所以构造函数里面不需要return)for in 遍历对象 /* for in 遍历对象 语法: for(变量 in 对象){ } */ var obj = { name: '张三', sex: '男', age: 18, }; for(var k in obj){ console.log(k); // k变量 输出得到的是属性名 console.log(obj[k]);//obj[k] 得到的是 属性值 } 小结 1.对象可以让代码结构清晰 2.对象复杂数据类型object 3.本质:对象就是一组无序的相关属性和方法的集合 4.构造函数泛指某一大类,比如苹果,不管是红色苹果还是绿色苹果,都统称为苹果 5.对啊啊想实例特指一个事物,比如这个苹果 6.for..in语句用于对 对象的属性进行循环操作
2021年12月27日
383 阅读
0 评论
0 点赞
2021-12-20
js函数的使用和声明
导读:认识js函数 函数:是做某件或者实现某种功能 关键字:function 函数名(){} 使用函数必须调用函数,否则不会输出结果 function getSum(){ console.log('这是第一次使用函数'); } getSum(); // 利用函数求1-100的和 var sum = 0; function getSum(){ for(var i =1; i<=100; i++){ sum +=i; } console.log(sum); } getSum(); {lamp/}函数的参数函数的参数 形参:定义的函数括号里边的为形参 形参默认值为undefined 输出结果为NaN 实参:调用函数括号里边的为实参 function getSum1(形参1,形参2){ } getSum1(实参1,实参2); 注意: 1.如果实参的个数和形参个数一致,则正常输出结果 2.如果实参的个数多余形参的个数,会取到形参的个数 3.如果实参的个数小于形参,多余的形参定位为undefined,最终结果就是NaN 4.形参可以看做是不同声明的变量,声明变量没有接收值就是undefined 5.建议 我们尽量让实参个数和形参相匹配 // 列子1 求任意两个数的和 /* function getSum2(num1,num2){ console.log(sum1 + sum2); } getSum2(5,10); */ // 例子2:求任意两个数之间的和 var sum = 0; function getSum3(num3,num4){ for(var i = num3; i<=num4; i++){ sum +=i; } console.log(sum); } getSum3(1,100); 函数的返回值 函数的返回值格式 function 函数名(){ return 需要返回的结果; } 函数名(); 1. 我们函数只是实现某种功能,最终的结果需要返回值的调用者函数名 ,通过return实现 2. 只要函数遇到return 就把后面的结果 返回给函数值 函数名() = return 后面的结果 3. 代码验证 function getResult(){ return 66; } getResult(); //getResult() = 66 console.log(getResult()); // 例子 求任意两个数的和 function getSum(num1,num2){ return num1 + num2; } console.log(getSum(1,2)); // 例子2 求两个数的最大值 function getMax(num3,num4){ if(num3 > num4){ return num3; }else{ return num4; } //方法二 return num3 > num4 ? num3 : num4; } console.log(getMax(1,5)); console.log(getMax(2,6)); 例子3 求数组的最大值 function getArrMax(arr){ var max = arr[0]; for(var i = 1; i<= arr.length; i++){ if(arr[i] > arr[0]){ max = arr[i] } } return max; } var maxRulest = getArrMax([1,2,10,3,65,27,100]); console.log(maxRulest); 注意: 1.当出现return 时,后边出现的语句不在执行 2.当return 有多个返回值时,只会返回最后一个值 3.当函数没有数据时返回unidentified break,continue,return的区别 break : 结束当前的循环体 continue:跳出本次循环,继续执行下次循环 return: 不仅可以退出循环,还能够返回return 语句中的值,同时还可以 结束当前的函数体内的代码{lamp/}函数中arguments的使用arguments 的使用 只有函数才有arguments对象 而且每个函数都内置好了这个arguments function fh(){ // console.log(arguments); //里面存储了所有传递过来的实参 arguments = [1,2,3] // console.log(arguments.length); //console.log(arguments[2]); // 我们可以按照数组的方式遍历arguments for(var i = 0;i < arguments.length;i++){ console.log(argumennts[i]); } } fn(1,2,3); fn(1,2,3,4,5); 伪数组 并不是真正意义上的数组 1.具有数组的 lenght 属性 2. 按照索引的方式进行存储 3.它没有真正数组的些方法 pop() push() 等等 利用函数求任意个数的最大值 function fn() { var max = arguments[0]; for(var i=1; i < arguments.length; i++){ if(arguments[i] > max){ max = arguments[i]; } } return max; } console.log(fn(1,10,20,3,100,200)); console.log(fn(1,10,20,3,100,300));{lamp/}函数的调用 /*用户输入年份,来判断2月是否为闰年来返回天数*/ function backDay() { var year = prompt('请输入要查询的年份:'); if(isRunYear(year)){ alert('当前年份为闰年2月为29天'); }else{ alert('当前年份为平年2月为28天'); } } backDay(); function isRunYear(year){ var flag = false; if(year % 4 == 0 && year % 100 != 0 || year % 400 ==0){ flag = true; } return flag; }{lamp/}函数的两种声明 函数的两种声明方式 1.利用函数关键字自定义函数(命名函数) function fn(){ } fn(); 2.函数表达式(匿名函数) var 变量名 = function(){}; var fun = function(aru){ console.log('我是函数表达式'); console.log(aru); } fun('123'); 注意: 1.fun是变量 不是函数名 2.函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数 3.函数表达式也可以进行传递参数2021-12-20 20:51:08 星期一
2021年12月20日
383 阅读
0 评论
0 点赞
1
2
3
4