前端
关注
分享
扫一扫
Sk8？？？
Bug是改不完的
展开
-
Bootstarp全局css样式
Bootstrap 是移动设备优先的。<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">/*user-scalable=no 可以禁用其缩放（zooming）*/Normalize.css 重置浏览器之间的样式 让浏览器保...原创 2019-10-24 09:53:05 · 286 阅读 · 0 评论 -
js--原型和原型链
原型和原型链在javascript中没有类的概念，都是函数，所以它是一门函数式的编程语言。类有一个很重要的特性，就是它可以根据它的构造函数来创建以它为模板的对象。我们创建的每一个函数都有prototype属性，它指向一个对象，即原型对象。原型对象包含这个特定类型所有实例共享的属性和方法，所以原型对象可以理解为这个特定类型构造函数的实例。 Animal.prototype={ ...原创 2019-09-02 16:32:58 · 126 阅读 · 0 评论 -
js继承
继承JavaScrip是门面向对象的语言，也有继承的概念。继承有两点有用的服务。1.它是代码重用的一种形式；2.引入类型系统规范。它是门基于原型的语言，意味它的对象可以直接从其他对象继承。（子类继承父类）父类：//es5（类是构造函数写法） es6（class） function Animal(name, sex) { this.name = name || "动物...原创 2019-09-09 17:20:14 · 293 阅读 · 0 评论 -
前端基础面试题整理（不断更新）
div+css的布局比较table布局有什么优点？改版得时候更方便，只需要改css文件页面加载速度很快、结构化清晰、页面显示简洁表现与结构相分离易于优化对搜索引擎更友好，排名更容易靠前为什么利用多个域名来存储网站资源会更有效？CDN缓存更方便突破浏览器并发执行节约主域名的连接数，优化页面响应速度防止不必要的安全问题简述一下src与href的区别Src是指向物件的来...原创 2019-09-11 11:08:34 · 417 阅读 · 1 评论 -
原生Ajax、Ajax的封装以及Ajax的跨域和跨域原理
原生JS Ajax请求传统方法的缺点:传统的web交互是用户触发一个http请求服务器,然后服务器收到之后,在做出响应到用户,并且返回一个新的页面,每当服务器处理客户端提交的请求时,客户都只能空闲等待,并且哪怕只是一次很小的交互、只需从服务器端得到很简单的一个数据,都要返回一个完整的HTML页,而用户每次都要浪费时间和带宽去重新读取整个页面。这个做法浪费了许多带宽，由于每次应用的交互都需要向服...原创 2019-09-16 11:10:11 · 296 阅读 · 0 评论 -
js节流与防抖
节流函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。函数节流(throttle)：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率。函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。1、函数...原创 2019-09-16 11:25:39 · 198 阅读 · 0 评论 -
浏览器缓存Cookie,localStorage和sessionStorage
1、Cookiecookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。支持所有现代浏览器。 var time=new Date("2019 10-01 12:00:00"); document.cookie="user=654321;expires=Tue ...原创 2019-09-16 11:57:02 · 323 阅读 · 0 评论 -
canvas画布
canvas画布画图和图片实现技术：图片FLASHSVGcanvascanvascanvas是：HTML提供的一个用于展示绘图效果的标签，愿以画布，在HTML页面中用于展示绘图效果。canvas基本用法：<canvas>您的浏览器不支持，请更换浏览器</canvas>不要使用css样式设置宽高，应该使用HTML属性。如果使用css样式给canva...原创 2019-09-18 16:35:44 · 558 阅读 · 0 评论 -
canvas画布案例（时钟）
时钟源码如下：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> canvas{ border: 1px solid #cccccc; } <...原创 2019-09-18 16:38:18 · 472 阅读 · 0 评论 -
jQuery的基础知识学习
jQuery:jQuery 是一个快速、轻量级、可扩展的 js 库，它提供了易于使用的跨浏览器的API，使得访问dom，时间处理、动画效果、ajax请求变得简单。简化了JS对DOM的操作。（写的少做的多）jQuery的引入方式和外部js文件一致jQuery的基本选择器：jQuery支持所有的cs1~cs3选择器html:<style> #btn1 { ...原创 2019-09-24 09:36:28 · 174 阅读 · 0 评论 -
jQuery的动画方法
jQuery的动画方法css：<style> .block { width: 100px; height: 100px; background: red; } </style>html：<button id="btn">按钮</button><button id="stop">暂停</button><div c...原创 2019-10-10 09:55:19 · 207 阅读 · 0 评论 -
jQuery继承
jQuery继承HTML：<ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li></ul><script src="js/jquery-1.9.1.js"></script>...原创 2019-10-10 10:15:55 · 211 阅读 · 0 评论 -
js--设计模式
js设计模式设计模式就是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。其实就是前人总结的，针对特定类型问题的设计方案。总体来说设计模式分为三大类：创建型模式：共五种：工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式：共七种：适配器模式、装饰器模式、代理模式、外观模式桥接模式、组合...原创 2019-09-02 16:15:33 · 188 阅读 · 0 评论 -
正则表达式
正则表达式的使用 //使用正则表达式 var exp=/^[0-9]{5}$/; var reg=new RegExp(exp); var str="12345"; console.log(reg.test(str));//返回的值是true false //直接通过值点 match 条件不满足是null console.log(str.matc...原创 2019-08-27 20:08:27 · 151 阅读 · 0 评论 -
数据分页
数据的简单分页1：点击下一页整体＋10；点击下一页整体-10css：<style> * { margin: 0; padding: 0; } .b1 > ul { display: inline-block; } .b1 ...原创 2019-08-27 19:39:21 · 166 阅读 · 0 评论 -
冒泡排序、快速排序和选择排序
冒泡排序<script>var arr = [3, 2, 0, 1, 7, 5, 4, 6, 9, 8]; function maopao(array) { if (array.length == 1) { return array; } var temp; for (var i = 0...原创 2019-08-08 18:51:13 · 190 阅读 · 0 评论 -
字符串的常规方法
字符串的常规方法<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> var s="123"; var b...原创 2019-08-08 19:10:49 · 267 阅读 · 0 评论 -
字符串简单算法
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><script> /* * 找字符串里面的最长的单词 * *...原创 2019-08-08 19:18:22 · 227 阅读 · 0 评论 -
js的内置对象（Math，Date）
js内置对象：window 、history、 location 、document。内置对象 Date Math String Arraywindow： alert()//弹框 window.alert() window.confirm(); window.prompt(); //js中的全局变量 也是可以通过window点出来的 var name=...原创 2019-08-14 16:28:13 · 146 阅读 · 0 评论 -
图片的无缝滚动与简单的图片轮播
图片的无缝滚动<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .a{ width: 1000px;; ...原创 2019-08-14 16:34:16 · 265 阅读 · 0 评论 -
简单倒计时的实现
简单倒计时的实现：<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one{ width: 240px; height: 50px; ...原创 2019-08-14 16:39:26 · 153 阅读 · 0 评论 -
三维轮播图的实现
HTML+CSS<style> .one{ width: 700px; height: 400px; position: relative; border: 1px solid red; margin: auto; } .imglist{ widt...原创 2019-08-18 10:04:35 · 443 阅读 · 0 评论 -
图片的淡入淡出实现
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .one{...原创 2019-08-18 10:06:03 · 326 阅读 · 0 评论 -
图片的横向滚动实现
<html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } .one{...原创 2019-08-18 10:07:00 · 1208 阅读 · 0 评论 -
自定义对象
自定义对象：标准写法和白话写法标准写法：new 实例化var stu=new Object(); stu.name="毛豆"; stu.sex="男"; stu.age=18; stu.job="tea"; stu.eat=function (){ //this 指代当前的对象 return this.name+"啥都吃！...原创 2019-08-27 18:52:58 · 216 阅读 · 0 评论 -
三级联动
普通的三级联动html：<body>省：<select id="s1"> <option>—请选择—</option></select>市：<select id="s2"> <option>—请选择—</option></select>区：<select ...原创 2019-08-27 19:13:17 · 1934 阅读 · 0 评论 -
js中的数组
数组数组的定义：var arr=[1,2,3];Var arr = new Array(1,2,3); //第一种性能较好数组中length属性代表数组的长度var arr=new Array({});console.log(arr);//数组的赋值arr[0]=1;arr[1]="a";arr[2]=null;arr[3]={};arr[4]=true;arr[5]...原创 2019-08-08 18:47:15 · 145 阅读 · 0 评论