啊哈前端-CSDN博客

原创 jquery获取索引

获取当前点击的元素在原来集合中的索引 li { height: 25px; line-height: 25px; background: rgba(0,0,0,0.5); border-bottom: 1px solid red; } a { text-decoration: none; font-size: 16px; }

2017-02-15 15:08:13 1844

转载 pc与移动端互相跳转

1、PC端检测是否是移动设备 !function(){ function params(u, p){ var m = new RegExp("(?:&|/?)"+p+"=([^&$]+)").exec(u); return m ? m[1] : ''; } if(/iphone|ios|android|ipod/i.test(navigato

2017-02-10 10:07:33 5400

原创 git命令入门

一、github的工作流我们的本地仓库由git维护的三棵"树"组成。第一个是我们的工作目录，他持有实际文件；第二个是缓存区，它像个缓存区域，临时保存你的改动；最后是HEAD,指向你最近一次提交后的结果。 1.1、创建公钥（本地仓库与远程仓库建立连接使用的凭证） ssh-keygen -t rsa -C “你的邮箱” 创建连接公钥 1.2、设置git的用户名和邮箱(提交...

2017-02-08 16:10:38 509

转载 css3 3D按钮

css3 3D按钮 body { font-family: ‘Open Sans’ , sans-serif; background-image: url(blurred-background-images-photos-0322125813.jpg); background-repeat: no-repeat; background-position: center center; bac

2017-02-07 16:39:20 436

原创 css计数器小记

主页 .reset { counter-reset: test 0; /* 初始化计数器 */ } .counter:before { content: counters(test,'');/* 计数器要配合伪类的content一起使用 */ coun

2017-02-06 00:29:17 433

@charset "gb2312"; /* CSS Document */ html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:

2017-01-15 09:39:02 1917

原创 js模块模式

js实现模块模式 var loginModule = (function(){ "use strict"; var module = {}; //私有变量 var privateVariable = 42; //私有方法 var privateLogin = function(userNameValue, userPasswordVa

2017-01-10 23:49:43 529

原创 css流式布局

1、html结构流式布局首页导航一

2017-01-09 16:27:50 5720

原创 css3渐变之条纹背景

条纹背景 * { box-sizing: border-box; } html,body { width: 100%; height: 100%; _height: 100%; min-height: 100%; margin: 0; padding: 0; } .comm { widt

2017-01-06 16:47:00 1608

原创 css水平垂直居中

垂直居中 * { padding: 0; margin: 0; } body { background: red; } /* 第一种：利用calc计算 .box {

2016-12-16 23:14:37 365

原创使用calc()计算元素宽度

1 2 3 4 1、容器宽度1200 前提：每行4列 li的间距16px(最后一个li没有间距) li的宽度：calc(25% - 16*3/4) //25%是在没有间距的情况下平分，3个间距被4个li平

2016-12-09 17:29:30 2552

原创 gulp配置文件gulpfile.js

/** * * 使用到的插件： * gulp-watch * */ var gulp = require("gulp"), less = require("gulp-less"), //编译less browserSync = require("browser-sync"), //同步刷新，测试工具 changed = require("gulp-cha

2016-12-09 10:21:33 3674

转载 browserSync+gulp多浏览器实时刷新页面

var gulp = require("gulp"), less = require("gulp-less"), browserSync = require("browser-sync"), path = { HTML : "*.html", LESS : "less/*.less", CSSDIR : "css",

2016-12-05 14:15:35 901

转载 js柯里化(待续)

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author&q

2016-11-25 17:44:10 304

转载 underscore常用api

underscore测试案例 underscore /* * 1、数组处理 * * */ //1.1、map();map方法对集合的每个成员依次进行某种操作，将返回的值依次存入一个新的数组。 var ary2 = [1,2,3], ary3 = [4,5,6]; var newAry =

2016-11-20 20:52:40 970

原创 js实现继承几种方法(未完待续)

js继承 //一、js 使用临时构造器实现继承 begin function Shape() {} //将共享的属性放在原型中 Shape.prototype.name = "shape"; Shape.prototype.toString = function () { return this.name; } function TwoDS

2016-09-28 22:04:23 357

原创 js判断一个字符串中出现次数最多的字符串

js判断一个字符串中出现次数最多的字符 function charShowMostTime(str){ var charobj = {}; for(var i = 0;i < str.length;i++){ var charStr = str.charAt(i); if(!charobj[charStr]){ c

2016-09-28 15:36:51 1602

原创 js实现简单的日历

js简单日历 *{ margin: 0; padding: 0; } /* var myDate=new Date(); var year=myDate.getFullYear();//年份 var month=myDate.getMonth()+1;//月份是0-11; var day=myDate.getDate();

2016-09-28 12:49:07 4221

原创使用js原型实现石头剪刀布猜拳

以上是所需图片以下是html部分：猜拳游戏(石头剪刀布) 猜拳游戏玩家电脑

2016-09-22 11:36:35 6808 3

原创 js打印顺序和倒序乘法口诀

9*9乘法表 function cheng(){//顺序 var row=9,//行 i=1, //初始化循环值 col=9;//列 for(i;i<=row;i++){ for(var j=1;j<=i;j++){ document.write(j+"*"+i+"="+i*j+" "); }

2016-09-11 13:50:54 3076

原创 javascript打印菱形和镂空菱形

js菱形 * { margin: 0; padding: 0; } window.onload=function(){ var rows=window.prompt("请输入行"); if(rows%2==0){ rows

2016-08-30 14:40:39 2265

原创 gulp初体验

1、下载nodejs 2、使用npm在全局环境安装gulp npm install -g gulp 3、使用webstorm创建一个项目(可以是一个空的文件夹),在settings里面输入node找到Node.js and NPM在Node interpreter里面选择你的node安装目录的node.exe,点击ok。 4、在项目文件夹根目录下新建一个js文件gulpfile.j

2016-08-22 13:27:21 557

原创 webstorm使用(持续添加)

1、alt+f12 打开 terminal 2、file -> Settings -> Appearance & Behavior -> Keymap 设置快捷键为eclipse的模式或其他模式 3、ctrl+shift+N 快速查找工程里面的某个文件 4、ctrl+D 快速复制当前行 5、shift+enter 快速开始一行，无论光标在哪里 6、file -> Sett

2016-08-21 00:08:52 615

原创 javascript dom操作

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>dom编程</title> <link rel="stylesheet" href="css/b

2016-08-20 23:25:47 1035

原创 js打字机效果

文字打印 * { margin: 0; padding: 0; } #print,#print2{ min-height: 18px; line-height: 18px; } window.onload

2016-08-03 14:50:14 1430

原创 jquery全屏滚动效果

jquery全屏滚动效果 * {margin: 0;padding: 0} html,body { width: 100%; height: 100%; overflow: hidden; background: rgba(0,0,0,0.5); } section { height

2016-07-26 22:30:27 2274

原创 js随机产生40个60至100之间的不相同的数字存入数组并顺序排序

随机产生40个60至100之间的不相同的数字存入数组并顺序排序 var ary=[], obj={}; for(var i= 0;i<40;i++){ var randomnum=Math.ceil(Math.random()*40)+60; if(!obj[randomnum]){ obj[rando

2016-07-09 14:29:33 3822

原创 js数组去重

去除数组重复的元素 var ary=[1,2,3,4,5,123,5,23,89,45,66,2,3,4,5,1,23,89];//重复的元素: 1,2,3,4,5,23,89 function only(ary){ var obj={}, temp=[]; for(var i= 0,length=a

2016-07-09 13:32:43 274

转载 javascript格式化日期

Date.prototype.format = function(f){ var date = {//获取对象中的日期 "Y" : this.getFullYear(),//获取年 "M" : (this.getMonth() + 1),//获取月 "D" : this.getDate(),//

2016-06-07 17:37:50 309

原创 jquery跑马灯抽奖

抽奖

2016-06-01 21:53:00 925

转载 jquery下拉选择生日

(function($){ $.extend({ ms_DatePicker: function (options) { var defaults = { YearSelector: "#sel_year", MonthSelector: "#sel_month", DaySel

2016-05-20 14:01:01 791

转载 jquery选择城市、县、区三级联动

{"citylist":[{"p":"北京","c":[{"n":"东城区"},{"n":"西城区"},{"n":"崇文区"},{"n":"宣武区"},{"n":"朝阳区"},{"n":"丰台区"},{"n":"石景山区"},{"n":"海淀区"},{"n":"门头沟区"},{"n":"房山区"},{"n":"通州区"},{"n":"顺义区"},{"n":"昌平区"},{"n":"大兴区"},{"

2016-05-20 13:50:12 3194

原创前端优化收集

1、减少http请求次数：css spirit,data uri 2、js，css源码压缩 3、前端模板 js+数据，减少由于html标签导致的带宽浪费，前端用变量保存AJAX请求结果，每次操作本地变量，不用请求，减少请求次数。 4、用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。 5、用setTime来避免页面失去响应 6、用hash-table来

2016-05-15 19:29:50 411

原创 web前端题目集锦

1、编写一个方法求一个字符串的字节长度一个英文字符占用一个字节，一个中文字符占用两个字节*/ function getBytes(str){ var len = str.length, bytes = len, i = 0; for(; i<len; i++){ if (str.charCodeAt(i) > 255) byte

2016-05-15 19:18:37 4193

转载 css头尾固定中间高度自适应布局

头尾固定中间高度自适应布局 html, body { height:100%; margin:0; padding:0 } #dHead { height:100px; line-height:100px;

2016-05-09 11:06:14 1034

原创 javascript原型链简单示例(实现简单的继承)

原型链 //javascript中的每个函数中都有一个指向某一对象的prototype属性。 //该函数被new操作符调用时会创建并返回一个对象，并且该对象中会有 // 一个指向其原型对象的秘密链接。通过该秘密链接(在某些环境中，该链接名为_proto_) //我们就可以在新建的对象中调用相关原型对象的方法和属性 //而原型对象自身也具有对象固有的普遍特性，因此本身也包含了

2016-05-07 13:49:11 946

原创 js中prototype的陷阱

原型陷阱 //当我们对原型对象执行完全替换时，可能会触发原型链中某种异常 //prototype.constructor属性是不可靠的 function Dog(){ this.tail=true; } var benji=new Dog(); var rusty=new Dog(); Dog.prototype.say=function(){ return "

2016-05-05 22:51:41 1368

原创 javascript原型prototype

原型属性prototype //一、利用原型添加方法与属性 //1、创建一个构造器函数Gadget() function Gadget(name,color){ this.name=name; this.color=color; this.whatAreYou=function(){ return "I am a "+this.color+" "+this.nam

2016-05-05 22:31:33 431

原创 css高度100%布局

css高度100%的布局 * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;

2016-05-03 17:54:13 1432

原创 css三列布局，两侧宽度固定，中间宽度自由伸缩

两侧宽度固定,中间宽度自由伸缩 1-3-1一列固定，两侧固定，中间宽度自由伸缩 *{ margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } html { min-height

2016-05-02 16:24:36 737

《HTML 5网页开发实例详解》源码2

由于上传大小权限原因，分两部分上传。详细介绍了html5语义化标签，图像操作，地理定位，本地离线存储，通信api，websocket……共14章，每章都用代码案例详细介绍了关于html5的所有高级新特性。

2015-12-06

《html5网页开发实例详解》随书源码2

2015-12-06

超实用的css3代码段源码(376个案例)

超实用的css3代码段源码，近376个案例，与《超实用的javascript代码段》是一个系列的书籍。详细讲述了css3的使用方法。书中以案例为基础，以功能为目标进行讲解

2015-12-02

《bootstrap实战》书籍随书实例源码

《bootstrap实战》书籍源码，教你如何用HTML5 Boilerplate和bootstrap一步一步构建一个简单的响应式的网站。书籍浅显易懂，适合初学bootstrap的童鞋们。

2015-12-02

经典之作javascript dom编程艺术源码

经典之作《javascript dom编程艺术》源码。通过一个实际案例，讲述了原生的javascript操作dom的使用方法，以及操作dom中应该注意的一些事项。

2015-12-02

超实用的javascript代码段实战源码(近400个案例)

本书籍源码共有近400个案例，将javascript的各种用法，用代码的方式诠释的淋淋尽致，是提升自己javascript的必备武器。从代码中来，到工作中去，以功能为主导，以代码为核心。各种实用功能尽在本书中……

2015-12-02

《锋利的jquery》第二版随书源码

初学jquery推荐书籍。详细介绍了jquery的特性。从选择器、dom操作、事件、动画、表单操作、jquery ajax以及jquery插件各个方面讲解。最后通过一个简单的商城网站，来学习如何利用jquery写出商城中的常用效果。初学者必备精品。

2015-12-07

使用gulp-useref将html页面js合并报错？

2018-04-27

TA创建的收藏夹 TA关注的收藏夹

TA关注的人