![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
例子
行走的柯南
这个作者很懒,什么都没留下…
展开
-
添加元素
var ulbox =document.getElementByTagName("ul")[0];function addElement (obj,cont){ var newli = docuemnt.creatElement("li"); newli.setAttribute("class","newli"); newli.innerHtml= cont; obj.app原创 2015-11-03 10:30:43 · 260 阅读 · 0 评论 -
类似于淘宝的sku属性选择动态生成
微信后台商品那里有个选择属性动态生成列表的效果效果图这样。 然后在网上找了找类似的效果,如下: http://www.internetke.com/jsEffects/2015011001/但是发现有些不合要求,于是边学习边修改,终于完成了. 直接上结果 http://www.webmxx.com/ark_admin/index2.html大致思路如下: 根据选择的属性生成数组,此数组为多原创 2016-01-19 17:27:03 · 4749 阅读 · 3 评论 -
CSS3立体球体旋转
3D 球体旋转如图,上网址 http://www.webmxx.com/myweb/my_thing/do/try1/imgs.html主要代码如下布局 <div class="box"> <div class="big"> <div class="small a"></div> <div class="small b"></原创 2016-02-29 10:10:25 · 8650 阅读 · 0 评论 -
图片裁剪 jcrop
网址http://www.webmxx.com/myweb/my_thing/do/try1/imgcut.html原创 2016-03-04 17:26:55 · 239 阅读 · 0 评论 -
随机抽奖
点击按钮随机显示文本这里使用了一个随机显示数组中元素var data=['ipad mini','iphone 6','iphone 6s','魅族','ipad air','荣耀3C'];var random=Math.floor(Math.random()*data.length);然后是使用了计时器 setinterval 网址在这里 http://www.webmxx.com/myw原创 2016-03-09 10:45:05 · 296 阅读 · 0 评论 -
控制飞机移动
网址http://www.webmxx.com/Blog/try1/flygame.html例子分析 1 键盘事件 onkeydown document.onkeydown = function (event) { ..... }2 分析按键的ASII 值来控制飞机运动方向左 上 右 下 对应是 37 38 39 403 获取键盘值function(event){ var原创 2016-03-09 15:53:41 · 589 阅读 · 0 评论 -
获取select的选择值
<select> <option>1</option> <option>2</option> <option>3</option> </select>往往需要获取这个选择值,怎么办呢?<script> $("select").change(function(){原创 2016-02-29 18:28:50 · 593 阅读 · 0 评论 -
图片上传之前预览
在做任务的时候需要一个文件上传预览功能,现在代码贴出来大家看看//使用JS<script> //下面用于多图片上传预览功能 function setImagePreviews(avalue) { var docObj = document.getElementById("doc"); var dd = document.getElementById("sh原创 2015-12-01 11:08:25 · 302 阅读 · 0 评论 -
原生JS判断手机还是电脑登陆
<div id="my_web">您是电脑登录</div> <div id="my_wap">您是手机登录</div> <script type="text/javascript"> function browserRedirect() { var sUserAgent = navigator.userAgent.toLowerCase();转载 2015-11-11 09:39:06 · 955 阅读 · 0 评论 -
JQ 常用方法
1 事件委托 在做后台的模板的时候,有一些元素板块是动态添加的,无法执行写的click函数,所以了解了通过事件委托来执行函数。 网址链接 http://www.webmxx.com/Blog/html/addprod.html在区块划过时候,点击编辑的按钮,本来是应该弹出对应的右侧区块,但是如果这么写:$("..mask-edit").on("click" ,function () {原创 2015-11-25 17:35:59 · 347 阅读 · 0 评论 -
jq制作banner 滚动
网址 http://www.webmxx.com/myweb/my_thing/do/try1/address.html需要注意的点是 1 $(".move li").eq(index).stop().fadeIn().siblings().stop().fadeOut();这里有使用stop() 函数,参见 http://www.css88.com/jqapi-1.9/stop/2 $(t原创 2016-03-01 17:18:44 · 552 阅读 · 0 评论 -
音乐播放器
网址 http://www.webmxx.com/myweb/my_thing/do/try1/song.html主要知识点 1 audio video 音频视频播放 audio 音频播放 本例子主要用到了两个属性 autoplay 自动播放 loop 循环播放 //mps播放器 var audioDom = document.原创 2016-03-02 18:07:39 · 307 阅读 · 0 评论 -
资源奉献
1 图表 chart.js ichart.js http://www.ichartjs.com/samples/index.html?page=area2d_01.html&pageno=0ichart使用注意引入文件<script type="text/javascript" src="jquery-1.11.0.js" ></script><script type="text/j原创 2016-03-09 17:52:55 · 357 阅读 · 0 评论 -
学习资源网址
1 Javascript1.js基础教程 2. javascript电子书 3 js代码规范 4 汤姆大叔的博客,深入理解js 5 js—this陷阱 6 js秘密花园 7 jsMDN2 JQ1 英语教学视频 2 相关推荐 3 jqAPI 英文 4 jqAPI中文 5 jqAPI中文3 大神们的网站1 张鑫旭 2 阮一峰网络日志 3 白树博客园 4 4 angular.原创 2016-03-29 17:50:18 · 377 阅读 · 0 评论 -
图片延迟加载
页面中图片比较多,用到一个图片延迟加载的效果主要原理是判断当图像出现在当前窗口的时候才显示src 中的属性值 核心代码是这里$(window).scroll(function () { // 滚动的时候判断显示 var srcollHeigt = $(window).scrollTop(); $("img").eac原创 2016-05-19 10:31:03 · 322 阅读 · 0 评论 -
YUA项目总结
这个项目中用到图表来展示数据,效果图 点击日期按钮返回不同时间段的数据波动。图表是使用的ichart.js 使用方法点击这里查看1 ichart基本展示 看过实例就知道,ichart.js 主要核心属性是 data 和 label 。其中前者用来决定图表中数据显示 后者是图表的X 轴轴标 数据表的Y轴由 srtart_scale end_scale scale_space 分别是起点原创 2016-07-01 10:11:15 · 365 阅读 · 0 评论 -
Grunt
安装grunt 首先是要安装 node 。 通过node的官网可以下载下来,同时还有node 的 npm 也会一起下载下来的,不需要另外重复下载。 然后打开node 的 npm npm install -g grunt-cli这样在全局范围下载了grunt然后再建立新项目文件夹,比如 test ,通过指令 cd test 进入文件夹后输入指令npm init 输入指令 将会出来一个原创 2016-03-07 19:01:35 · 356 阅读 · 0 评论 -
购物车shopping-cart问题
在做商城的时候要写一个购物车的样式: 在做最后一行进行商品数量计算以及金额计算的时候,遇到一点问题: <ul aria-labelledby="dropdownMenu1"> <li class="product"> <ul class="clearfix"> <li class="pro-img"> <img src="img/produc原创 2015-11-17 14:35:56 · 1075 阅读 · 0 评论 -
闭包
function Foo() { var i = 0; return function() { console.log(i++); }}var f1 = Foo(), f2 = Foo();f1();f1();f2();这将依次输出 0 1 0; 这个问题涉及到闭包函数。闭包的含义:闭包说白了就是函数的嵌套,内层的函数可以使用外层函数的所有变原创 2016-02-29 19:00:45 · 215 阅读 · 0 评论 -
Math 相关操作
1 Math.max(x,y,c,v) 获取最大值如果max函数没有给出任何参数,返回-Infinity 如果有NaN或者非数字类型的参数,返回NaN max函数示例console.log(Math.max(5,8,6,-5,-6));console.log(Math.max());console.log(Math.max("dreamdu",8));console.log(Math原创 2016-03-08 17:20:49 · 251 阅读 · 0 评论 -
转换千分位显示
<input type="text" /> <button>click</button> <p class="cont"></p><script> $("button").click(function () { number = $("input").val().toString(); if (/^-?\d+\.?\d+$/.t转载 2015-11-05 15:34:32 · 471 阅读 · 0 评论 -
filter 万中选一
$.each( $('.a').filter(':visible') , function(i){ alert($(this).html());});<div class="slides"> <div class="a" style="display:none">a</div> <div class="a" style="display:none">b</div>转载 2015-11-05 18:58:34 · 184 阅读 · 0 评论 -
简单的时间轴函数
function settime (obj, data,timestop ,usetime) { function fun () { obj.animate( data , usetime) } setTimeout( fun,timestop )}settime($(".check"),{width:"10px",opacity:"0"},3000,3000);原创 2015-11-09 17:10:08 · 515 阅读 · 0 评论 -
技巧
1 随机码console.log(Math.random().toString(36).substring(2));或者console.log(Math.random().toString(16).substring(2));2原创 2015-11-10 16:18:44 · 231 阅读 · 0 评论 -
瀑布流
结构层<section class="box"> <figure> <img src="image/1.jpg" /> </figure> <figure> <img src="image/image11.png" /> </figure>原创 2015-11-10 15:24:45 · 256 阅读 · 0 评论 -
数组排序
使用JS的代码 <script> function NumAscSort(a,b){return a - b;} function NumDescSort(a,b){return b - a;} var objarr = [21,12,17,58,5,19,87,2,76,8]; $(".arr").click(func原创 2015-11-18 17:42:11 · 253 阅读 · 0 评论 -
标题滚动显示
<tltle></title> var titleMes = document.title ; titleMes = "..." + titleMes ; mesLong = 0;function titlescroll(){ document.title = titleMes.substring(mesLong , titleMes .length )+titleM原创 2015-11-03 11:49:43 · 298 阅读 · 0 评论 -
something
在写这个个人主页的时候,需要有一个点击按钮事件。 所有的信息栏那里,使用的是input ,like this<li class="list-group-item"> <label class="data"> <input type="text" placeholder=" data" value="london" /> </label></li>然后jq原创 2016-01-21 16:43:50 · 206 阅读 · 0 评论 -
bootstrap
再看一套bootstrap的网站模板,边看边分析:1 头部使用了一个滑动显示下拉菜单功能 如图。不过在bootstrap中,由于考虑到移动端,所以都是点击实现下拉菜单。那怎么样才可以改成这种划过效果呢? 看一下源代码:<div class="btn-group"> <button type="button" class="btn btn-default dropdown-toggle" da原创 2016-01-25 17:54:11 · 256 阅读 · 0 评论 -
Study
1 购物车结算效果 http://www.jq22.com/yanshi4625原创 2016-02-17 10:04:08 · 261 阅读 · 0 评论 -
Less
网站重构用到了Less。 what is this? LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。1 变量@color:#826650; // 主色调@color0:rgba(0,0,0,0.5);.page{color:@color;background-col原创 2016-03-15 14:28:43 · 246 阅读 · 0 评论 -
FAQ 前端面试大杂烩3
1 关于函数 B是创建一个数组对象 C是创建一个对象 D是一个创建正则对象;若为var obj=/ /; 即赋值被注释掉,及运行被结束; 所以A错误。2 <meta charset='UTF-8' />这个有涉及到一个文档的解析过程, 当浏览器收到一个url 地址,按照这个顺序进行 1.浏览器访问对应的url地址,并获取对应的html(或者,以及,其他的css,javascrip原创 2016-03-07 10:43:52 · 351 阅读 · 0 评论 -
元素两段对齐
关于元素实现两段对齐的效果 <div class="demo"> <a class="link" href="#none">10元</a> <a class="link" href="#none">20元</a> <a class="link" href="#none">30元</a> <a class="link" href="#none">50元</a></d转载 2016-02-20 17:36:53 · 281 阅读 · 0 评论 -
关于数组的一些操作
1 在数组中查找某个元素是否存在 $.inArray() var find = "miss" ;var arr =[ "other" , "some" ,"heart" ];var end = $.inArray( find , arr ); console.log(end);// 参数在数组中的位置(如果没有找到则返回 -1 )比如查找数组中最大值var arr =[ 1,5,6,9 ];原创 2015-11-17 17:01:41 · 258 阅读 · 0 评论 -
小东西
1 div 变化成可以输入文字的效果<div class="write" contenteditable="true"></div>contenteditable这是HTML5的新增属性,一般可以用来制作富文本编辑器。2 margin:auto为什么只能实现水平居中,不能垂直居中?当一个常规流中块级元素的margin属性左右值设为关键字auto,且它拥有固定宽度时,它便会平分剩余的水平空间,居中原创 2016-03-07 19:13:39 · 232 阅读 · 0 评论