前端
远方的原
这个作者很懒,什么都没留下…
展开
-
使用原生js实现按钮的全选功能,简单清晰
1.相信有很多朋友在学习前端原生JS的时候,都有遇到过实现全选按钮的需求吧。废话不多说直接上代码吧!2.其实实现这个功能不难,我们需要有的是实现这个功能时候的编码思想。原创 2022-07-04 10:26:33 · 558 阅读 · 1 评论 -
简单总结一下几种继承的方法,简单易懂
1.原型链继承。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />原创 2022-03-11 13:37:34 · 601 阅读 · 0 评论 -
通过点击按钮,实现图片的切换。最简单的js方法!
大家可以看到上面的图片,以及它的两个按钮。废话不多说,开始展示代码!1.首先是HTML结构代码,非常简单。<body> <div class="banner"> <img id="img" src="img/1.jpg" alt=""> <p> <button id="btnPrev">上一张</button>...原创 2021-08-11 15:36:12 · 17205 阅读 · 0 评论 -
找出数组中出现次数最多的数,并且打印该数及次数!
废话不多说,先上代码。// 找出一个数组中每个数出现次数,并打印出那个数及其出现的次数var arr = [1, 2, 3, 4, 5, 5, 9, 4, 3, 2, 4];// 定义一个空的对象var obj = {};// 遍历一下数组for (var i = 0; i < arr.length; i++) { // 查找一下这个对象中是否有数组中的数 if (obj[arr[i]]) { // 有的话就自增1 obj[arr[i]]原创 2021-08-05 20:57:56 · 1429 阅读 · 0 评论 -
用css让图片动起来,亲测有效,推荐使用!
废话不多说,先上代码!body { position: relative;}.animate { width: 500px; height: 500px; border-radius: 50%; background-color: thistle; margin: 0 auto; position: absolute; animation: run1 5s linear 1s infinite;}.young { posi原创 2021-08-04 19:04:30 · 2717 阅读 · 0 评论 -
九九乘法表的写法,简单易懂!
1.首先需要明白,九九乘法表是有9行的。并且,行数与列数是对等的关系。比如说,第一行是1*1,第二行是,2*1、2*2。以此类推,使用双层for循环去做,外面的for循环,对应的是相应的行数九行。var str = ''; for(var i = 1;i<=9;i++) { for(var j = 1; j<=i;j++) { str += j+'*'+i+'='+j*i+'\t';原创 2021-08-01 21:15:00 · 1042 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(14天)
1.Tab栏切换:<style> body{ margin: 0; padding: 0; } /* .tab { background-color: pink; } */ .tab_list { display: block; ...原创 2021-05-06 19:55:31 · 252 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(13天)
1.排他思想 <style> button{ width: 80px; height: 50px; } </style><body> <button>点我呀</button> <button>点我呀</button> <button>点我呀</button原创 2021-05-04 19:50:04 · 213 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(12天)
1.事件三要素1.0 事件是有三部分组成 事件源 事件类型 事件处理程序事件源 :事件被触发的对象 谁 按钮事件类型:如何触发 什么事件 比如鼠标点击(onclick)还是鼠标经过 还是键盘按下事件处理程序:通过一个函数赋值的方式完成 <button id="btn">中原</button> <script> var btn = document.getElementById('btn'); bt...原创 2021-04-30 21:54:52 · 215 阅读 · 1 评论 -
javascript从入门到高级,每天不停更新知识点(11天)
1.JS的组成:ECMAScript:javascript语法DOM: 页面文档对象模型BOM:浏览器对象模型2.DOM:文档对象模型:是w3c组织推荐的处理可拓展标记语言(html,xml)的标准编程接口。3.DOM树: 文档:一个页面就是一个文档,dom中使用document表示; 元素:页面中的所有标签都是元素,DOM中使用element表示; 节点:网页中的所有内容都是节点(标签,属性,文本,注释),DOM中使用node表示; 4.获取元素:原创 2021-04-29 20:32:15 · 229 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(10天)
1.检测是否为数组:var arr = {}; var obj = []; console.log(arr instanceof Array);//false //h5新增方法 Array.isArray(参数) console.log(Array.isArray(obj)); //true2.翻转数组:reverse()var arr = [100,200,300,400];console.log(arr.reverse());//[400, 300, ...原创 2021-04-27 20:04:22 · 187 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(9天)
1.Math对象:1.0 math数学对象 不是一个构造函数,所以不需要new调用,直接使用里面的属性和方法就行。2.封装自己的数学对象:var myMath = { PI:3.14, max:function(){ var max = arguments[0]; for (let i = 0; i < arguments.length; i++) { ...原创 2021-04-27 20:02:24 · 243 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(8天)
1.对象是由属性和方法组成的:对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。1.0属性:事物的特征。1.1 行为:事物的行为。2.创建对象的三种方式:2.0利用字面量创建对象:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。var obj = { uname : '中烟', age : 13, sex: '男', ...原创 2021-04-26 19:11:29 · 224 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(7天)
1.javascript作用域:代码名字(变量)在某个范围内起作用和效果 目的是为了提高程序的可靠性,更重要的是减少命名冲突。2.js的作用域(es6)之前:全局作用域 局部作用域3.全局作用域:整个script标签 或者是一个单独的js文件4.局部作用域:在函数内部就是局部作用域这个代码的名字只在函数内部起作用<script> //全局作用域 var num = 1 ; console.log(num); ...原创 2021-04-25 18:29:37 · 207 阅读 · 0 评论 -
清除浮动的方法,干货哦!
你是否遇到子盒子浮动上去后,父盒子的长度变为0,下面的盒子顶了上去呢?下面有两种解决方法。1.双伪类清除法:最为常用 .clearfix:before,.clearfix:after { content: ""; display: table;}.clearfix:after { clear: both;}.clearfix { *zoom: 1;}2.单伪类清除法:.clearfix:after { content: "";原创 2021-04-24 21:08:32 · 355 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(6天)
1.函数1.0函数的封装:把一个或者多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。1.1利用函数计算1-100之间的累加和 function getNum() { var sum = 0; for (var i = 1; i <= 100; i++) { sum += i; } console.log(sum); }原创 2021-04-24 15:37:24 · 194 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(5天)
1.数组的索引1.0索引(下标):用来访问数组元素的序号(数组下标从0开始)var arr =['小白','小黑','小黄'];索引号: 0 1 21.2 我们可以通过数组名[索引号],获取数组元素。var arr = [123,'您好',true]; console.log(arr[2]);//trueconsole.log(arr[0]);//123 console.log(arr[3]);//没有这个数组元素 undefined2.遍历数组2.0原创 2021-04-23 20:50:54 · 170 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(4天)
1.循环:从1加到100的案例 var sum = 0; for( var i = 1; i<=100; i++ ) { sum += i ; } console.log(sum);2.求1-100之间的所有数的平均值 var sum = 0; var average = 0; for( var i = 1; i<=100; i++ ) { sum += i ; } average = sum/100; console.log(av原创 2021-04-22 19:02:15 · 193 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(3天)
1.判断闰年案例: var year = prompt('请您输入年份'); if (year % 4 == 0 && year %100 !=0||year%400==0) { alert('是闰年'); }else{ alert('是平年'); }2.判断成绩的案例: var score = prompt('请您输入您分数');原创 2021-04-20 13:10:16 · 69 阅读 · 0 评论 -
javascript从入门到高级,每天不停更新知识点(2天)
1. 变量语法的拓展:1.1更新变量:一个变量给多个值,以最后一次给的值为准 var myname = '中国'; console.log(myname); myname = '校园'; console.log(myname);1.2声明多个变量:同时声明多个变量时,只需要写一个var ,多个变量名之间使用英文逗号隔开。 var age = 14, size = 3,原创 2021-04-17 15:24:42 · 67 阅读 · 0 评论