![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端面试题总结
文章平均质量分 93
哼,小呀么小胖子
怂字何解,从心而已^ω^
展开
-
实现图片懒加载
当一个页面同时加载几千张图片时,会对服务器造成跟大的压力,并且还会导致渲染速度的降低,为了解决这一问题,我们可以想办法让图片出现在我们的可视区域后再加载懒加载原理:图片是否渲染是根据<img>的src属性,所以在图片没有进入可视区域时,先不给src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。懒加载思路:1.加载loading图片2.判断图片是否开始加载3.隐形加载图片4.替换真图片效果图判断图片是否加载的条件为(所以当图片的offse.原创 2020-05-15 21:19:28 · 211 阅读 · 0 评论 -
实现瀑布流布局最简单方法
使用column 属性实现瀑布流 column-count 属性,是分为多少列。 column-gap 属性,是设置列与列之间的距离。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g...原创 2020-05-15 20:49:24 · 383 阅读 · 0 评论 -
实现三栏布局的三种方法
标签<div class="box"> <div class="box_left"></div> <div class="box_right"></div> <div class="box_content"></div> </div>方法一overflow.box{ width: 100%; height: 100vh; ba..原创 2020-05-15 20:37:58 · 353 阅读 · 0 评论 -
实现两栏布局的三种方法
标签<divclass="box"> <divclass="box_left"></div> <divclass="box_right"></div> </div>方法一calc ,注意calc左右要留空格.box{ width: 100%; height: 100vh; background: rgb(88, 144, 196); ...原创 2020-05-15 20:30:08 · 696 阅读 · 0 评论 -
express模块之简易的学生请假系统
简易的学生请假系统该管理模块是基于node下面的express模块和jq来写的,该请假系统只是在练习本人学到的一些知识,还有很多功能暂未写出最终样式图如下图所示:登录页面老师列表页面老师新增学生信息老师管理学生的请假信息学生进入自己的请假列表学生新增自己的请假信息分析学生请假系统中存在两种身份老师---------管理者(审批是否同意学生请假)学生-----...原创 2019-12-29 16:58:53 · 1039 阅读 · 2 评论 -
ajax与数据库的应用之注册,登录,建表,删除,修改,模糊查询
成果展示第一步公共导入数据库部分php<?php//防止字符乱码@header("Content-Type:text/html;charset=utf-8");// 连接mysql mysqli_connect("数据库ip/主机","用户名","密码");$conn = mysqli_connect("localhost:3306", "root", "root"...原创 2019-11-27 10:49:56 · 410 阅读 · 0 评论 -
弹幕改进
与之前相比添加了暂停和开始和隔一段时间才能发送功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <...原创 2019-11-19 14:22:01 · 127 阅读 · 0 评论 -
js学习之cooking
什么是cookie:cookie是一些数据(存储用户数据)cookie存在哪里:存储于你电脑上的文本文件中cookie的作用:记录浏览器中用户的信息cookie技术又叫会话跟踪技术前后端都可以使用cookie的主要内容名称(cookie的唯一标识) name内容(cookie存放的内容) content域名(cookie所能使用的域名,即文件存放的文件夹) 路径(cookie...原创 2019-10-24 08:20:30 · 728 阅读 · 0 评论 -
简易购物车js
最终样式:所需知识点:childern:获取当前元素的所有子元素节点parentNode:获取当前元素的父元素节点firstElementChild:获取当前元素的第一个子元素节点lastElementChild:获取当前元素的最后一个子元素节点nextElementSiblig:获取当前元素的下一个兄弟元素节点(IE6,7,8不支持)previousElementSiblig:获...原创 2019-10-15 21:03:01 · 302 阅读 · 1 评论 -
简易轮播图js
最终效果所用知识点定时器每隔1000ms执行一次count函数clearInterval() 停止setInterval方法setInterval(function(){ count(); },1000)对元素进行修改:对内容的修改表单: ele.value非表单: ele.innerText=’ ’ (结果只为文本)ele.innerH...原创 2019-10-15 10:58:17 · 139 阅读 · 0 评论 -
简单的键盘控制方块自己移动
所需要的知识点:元素样式宽,高 width / height元素内容宽,高 ele.clientWidth / ele.clientHeightpadding+width / padding+height实际宽,高 ele.offsetWidth /ele.offsetHeightpadding+border+width /padding+border+height...原创 2019-10-14 21:52:32 · 525 阅读 · 0 评论 -
简单的键盘控制方块移动
所需要知识点元素样式宽,高 width / height元素内容宽,高 ele.clientWidth / ele.clientHeightpadding+width / padding+height实际宽,高 ele.offsetWidth /ele.offsetHeightpadding+border+width /padding+border+height相...原创 2019-10-14 21:15:28 · 436 阅读 · 0 评论 -
留言板
最终样式所用知识点//声明一个日期函数var date=new Date();//分别获取当时的年,月,日,时,分,秒,星期 var year=date.getFullYear(); var month=date.getMonth()+1; //在js中,0代表一月 var day=date.getDate(); var hour=dat...原创 2019-10-14 20:43:26 · 176 阅读 · 0 评论 -
js中常用表单事件及控制文本框中还能输入多少字
onfocus 文本框聚焦onblur 文本框失焦(文本框先聚焦再失焦时触发)onchange 前后两次文本框内容发生变化,中间的输入对其不造成影响,一次触发(失焦状态)oninput 文本框输入内容发生变化,多次触发(聚焦状态)控制文本框中还能输入多少字的最终样式代码:<!DOCTYPE html><html lang="en"><h...原创 2019-10-14 14:56:00 · 199 阅读 · 0 评论 -
简单的小广告
规则:每隔5秒在右下角弹出小广告点击小广告跳转点击小广告上的×关闭小广告,但5秒后小广告重新出现若不点击小广告,10秒后小广告自动消失,但5秒后小广告重新出现效果所用知识点:创建事件监听 addEventListener || attachEvent事件绑定函数 addEvent(ele, type, fn)现代浏览器oDiv1.addEventListener('click...原创 2019-10-12 21:10:17 · 167 阅读 · 0 评论 -
简易弹幕
最终效果所用知识点:DOM元素增:document.createElement() //创建元素parent.appendChild() //尾部插入parent.insertBefore(new,old) //从元素前插入parent.innerHTML=’’删:ele.remove() //删除自己parent.removeChild(Child) //删除子...原创 2019-10-12 18:47:08 · 112 阅读 · 0 评论 -
事件的循环绑定与委托
例:点击日历的对应部分对其进行激活,下方内容也对应改变下面将用只用循环绑定对其解答.此题用事件委托分别相对复杂最终样式:所用知识点:事件处理函数中 this关键字可以当前绑定的事件源在JavaScript中,添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能1.每个函数都是对象,都会占用内存。内存中的对象越多,性能就越差2.必须事先指定所有事件处理程序而导致的DOM访...原创 2019-10-12 15:38:28 · 295 阅读 · 0 评论 -
顶部悬浮效果
最终样式所用知识点:dom知识点:可视宽,高 document.documentElement.clientWidth / document.documentElement.clientHeight实际宽,高 document.documentElement.scrollWidth/document.documentElement.scrollHeight滚动条距离上,左边的距离 do...原创 2019-10-12 14:05:06 · 268 阅读 · 1 评论 -
简易进度条
最终样式所用知识点:setInterval(function(){count();},1000)每隔1000ms执行一次count函数clearInterval() 停止setInterval方法可视宽,高 document.documentElement.clientWidth / document.documentElement.clientHeightDOM样式:ele....原创 2019-10-12 13:42:12 · 293 阅读 · 0 评论 -
js中的BOM,DOM知识点
js的组成:ECMAScript 解释器、翻译 兼容性:完全兼容BOM 浏览器对象 兼容性:不兼容(例如IE,谷歌,火狐,不可能兼容)DOM 文档对象 兼容性:部分不兼容BOM(Browser Object Model) 浏览器对象模型BOM是js的核心 window,window对象就是浏览器内置的一个对象,...原创 2019-10-08 19:50:57 · 337 阅读 · 0 评论 -
switch的扩展之简易计算器
最终样式:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http...原创 2019-10-05 16:28:49 · 434 阅读 · 0 评论 -
JavaScript中递归实现排列组合问题
题目:var list = [“a”,“b”]; 得到:[“ab”,“ba”];var list = [“a”,“b”,“c”]; 得到: a [“b”,“c”] [“bc”,“cb”] [“abc”,“acb”]b [“a”,“c”] [“ac”,“ca”] [“ba...原创 2019-09-24 19:56:14 · 320 阅读 · 0 评论 -
js基础知识回顾5
字符串字符串和数组类似,可以通过其索引位置来找到其值charAt(index):找到索引值对应的字符 var str="abd rt 45 sgds"; for(var i=0;i<str.length;i++){ alert(str[i]); alert(str.charAt(i)); //一般使用此方法输出 }charCo...原创 2019-10-08 19:25:48 · 95 阅读 · 0 评论 -
js基础知识回顾4
此文章的目的是让本人更加认真的回顾一下基础知识声明两个内容一模一样的数组的方法法一:var list=[1,2,3,4,5,6];var arr=[];for(var i=0;i<list.length;i++){ arr[arr.length]= list[i];}arr.push(7);document.write(arr); //1,2,3,4,5,6,7...原创 2019-10-05 20:59:32 · 108 阅读 · 0 评论 -
js基础知识回顾3
此文章的目的是让本人更加认真的回顾一下基础知识三元运算符 var score = Math.round(Math.random() * 100); var tip = (score>60) ? score+"及格" : score+"不及格";?前面为条件,若成立,结果为:前面的.反之,结果为:后面的...原创 2019-10-05 20:25:23 · 174 阅读 · 0 评论 -
js的选择排序
list = [100, 30, 50, 180, 190, 170, 28, 50]i = 0 ;var min = 100;让里面的每一个跟min进行比较 得到最小的数得到最小数28与i=0的下标所对应的数相交换[28, 30, 50, 180, 190, 170, 100, 50]i=1var min = 30[28, 30, 50, 180, 190, 170, 100,...原创 2019-09-25 20:56:04 · 63 阅读 · 0 评论 -
js的冒泡排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-09-25 20:41:11 · 64 阅读 · 0 评论 -
数字的转换(映射问题)
小例子:将 1254786分别转换成一二五四七八六和一百二十五万四千七百八十六找到对应规律:1254786与一二五四七八六的关系是1254786其分别对应的值就是一二五四七八六分别对应的下标i=0 5 万 4i=1 4 千 3i=2 7 百 2i=3 8 十 1i=4 6 ...原创 2019-09-25 19:59:23 · 463 阅读 · 0 评论 -
二维数组的页面渲染与排序
最终页面样式:用户名 语文 数学 英语 总分leson 180 90 70 340lili 90 90 90 270lulu 100 100 90 290<!DOCTYPE html><html lang="en">&...原创 2019-09-25 19:36:38 · 382 阅读 · 0 评论 -
JavaScript实现快速排序
快速排序大概示意图:文字描述:取出中间数middle = 180left rightleft=[100,30,50,170,28,50] right=[190]middle = 50left =[30,28] right=[100,170,50]left= [28] middle=30 middle = 170...原创 2019-09-24 19:02:30 · 62 阅读 · 0 评论 -
讲一下CSS3动画的优点,怎么使用
css3动画的属性总的来说只有transform(变形),transition(过渡),和animation(动画)这三种。transition:1s(过渡的动画效果):从一个人具体的值到另一个过渡的值transform:rotate(300deg) x,y 旋转 transform:rotageX(300deg) transform:rotageY(300deg)transform...原创 2019-09-19 09:56:42 · 877 阅读 · 0 评论 -
CSS3常见的新增的特性
1.CSS3的选择器结构性伪类选择器E:last-child 匹配父元素的最后一个子元素E。E:nth-child(n)匹配父元素的第n个子元素E。E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。UI元素状态伪类选择器:nth-child:nth-of-type:disabled:checked:not层级选择器子代选择器.a > ...原创 2019-09-18 19:39:07 · 99 阅读 · 0 评论 -
HTML语义化的标签
与页面布局相关的与input相关的HTML5 新增的表单属性视屏和音频HTML5 提供了播放音频文件的标准,使用 元素规定了一种通过</video 元素来包含视频的标准方法canvas绘图: 标签只是图形容器,必须使用脚本来绘制图形。svg绘图: SVG是指可伸缩的矢量图形两者之间的区别:SVG 是一种使用 XML 描述 2D 图形的语言。Canvas 通过 J...原创 2019-09-18 18:54:49 · 95 阅读 · 0 评论 -
用js绘制简易计算器
最终样式:代码及解释如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta...原创 2019-09-27 20:12:44 · 103 阅读 · 0 评论 -
简易的用js实现表单验证
最终样式我在该表单验证的外部创建了一个js文件,用来创建所需要的数字,大写,小写字母的集合,所以在html文件中还需要传入该文件js中的strings.js的代码如下:var lowCodeList=[]; //小写字母集合var upperCodeList=[]; //大写字母集合var numberList=[]; //数字集合var otherList=["_...原创 2019-09-27 21:08:22 · 481 阅读 · 0 评论 -
js实现简单的日历
最终效果:我先写了一个js文件,方便调用里面的函数,内容如下: //此函数使时间按照指定的字符串样式输出//date是当前的系统时间function dateFormat(date, str) { //获取当前的年,月,日,小时,分,秒 var year = date.getFullYear(); //因为系统上的月份1-12分别为0-11,所以输出时应+1...原创 2019-10-05 13:48:49 · 1674 阅读 · 0 评论 -
js中函数的返回值,及全局和局部变量问题
例1: function a(num1,num2){ var result=num1+num2; } var result1=a(3,8); alert(result1)结果为:underfined如果一个函数里面没有return 结果就是undefined例2:function a(num1,num2){ var...原创 2019-10-05 19:15:03 · 2095 阅读 · 0 评论 -
js判断一个数是否为素数
素数(只能被1和本身整除的数)规律:把这个数除以它之前的每一个数(从2开始) 只要找到一个整除(余数为0) 就是非素数法1: var num = 14; for (var i = 2; i < num; i++) { if (num % i == 0) {//表示有数可以整除 document.write(num + "是一个非素数至少能...原创 2019-10-05 18:30:39 · 2055 阅读 · 1 评论 -
使用循环完成打印各种样式
1,千千千千千千千千千千千千千千千代码:for(var i=1;i<=5;i++){ for(var j=1;j<=i;j++){ document.write("千"); } document.write("<br/>")}2,千千千千千 1 5千千千千 2 4千千千 3 ...原创 2019-10-05 18:21:42 · 223 阅读 · 0 评论 -
判断年月日是否合法并获取该时间是当年的第几天
最终样式:最终代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2019-10-05 16:53:03 · 249 阅读 · 0 评论