javascript
文章平均质量分 59
wukongk
执着,无耐心。
展开
-
js部分整理
通过js动态设置每一个元素的尺寸setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。setTimeout(code,millisec) code:必需。要调用的函数后要执行的 JavaScript 代码串。 millisec:必需。在执行代码前需等待的毫秒数。提示:setTimeout() 只执行 code 一次。如果要多次调用,请使用 set原创 2016-04-17 19:55:34 · 299 阅读 · 0 评论 -
javaScript删除元素
有一段html代码 div1 div2 div3 div4 div5 假如我想删除div中的第二个div,我需要找到这个元素,在找到父元素,用removeChild进行删除。但是,看到一个办法,就是使用 outerHTML = '' 这个方法,outerHTML可以获得含标签在内的字符串,将字符串置原创 2016-06-03 11:15:46 · 400 阅读 · 0 评论 -
window.onload,body onload,document.onreadystatechange
1、window.onload 页面全部加载完成,甚至包括图片2、body.onload 等doucment加载完成再加载相应的脚本3、document.onreadystatechange 当页面加载状态改变的时候执行这个方法。document.onreadystatechange = subSomething;//当页面加载状态改变的时候执行这个方法. fu原创 2016-06-08 17:06:37 · 491 阅读 · 0 评论 -
js面向对象与继承
直接来代码function Person(name, age) { this.name = name; this.age = age;}Person.prototype.hi = function() { console.log('Hi,my name is' + this.name + ',I`m ' + this.age + ' years old now.');};Pers原创 2016-06-23 16:42:41 · 299 阅读 · 0 评论 -
js面向对象
今天看了一些js面向对象的视频,js做的事真的好多1、// 模拟重载2、// 调用子类的方法3、// 链式调用4、// 抽象类代码奉上// 模拟重载function Person() { var args = arguments; if (typeof args[0] === 'object' && args[0]) { if (args[0].name)原创 2016-06-25 10:37:11 · 277 阅读 · 0 评论 -
利用Canvas+js实现贪吃蛇(4)
将贪吃蛇改造成面向对象,类似插件的东西。过程中,要把握好this的指向,因为这个,调试了好大会将randFood进行了修正,添加了一个配置参数与默认参数合并方法,其他的都还是一样的。html代码没有改,在第一篇文章里代码附上:function tanchishe(options) { this.canvas = options.canvas; this.sp原创 2016-06-25 13:54:25 · 1440 阅读 · 0 评论 -
正则表达式中的特殊字符
字符/ 意义:对于字符,通常表示按字面意义,指出接着的字符为特殊字符,不作解释。 例如:/b/匹配字符’b’,通过在b 前面加一个反斜杠,也就是/b/,则该字符变成特殊字符,表示匹配一个单词的分界线。 或者:对于几个字符,通常说明是特殊的,指出紧接着的字符不是特殊的,而应该按字面解释。例如:*是一个特殊字符,匹配任意个字符(包括0个 字符);例如:/a*/意味匹原创 2016-05-04 09:56:51 · 2208 阅读 · 0 评论 -
CSS3实现炫酷进度条
看了一个进度条很漂亮,所以自己试试看html 0 css样式:* { margin: 0; padding: 0; font-family: 'microsoft yahei'; } html,body { width: 100%; height: 100%; background-color: #222; }原创 2016-06-10 13:32:28 · 2356 阅读 · 1 评论 -
利用Canvas+js实现贪吃蛇(1)
今天想写一个贪吃蛇的页面,于是就选择了Canvs,不过只实现蛇身的长度是1的情况,对于蛇身大于2的情况,我还没想出来 如何绘制蛇,等查资料后,再来实现下面是源码部分:html: score:0js部分:window.onload = function() { var canvas = document.getElementById('my原创 2016-06-12 21:04:29 · 3320 阅读 · 0 评论 -
利用Canvas+js实现贪吃蛇(2)
相比1 来说,增加了,以下功能:1、蛇每次一次食物,蛇身就增加 1。 2、吃一次食物,速度就加快20毫秒 未实现:蛇头碰到蛇身时,游戏结束。。。。bug:在它向上移动时,按 向下键,身体出问题了,不过 不影响继续游戏 。。同理,上下左右都有这个问题参数:var canvas = document.getElementById('myCanvas'),原创 2016-06-19 12:06:42 · 634 阅读 · 0 评论 -
利用Canvas+js实现贪吃蛇(3)
想了想,蛇向下走的时候按上键,如何直接将蛇头变蛇身,好像不符合常理,所以处理这种情况,应当做蛇头碰到蛇身。。另外,实现蛇头碰蛇身的功能界面就不美化了。。。下一步就是封装成面向对象的插件了。。。附上js代码window.onload = function() { var canvas = document.getElementById('myCanvas'),原创 2016-06-23 14:29:25 · 1019 阅读 · 0 评论 -
css+js实现图片反转效果
一个图片,点击图片图片反转180deg后,出现图片的简介 html部分 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem aliquid laboriosam a ipsam ducimus ea nobis officiis dignissimos co原创 2016-07-16 12:23:11 · 5170 阅读 · 0 评论 -
javaScript封装的常用函数(持续更新中)
// 2.通用函数var g= function (id){if (id.substr(0,1)=='.') {return document.getElementsByClassName(id.substr(1));}return document.getElementById(id);}var getDOM = function (id){ ret原创 2016-04-24 11:43:10 · 582 阅读 · 0 评论 -
js点击列表的第一个元素,不起作用,最后一个元素起作用
在网上看到 手风琴菜单的demo,就想来模仿着做一个html内容如下: First Menu Home About Us Services原创 2016-06-06 20:46:28 · 1850 阅读 · 0 评论 -
javaScript文档中常用的集合
1、forms集合2、elements集合3、options集合4、rows集合5、cells集合6、images集合7、links集合8、anchors集合9、frames集合使用:假如想获得 一个html中所有img标签的元素,你可以使用document.getElementsByTagName('img'),更简单的办法是document.images原创 2016-06-02 15:07:49 · 279 阅读 · 0 评论 -
javaScript中的事件代理
今天在看视频时,发现了 事件代理 这一方法。假设在一个div中,有很多button,很多li标签,它们需要绑定相应的方法,如果一个一个写就太麻烦了,这时候事件代理的优点就凸显出来了。下面看一下具体例子// 七、事件代理,遍历每个分享li,绑定事件。 for (var i = 0; i < boxs.length; i++) { // 1)在li上绑定点击事件代理 boxs[i原创 2016-05-28 10:38:42 · 318 阅读 · 0 评论 -
javaScript取得当前元素的下一个元素
如何取得当前元素的下一个元素呢?例如,这有两个div这是一个div 这是一个div我可以取得第一个div我想取得紧邻它的下一个元素,从网上获取的方法是:div1.nextSibling,然会我会得到一个#text可是我想要的不是这个东西,我想得到像变量div1一样的div,经过测试下面两种方法都可以这样就得到了我想得到的下一个元素了原创 2016-05-28 14:10:30 · 12909 阅读 · 0 评论 -
javascript中的立即执行函数
( function(){…} )()和( function (){…} () )是两种javascript立即执行函数的常见写法函数声明:function fnName () {…};使用function关键字声明一个函数,再指定一个函数名,叫函数声明。函数表达式 var fnName = function () {…};使用function关键字声明一个函数,但未给函数命名原创 2016-05-29 18:38:01 · 263 阅读 · 0 评论 -
document的createDocumentFragment()方法
假如你想动态的向html中添加十个段落,使用常规的方式可能会写出这样的代码:for(var i = 0 ; i < 10; i ++) { var p = document.createElement("p"); var oTxt = document.createTextNode("段落" + i); p.appendChild(oTxt); document.b原创 2016-05-29 18:55:09 · 1063 阅读 · 0 评论 -
nodeName - nodeValue
jsvar container = document.getElementById('container') console.log(container.nodeName + "/" +container.nodeValue) var attrNode = container.attributes[0] console.log(attrNode.no原创 2016-05-29 19:18:15 · 384 阅读 · 0 评论 -
DOMReady的实现
function myReady(fn) { // 对于现代浏览器,对DOMContentLoaded事件的处理采用标准的事件绑定方式 if (document.addEventListener) { //通过能力检测区分 document.addEventListener("DOMContentLoaded", fn, false); } else { IEContentLoad原创 2016-05-29 19:56:13 · 362 阅读 · 0 评论 -
CSS3 transform实现图片旋转木马3D浏览效果
首先DOM结构: 舞台>容器>图片为舞台设置样式:perspective: 800px;为容器设置样式:transform-style: preserve-3d;position: relative;transition: transform .8s; 元素本身style属性设置为transform: rotateY(0deg);为后面容器旋转获得初始值为图片设置样式:positi原创 2016-04-24 11:38:20 · 3486 阅读 · 0 评论 -
利用视觉差实现图片滑动
今天看了别人写的图片滑动,看起来很酷,读源码时,似乎有些困难,就模仿着写了一个,实现的效果与原网页相同,不过自己的js代码,逻辑简单,有待改进。ps:前两天写了旋转木马,那个兼容性不好,今天写这个网页的时候,也是按照这个思路,在谷歌浏览器上运行很好,火狐很多功能不能实现,由于wrap——panel使用了绝对定位,就将translate平移改为了left。改动后,各个浏览器运行的效果不错原创 2016-05-07 18:14:25 · 1153 阅读 · 0 评论 -
京东分类栏
今天把京东的分类栏给扒下来了,js部分是我自己写的,我不知道除了onmouseover和onmouseout之外,是否还有其他的方法,等以后遇到,会再来补充。html部分: 全部商品分类 家用电器 > 手机、数码、京东通信 >原创 2016-05-18 14:42:51 · 1594 阅读 · 0 评论 -
将json格式的字符串转化成object对象
将一堆json数据的字符串,转换成js能认识的数据例如:var response = "{"state":1,"msg":"yes","count":1}";对其进行操作:response = eval('(' + response + ')');这样在js中就可以访问response.state,response.msg,response.count原创 2016-05-06 13:45:23 · 686 阅读 · 0 评论 -
javaScript基本用法
1、document.write() 可用于直接向 HTML 输出流写内容。简单的说就是直接在网页中输出内容。2、警告alert弹出框:alert(字符串或变量)3、确认(confirm 消息对话框):confirm(str); 返回boolean值4、提问(prompt 消息对话框):prompt(str1, str2); str1: 要显示在消息对话框中的文本,不可修改原创 2016-04-23 19:43:01 · 329 阅读 · 0 评论 -
offsetTop和offset().top
前段时间写了一个视觉差滚动的demo,是用js实现的。第二次看这个例子,我想封装一个jquery插件。首先demo中有两个button需要在jq中对它们进行定位,然而问题来了我先得到第一张图片的位置,对图片中的button的top进行定位时,想法是将css样式中的top设置成this.img.offset().top + this.img.height() / 2 - this原创 2016-06-01 16:34:09 · 7634 阅读 · 0 评论 -
关于 dataTable 组件使用
偶然发现一个叫 dataTable 的组件,觉得很好用,于是研究了一番,下面是代码var lang = { "sProcessing": "处理中...", "sLengthMenu": "每页 _MENU_ 项", "sZeroRecords": "没有匹配结果", "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。原创 2017-03-26 20:50:00 · 1652 阅读 · 0 评论