- 博客(120)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 小广告效果
WEB前端学习交流群21 598399936Document*{margin: 0;padding: 0;font-size: 14px;box-sizing:border-box;}body{background: url(http://joymepic.joyme.com/article/uploads/allimg/201511/1
2017-12-30 10:42:53
382
转载 js+h5演示文稿框架
HTML5 SlidesReveal.jsImpress.jsDeck.jsHTML Slide PresentationCSSSFathom.jsDZSlidesJmpress.jsHTML SlidyHTML 是全世界最流行的网页编程语言。而HTML5是这门语言的升级版本。越来越多的开发者和设计师开始使用HTML5.今天我们要介绍的是最好的几个
2017-12-30 10:41:29
660
转载 AngularJS内置指令
一、常见的指令：ng-app作用：定义了 AngularJS 应用程序的 根元素。用法：ng-controller作用：用于AngularJS应用添加控制器。用法：ng-init作用：为 AngularJS 应用程序定义了 初始值。用法：ng-cloak作用：ng-cloak 指令用于在 AngularJS 应用在加载时防止 AngularJS 代码未加
2017-12-30 10:40:06
346
转载 百度地图的基本使用
代码： function initMap(){ createMap();//创建地图 setMapEvent();//设置地图事件 addMapControl();//向地
2017-12-28 19:17:56
425
转载 JS简单拖拽效果
拖拽*{margin:0;padding:0;}#box{width:100px;height:100px;background-color: #f00;position:absolute;left:0;top:0;}var box=document.getElementById("box");box.onmousedown=function(e){
2017-12-28 19:14:55
251
转载 npm基础使用
npm是javascript的包管理器，能解决NodeJS部署上的很多问题，本文对npm的基本命令做一些记录及介绍。npm是随node一起安装的，node下载地址。npm特点：可以从npm服务器上下载第三方包到本地使用可以从npm服务器上下载并安装命令行程序到本地使用可以将自己编写的包或命令行程序上传到npm服务器供他人使用NPM检查npm版本或测试npm是
2017-12-27 11:26:02
240
转载 数组操作的几个方法
数组操作的几个方法 一、数组去重var arr =[1,32,5,435,46,547,658,67,9879,7,7,7,3454,6,54,765,8568,67,9,8,58,6,87,9,6,8,8,8,8,575]; var temp = {}; var result = []; for (var i = 0; i
2017-12-27 11:22:24
240
转载 简单的扫雷游戏制作
WEB前端学习交流群21 598399936.box{position:relative;}.father{position: relative;}.box div{width:20px;height:20px;background-color: #ccc;border:2px solid #666;border-top-co
2017-12-25 14:26:11
505
转载 js中数组的增删改查
1 slice选取数组的的一部分，并返回一个新数组点击按钮截取数组下标 1 到 2 的元素。点我function myFunction(){var fruits = ["语文", "数学", "英文", "地理", "历史"];var citrus = fruits.slice(1,3);var x=document.getEle
2017-12-25 14:24:42
398
转载 原生js三种选项卡效果（轮播）
第三种：定时轮播切换（我这边定时是2s） 选项卡-自动播放效果*{margin: 0;padding: 0;list-style: none;}body{background: #58596B;display: flex; justify-content: center;
2017-12-23 10:33:00
1151
转载 原生js三种选项卡效果（滑动）
第二种：鼠标移入切换效果实现选项卡-鼠标移入触发效果*{margin: 0;padding: 0;list-style: none;}body{background: #58596B;display: flex; justify-content: center;}#box{margin-top: 10%;}
2017-12-23 10:32:08
957
转载 jq中cookie的基本使用
1、基于jq的cookie插件，那么引入jq是必要的前提。2、引入对应的cookie插件，即：jquery.cookie.js3、cooike的读取、清空、设定： 读取：var topVal1= $.cookie('设定的cookie名称'); 如：var topVal1= $.cookie('weatherTop'); 清空：$.co
2017-12-22 10:47:12
1402
转载 js常用正则收集
匹配中文字符： [u4e00-u9fa5]匹配Email地址：w[-w.+]*@([A-Za-z0-9][-A-Za-z0-9]+.)+[A-Za-z]{2,14}/去除首尾空白：/(^s*)|(s*$)/g去除多余空格：/s/g身份证：d{17}[d|x]|d{15}ip地址：d+.d+.d+.d+网址URL： ^((https|http|ftp|rtsp|mms)?:/
2017-12-22 10:45:42
223
转载 前端常用的网站插件
这个列表包含许多种类的资源，所以这里我将它们分组整理。Javascript 库Particles.js — 一个用来在 web 中创建炫酷的浮动粒子的库Three.js — 一个用来在 web 中创建 3d 物体和 3d 空间的库Fullpage.js— 快速实现全屏滚动特性Typed.js — 打字机效果Waypoints.js — 滚动到某个元素
2017-12-20 11:41:37
386
转载 用正则表达式-验证邮箱
国际域名格式如下：域名由各国文字的特定字符集、英文字母、数字及“-”(即连字符或减号)任意组合而成, 但开头及结尾均不能含有“-”，“-”不能连续出现 。 域名中字母不分大小写。域名最长可达60个字节(包括后缀.com、.net、.org等)。正则匹配表达式：/^\w[a-z]([a-z0-9]*[-_]?[a-z0-9]+)*@([a-z0-9]*[-_]?[a-z0-9]+)+[\.]
2017-12-20 11:40:41
1544
转载 canvas--时钟
可以进群领取 WEB前端学习交流群21 598399936 canvas时钟 div { text-align: center; margin-top: 15%; } var dom = document
2017-12-19 11:17:27
390
转载 漂亮的SVG时钟
可以进群领取 WEB前端学习交流群21 598399936 Title body { background: #1e2730; font-family: Arial; } svg { width: 100vmin; margin: 0 auto;
2017-12-19 11:16:34
438
转载 css实现环绕文字发出光圈
transparent body { background: black; } /* .div-border { background: red; border-width: 50px; display: inline-b
2017-12-18 15:35:30
2324
转载 jsonp实现跨域
原理：利用了src属性都可实现跨域的特点，创建新的script标签，src的值为要进行跨域访问的地址，这样就可以执行不同域的js代码了，这里在src进行赋值的时候传一个callback的函数名到服务器，服务器就会根据所传的callback名字执行该函数，并且将数据作为参数传入该函数。实例解析：index.html
2017-12-18 15:32:56
172
转载 验证QQ格式
QQ的规则：1. 全都是数字2. 最少5最多113. 开头不能为0 let qq = document.querySelector('#QQ');let span = document.querySelector('span');let re = /^[1-9]\d{5,11}$/qq.oninput = function(){if(re.test(
2017-12-14 17:14:38
661
转载 js的原型链
js原型```//构造函数function Dog(name){ this.name = name this.age = 1}//实例1var example = new Dog()example.name = "213"example.age = 2console.log(example.name,example.a
2017-12-14 17:12:30
137
转载 html固定table表头的实现思路
实现步骤1.将table放在可滚动容器中；2.可滚动容器外层还需要一个容器，这个容器需设置超出范围隐藏和定位(相对、绝对都行)；3.利用脚本克隆一个目标table，调整克隆table的列宽与原table相同，隐藏tbody，追加到外层的容器中；4.监听滚动容器的滚动事件，动态调整克隆table的左偏移，上偏移不需要调整，因为已经固定了。效果演示 .tabl
2017-12-13 17:17:44
927
转载 tab切换原生js新手
Document#box{width:400px;height:400px;border:1px solid red;margin:0 auto;}header{height:80px;width:399px;border:1px solid green;}header ul{list-style-type: none;word-
2017-12-13 17:14:14
194
转载 js+css3动画实现手风琴
供应商切换*{ margin:0;padding:0;}a img{ border:none;}a{ text-decoration:none;}.swicth-box{width:920px;height:280px;margin:150px auto;overflow:hidden;border:1px solid
2017-12-12 16:28:42
494
转载 开发项目遇到的大大小小问题总结
1移动端输入六位密码 光标位置不对解决办法，把它移到看不见的地方input{ text-indent: -999em; margin-left: -100%; width: 200%!important; }2 textarea 文本域 resize: none; //禁止放大 overflow-y:
2017-12-12 16:27:46
323
转载 定时器之简单运动
在写完代码后，要注意代码是否有重复，把重复的部分封装成一个函数/方法，不同的的部分作为参数传入，如果可以，最好精简下参数，看是否可以传一个参数完成效果（PS：其他必要参数可在函数内部声明并赋值！）注意：在使用定时器时，最好在每次运动开始之前，先清除掉之前的定时器，重新开始，否则线程中定时器过多，影响效果体现！！！简单的鼠标移入移出，left值变化的小效果
2017-12-11 14:03:28
216
转载 JS知识点小结
一、1.ECMAscript和JS的区别？ECMAscript是JS要遵循的一套标准，它规定了JS的核心语法。2.JS时一种专为与网页交互而设计的脚本语言。 JS的实现要由3部分组成：核心（ECMAscript），提供核心的语言功能; 文档对象类型（DOM），提供访问和操作网页内容的方法和
2017-12-11 14:02:01
173
转载 设置npm的registry几种方法
1.临时使用npm --registry https://registry.npm.taobao.org install express2.持久使用npm config set registry https://registry.npm.taobao.org配置后可通过下面方式来验证是否成功 npm config get registry 或 npm info exp
2017-12-10 15:21:12
61722
2
转载 移动端web开发click touch tap区别
移动端用tap时会有穿透问题一：click与tap比较click与tap都会触发点击事件，但是在手机web端，click会有200-300ms的延迟，所以一般用tap代替click作为点击事件。singleTap和doubleTap分别代表单次点击和双次点击二：tap的穿透处理使用zepto框架的tap的点击事件，来规避click事件的延迟响应，会出现穿透，即点击会触发非当前层的点
2017-12-10 15:14:55
1262
转载 Javascript中字符串相关常用的使用方法总结
JavaScript的内置功能之一就是字符串连接，如果用‘+’连接两个数字，表示两数相加。但是如果用于字符串，就表示第二个字符加在第一个字符之后。varnum=1+2;console.log(num);varmsg='hello'+'world';console.log(msg);对于字符串来说，除了有length属性，还有很多其他有用的属性，如： varstr
2017-12-09 10:53:23
220
转载 响应式网页之媒体查询
由于现在的网页要兼容各种pc尺寸及ipad甚至手机屏幕，所以响应式的网页变得尤为重要。手写响应式网页，具体技术点有：1. 1.声明viewport元标签（响应式网页必备） width - viewport的宽度 height - viewport的高度 initial-scale - 初始的缩放比例 minimum-sc
2017-12-09 10:52:21
224
转载 原装js模仿的淘宝首页无缝轮播图
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档*{margin:0;padding:0;}div{width:520px;height:280px;pos
2017-12-07 16:36:18
1240
转载 原生JavaScript封装ajax，可以直接使用
什么是Ajax？（前后端数据交互）Asynchronous JavaScript and XML（异步JavaScript和XML） 节省用户操作时间，提高用户体验，减少数据请求传输、获取数据ajax流程：oBtn.onclick=function(){ //第一步 ‘打开浏览器’ 创建ajax对象 /* va
2017-12-07 16:28:28
231
转载 模拟一串数字更新的效果
body,html{margin: 0;padding: 0;font-size: 16px}.number li {width: 16px;height: 16px;line-height: 16px;display: inline-block;overflow: hidden;}.num
2017-12-04 13:34:46
217
转载 React子组件向父组件传值
本实例：子组件通过事件源告诉父组件自己的state，通过props调用父组件中用来控制state的函数，在父组件中展示子组件的state变化。 //子组件var Child = React.createClass({ render: function(){ return (
2017-12-04 13:33:45
2370
转载 Canvas 小岳岳
岳云鹏 div{ width: 400px; height:400px; margin:100px auto; } http://cdn.bootcss.com/jqu
2017-12-02 10:27:03
189
转载 一颗跳动的心（css3）
一颗跳动的心 *{ margin:0 ; padding:0; } body{ background:#1a1c24; } /* 盒子 */ #heart,#echo{ position:fixed; width: 300px;
2017-12-02 10:23:26
752
转载 CSS 的高级技巧
一、黑白图像当你需要让一张彩色的图片显示为黑白照片的时候，你可以用下面的一段代码。img.desaturate{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: g
2017-12-01 16:36:31
255
转载 VUE购物车
bootstrap+vue,js(vue-resource)完成购物车。实现了商品的选择，删除，全选（取消全选）。以及商品的价格双向绑定和总价的实时计算。巩固ajax获取模拟后台的json数据，并对数据进行操作处理。宋先森的购物车
2017-12-01 16:35:06
549
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人