- 博客(23)
- 收藏
- 关注
RSS订阅原创 NProgress.js-页面加载进度条
安装使用npm安装$ npm install --save nprogress或者直接引用 nprogress.js 和nprogress.css 文件到你的页面中。<script src='nprogress.js'></script><link rel='stylesheet' href='nprogress.css'/>用法只需要调用st...
2019-07-16 23:09:40
737
原创 MUI 弹出消息框
dialog（对话框）创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。Dialog 组件包含:alert 警告框confirm 确认框prompt 输入对话框toast 消息提示框mui会根据ua判断,弹出原生对话框还是h5绘制...
2019-07-14 22:37:22
2120
原创 px rem与em的区别
1、概念px：绝对单位，页面按精确像素展示。em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。2、特点PX特点：IE无法调整那些使用px作...
2019-07-09 23:37:15
252
原创 Less的使用
less无法在浏览器直接使用, 无法识别必须解析成css代码 可以用less.js引入less文件需要加上type=“text/less”不要以file的形式打开使用方法<link type="text/less" rel="stylesheet" href="less/index.less"><script type="text/javascript" src=...
2019-07-07 17:48:41
119
原创 模板引擎
模板引擎 : 将数据转化成html格式的字符串1.准备数据2. 下载, 导入js文件3.创建模板 在html页面中创建 <script type="text/template"></script>4.把数据使用在模板中 在js中 template(要关联模板的id, 数据:要求–>必须是对象)5.这个方法会返回html格式的字符串注意 : 模板内部中不...
2019-07-03 21:37:26
747
原创 Bootstrap媒体查询
超小屏幕(移动设备) 768px以下小屏屏幕(平板设备) 768px-992px中屏屏幕(标屏设备) 992px-1200px大屏屏幕(宽屏设备) 1200px以上@media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) ...
2019-07-01 23:02:49
258
原创 canvas的使用以及案例
创建Canvas元素向 HTML5 页面添加 canvas 元素。 规定元素的 id、宽度和高度：<canvas width="600" height="400"></canvas>通过JavaScript来绘制 //1. 获取节点 var myCanvas = document.querySelector("canvas"); //2.获取绘图工...
2019-06-24 22:30:00
1160
2
原创 data属性
自定义属性: data-*(属性名)* 作用: 进行数据的缓存* 获取:* jquery方式 对象.data(“自定义属性名称–>data-username”)* h5的方式 对象.dataset 返回的是属性的集合* 自定义属性的写法: data-name --> 对象.name data-age-id -->对象.ageId 使用驼峰命名法&l...
2019-06-23 21:10:15
467
原创 动画(CSS3) animation
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式：animation:动画名称 动画时间 运动曲线 何时开始 播放次数(无线播放infinite) 是否反方向;*保持播放完后的位置：forwards案例1踢足球（近大远小）<!DOCTYPE html><html lang="en">...
2019-06-17 20:44:37
607
原创 css3动画
凹凸文字效果效果图<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <style> body { background-color: #ccc; } div { ...
2019-06-16 18:32:03
101
原创 Ajax的介绍以及实现
Ajax介绍ajax的概念: 用来做数据交互使用ajax的原理: 通过XmlHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果ajax的核心: XmlHttpRequest对象ajax的特点: 异步加载, 局部刷新同步: 一次一个, 前一个没...
2019-06-14 22:08:26
106
原创 初学jQuery
jquery的好处：jQuery拥有隐式迭代的特征, 不需要我们遍历完全没有兼容性实现动画非常简单, 功能很强大不会覆盖代码简单粗暴jq的加载函数等待页面加载完毕之后执行, 但是不会等待图片加载完毕执行js的加载函数等页面和图片全部加载完毕之后会执行jquery和js的区别//1.什么是js对象(DOM对象)?--->用js的方法获取的元素就是js对象var li =...
2019-06-09 21:27:16
108
原创 正则表达式
正则表达式: 按照一定的规则组成的一个表达式, 作用主要来匹配字符串表达式组成: 由元字符或者限定符组成的一个式子元字符:. 表示的是: 除了\n以外的任意一个字符 例: "aa12"这个字符串中, 有任意一个字符就匹配成功[] 表示的是: 范围[0-9]表示的是0-9之间任意一个数 例 : “abcd”–>[0-9] 不成立例:100-199这个区间–>[1][0-9]...
2019-06-05 21:45:00
196
原创 关于JS中cookie
cookie : 用于储存页面的用户信息1.在文档中创建cookie document.cookie = “名字=值”; 以键值对的方式来写①创建临时cookie----->关闭浏览器消失, 跟注释没关系②设置失效的时间的cookie(3天之后过期) document.cookie = “名字=值;expires=过期时间”;var dt=new Date();dt.setHo...
2019-06-03 22:38:10
81
原创 JS中的this指向
普通函数的this指向—>window构造函数的this指向—>实例对象对象和方法中的this—>当前的实例对象定时器的中的this---->window原型对象方法中的this—>实例对象...
2019-06-02 22:33:59
78
原创 JS简易贪吃蛇
分析1.食物对象自定义构造函数在原型对象上初始化食物把食物暴露给window2.蛇对象小蛇构造函数在原型对象上初始化小蛇添加方法–移动小蛇判断小蛇是否吃到食物封装删除小蛇的函数3.游戏对象游戏的构造函数初始化游戏添加方法使小蛇自动跑起来设置按键. 来改变小蛇移动的方向具体实现//食物对象((function () { //1.自定义构造函数...
2019-05-30 22:17:08
271
原创 JS随机产生小方块
创建的小方块，小方块要脱离标准文档流第一步创建随机数的对象，因为随机小方块改变的就是小方块的left和top值第二步创建小方块的对象具体实现<script> //1.产生随机数的对象 (function () { function Random() { } Random.prototype.getRandom ...
2019-05-29 22:19:51
418
原创 JS 放大镜功能
用JS实现放大镜效果效果图布局<div class="box" id="box"> <div class="small"><!--小层--> <img src="images/small.png" width="350" alt=""/> <div class="mask"></div&...
2019-05-27 22:31:59
430
原创 JS 旋转木马轮播图和手风琴轮播图
手风琴轮播图效果图展示<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; ...
2019-05-26 23:08:49
619
原创 JS实现无缝轮播完整代码
功能：创建底部小圆点，根据圆点切换图片自动轮播鼠标移入移出显示隐藏左右按钮点击左右按钮切换图片HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <...
2019-05-24 22:57:59
641
原创 JS计数器
1.计时器: setInterval(函数, 时间: 毫秒) 每过多少毫秒执行一次函数的代码var timeId = setInterval(function () { console.log("1");},1000)控制台中会每隔1秒输出一次1；想要停止计时器，可用**clearInterval()**来清除my$("btn").onclick = function () {...
2019-05-23 23:07:07
884
原创 元素绑定事件、解绑事件以及兼容性代码
为元素绑定事件1.对象.addEventListener(“事件类型”, “事件的处理函数”, false(默认值)) ie8不支持2. 对象.attachEvent(“有on的事件类型”, 事件处理函数) 谷歌, 火狐不支持 是ie特有的方法为任意元素, 绑定任意的事件, 执行任意的处理函数function addEventListener(element, type, fn) {...
2019-05-22 21:03:56
127
原创 DOM学习小计
DOM的概念文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。在网页上，组织页面（或文档）的对象被组织在一个树形结构中，用来表示文档中对象的标准模型就称为DOM。Document Object Model的历史可以追溯至1990年代后期微软与Netscape的“浏览器大战”，双方为了在JavaScript与JScript一...
2019-05-19 18:21:02
100
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人