- 博客(62)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 70多个非常实用的web开发CSS小技巧
1. 文字水平居中将一段文字置于容器的水平中点，只要设置text-align属性即可：text-align:center; 2. 容器水平居中先该容器设置一个明确宽度，然后将margin的水平值设为auto即可。div#container { width:760px; margin:0 auto; } 3. 文字垂直居中单行文字的垂直居中，只要将行高与容...
2018-09-20 10:42:16
1065
转载 理解Cookie和Session的区别及使用
前言HTTP是一种无状态的协议，为了分辨链接是谁发起的，需自己去解决这个问题。不然有些情况下即使是同一个网站每打开一个页面也都要登录一下。而Session和Cookie就是为解决这个问题而提出来的两个机制。应用场景登录网站，今输入用户名密码登录了，第二天再打开很多情况下就直接打开了。这个时候用到的一个机制就是cookie。 session一个场景是购物车，添加了商品之后客户端处可以知道...
2018-09-06 17:59:29
364
转载 使用HttpOnly提升Cookie安全性
在介绍HttpOnly之前，我想跟大家聊聊Cookie及XSS。随着B/S的普及，我们平时上网都是依赖于http协议完成，而Http是无状态的，即同一个会话的连续两个请求互相不了解，他们由最新实例化的环境进行解析，除了应用本身可能已经存储在全局对象中的所有信息外，该环境不保存与会话有关的任何信息，http是不会为了下一次连接而维护这次连接所传输的信息的。所以为了在每次会话之间传递信息，就需要用...
2018-09-06 16:08:51
356
转载 引入zepto后，用tap事件，为什么有时候会触发两次，找不到根本原因？？
1原因及解决方案最新版Chrome绑定了三个事件touchend MSPointerUp pointerup，touchend是触摸相关的事件，MSPointerUp 是ie10的触摸事件，pointerup是指针事件。可能是以前的chrome不支持pointerup事件，现在新版本支持了，然后会报错了，把zepto里面pointerup相关的事件都删除了后测试没有问题。zepto目前还没修复，不...
2018-06-14 17:01:52
1327
1
转载 渐进式Web应用（PWA）入门教程（下）
渐进式Web应用（PWA）入门教程（下）上篇文章我们对渐进式Web应用（PWA）做了一些基本的介绍。渐进式Web应用（PWA）入门教程（上）在这一节中，我们将介绍PWA的原理是什么，它是如何开始工作的。第一步：使用HTTPS渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多，但使用HTTPS可以让您的网站变得更安全，HTTPS网站在Google上的排名也会更靠前。...
2018-05-30 10:57:11
322
转载 渐进式Web应用（PWA）入门教程（上）
渐进式Web应用（PWA）入门教程（上）最近关于渐进式Web应用有好多讨论，有一些人还在质疑渐进式Web应用是否就是移动端未来。 但在这篇文章中我并不会将渐进式APP和原生的APP进行比较，但有一点是可以肯定的，这两种APP的目标都是使用户体验变得更好。 移动端Web应用有很多优秀的概念让人应接不暇，但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换...
2018-05-30 10:54:45
704
转载 深入理解CSS3 Animation 帧动画
CSS3我在5年之前就有用了，包括公司项目都一直在很前沿的技术。最近在写慕课网的七夕主题，用了大量的CSS3动画，但是真的沉淀下来仔细的去深入CSS3动画的各个属性发现还是很深的，这里就写下关于帧动画steps属性的理解我们知道CSS3的Animation有八个属性animation-nameanimation-durationanimation-delayanimation-iteration-...
2018-05-28 20:28:33
226
原创 canvs绘制动态时钟
A draw canvas let draw = document.getElementById('draw'); let context = draw.getContext('2d'); let angle = Math.PI/360; var DateTime = { initDial: function(){
2018-01-17 14:15:20
509
原创 使用回调和Promise两种方法实现3个小球依次移动
promise调用 .ball{ width: 20px; height: 20px; border-radius: 50%; } .ball1{ background-color: red; } .ball2{ background-color: yellow; } .ball3{ background-color: green
2018-01-14 19:29:29
458
原创 原生按字数多少自动切换焦点
自动切换焦点 (function(){ function focusForwad(event){ var target = event.target; if(target.value.length === target.maxLength) { let form = target.fo
2018-01-11 18:39:57
246
原创 正则匹配url对应参数名的值
function getParam(_type, _url){ var url = _url || window.location.href; if (new RegExp(".*\\b" + _type + "\\b(\\s*=([^&]+)).*", "gi").test(url)) { return RegExp.$2; } e
2017-09-15 09:11:32
2389
原创 jsonp请求实例原生和jquery
$.ajax({ type:"get", url:"https://c.y.qq.com/qzone-music/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg", async:false, jsonp:"jsonp1", jsonpCallback:"jsonp1", dataType:"jsonp", dat
2017-09-04 15:25:54
360
转载 JavaScript中原型对象的彻底理解
一、什么是原型原型是JavaScript中的继承的继承，JavaScript的继承就是基于原型的继承。1.1 函数的原型对象 在JavaScript中，我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性prototype 指向了这个对象( 即：prototype的属性的值是这个对象 )。这个对象B就是函数
2017-08-22 16:34:13
325
转载 BFC原理及应用
BFC 已经是一个耳听熟闻的词语了，网上有许多关于 BFC 的文章，介绍了如何触发 BFC 以及 BFC 的一些用处（如清浮动，防止 margin 重叠等）。虽然我知道如何利用 BFC 解决这些问题，但当别人问我 BFC 是什么，我还是不能很有底气地解释清楚。于是这两天仔细阅读了CSS2.1 spec 和许多文章来全面地理解BFC。一、BFC是什么？ 在解释 BFC 是什么之前，需要先介
2017-08-21 17:50:09
229
转载 CSS布局奇淫巧计之-强大的负边距
css中的负边距(negative margin)是布局中的一个常用技巧，只要运用得合理常常会有意想不到的效果。很多特殊的css布局方法都依赖于负边距，所以掌握它的用法对于前端的同学来说，那是必须的。本文非常基础，老鸟可以略过。 负边距在普通文档流中的作用和效果那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。看下
2017-08-16 16:11:58
242
转载 纯CSS绘制三角形（各种角度）
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。今天给大家带来 CSS 三角形绘制方法复制代码代码如下:#triangle-up { width: 0; height: 0; borde
2017-08-11 17:00:25
252
原创 使用Vue-cli搭建后台简单管理系统vue.js2.0
新手使用vue搭建后台管理系统使用相关技术：vue-cli：脚手架工具 vue.js（2.0） vue-router ：路由 vuex：状态管理 axios： 数据请求API axios-mock-adapter ：配合axios mock假数据 ElementUi：基本组件
2017-08-07 14:43:28
2821
原创 链式封装ajax请求的Promise
a.txt，b.txt,c.txt分别取0,1,2$(function(){ function ajax(param, callback){ $.ajax({ url:param, type:'get', success:function(data){ callback(data); }, error:function(data){ conso
2017-07-21 19:11:14
1593
原创 vue 简单仿写百度搜索
vue .grey{ background: #CCC; height: 25px; } ul,li{ margin: 0; padding: 0; list-style-type:none; margin-left: 65px; width: 306px; } .dialog{
2017-06-09 19:27:27
790
原创 实现3D旋转下拉菜单
*{ margin: 0; padding: 0; text-decoration:none; } #containter{ margin: 20px; height: 100%; width: 100%; text-align: center; } .menu{ height: 30px; }
2017-04-20 15:35:03
578
转载 实现黑客帝国屏幕效果
Maxtrix *{ margin: 0 auto; padding: 0 auto; } body{ background: black; overflow: hidden; } //初始化画布 var matrix = document.getElementById("matrix")
2017-04-13 19:00:00
3377
转载 这可能是史上最全的CSS自适应布局总结教程
这可能是史上最全的CSS自适应布局总结教程标题严格遵守了新广告法，你再不爽，我也没犯法呀！话不多说，直入正题。所谓布局，其实包含两个含义：尺寸与定位。也就是说，所有与尺寸和定位相关的属性，都可以用来布局。大体上，布局中会用到的有：尺寸相关的盒子模型，普通流、浮动、绝对定位三种定位机制，CSS3中的transform、弹性盒子模块、试验中的grid模块。逛园子的时候经常可
2017-02-15 14:11:33
23968
1
原创 jquery实现必应的自动下拉搜索功能
body{background-color: #333;} .big-img{background-image: url(img/river.jpg); background-repeat: no-repeat; width:1228px;height:690px;margin: 0 auto;position: relative;} .logo{background: url(im
2016-09-14 11:36:44
827
原创 原生js实现必应自动搜索功能（事件绑定和事件代理和键盘事件），亲测chrome实现
bing search body{background-color: #333;} .bg-div{position:relative;background-image: url(../river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(../logo.png);height:
2016-09-13 18:12:30
1761
转载 js五子棋的实现
html 五子棋 csscanvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;}js var me = true;var over = false;var chessBox = [
2016-09-11 17:44:19
2763
转载 简单倒计时逻辑实现
团购——限时抢-->还剩 var sh; function FreshTime(){ var endtime=new Date("2016/10/15,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime= parseInt((endtime.getTi
2016-09-09 17:14:50
1290
转载 CSS reset
css@charset "utf-8";/* CSS Document */body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}body{font-size:12px;}img{border:none;}li{list-style:non
2016-09-05 14:35:13
198
转载 仿京东商城侧边导航栏写法
body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { display: block; width: 220p
2016-08-19 15:18:47
18148
转载 JS无缝隙轮播图
原生JS代码 焦点轮播图 *{ margin: 0; padding: 0; text-decoration: none;} body { padding: 20px;} #container { width: 600px; height: 400px; border: 3px solid #333; overfl
2016-08-18 15:10:56
849
转载 H5使用canvas实现星星闪烁效果
html star JSmain.jsvar can;var ctx;var w,h;var girlPic = new Image();var starPic = new Image();var num = 60;var stars = [];var lastTime,deltaTime;var
2016-08-12 19:11:15
13054
原创 原生Json.stringify的写法，将json对象转成json字符串
var json = { stringify: function (val) { var stringify = '', curVal; if (val === null) { // null return String(val);
2016-08-10 16:09:57
2016
原创 xml转json对象
this.xmlToJson = function(xml){ // Create the return object var obj = {}; if(xml.nodeType == 1&&xml.nodeName != "#document") { // element // do attributes if(xml.attributes
2016-08-10 16:07:06
306
原创 VLC播放RTSP视频流(360浏览器可用)
--> var itemId = 0; var url = "";var totalTime = "";var playTime;var ss=0;var sMin=0;var sH=0;var millisec=0;var tottime = 0;var iTime;function registerVLCEvent(event, hand
2016-06-28 20:00:48
7369
1
原创 四级联动下拉菜单
jQuery多级联动美化版Select下拉框DEMO演示 body { color: #555; font-size: 14px; font-family: "微软雅黑", "Microsoft Yahei"; background-color: #EEE;}a { color: #555;}a:hover { color: #f00;}.input {
2016-06-28 13:45:05
2533
2
原创 JS实现轮播图
HTML: 轮播图 *{margin: 0; padding: 0;} ul{list-style: none;} .slideShow{ position:relative; margin: 100px auto; width: 340px; height: 140px; overflow: hidden; }
2016-06-05 17:33:40
414
原创 as3实现图片轮播
1.滑动形式的轮播package{ import caurina.transitions.Tweener; import flash.display.Bitmap; import flash.display.Loader; import flash.display.MovieClip; import flash.display.Sprite; import flash.event
2016-05-17 16:21:56
2574
1
原创 模拟时钟
package{ import flash.display.Shape; import flash.display.Sprite; import flash.display.StageAlign; import flash.display.StageScaleMode; import flash.events.*; import flash.text.*; import flash
2016-05-05 18:30:36
364
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人