web前端
zhangyingchengqi
学无止境。
展开
-
HTML的一个Canvas实例
html5function drawTree( context){//绘制树干: 注意这里使用了浙变色做树干纹理var trunkGradient=context.createLinearGradient(-5,-50,5,-50);//树干左侧边缘是一般程度的棕色trunkGradient.addColorStop( 0, '#663300');//树干中间偏左的位置原创 2014-11-04 09:40:45 · 621 阅读 · 0 评论 -
javascript:void(0)问题
注:以下代码未经全面测试,但每一种方法可能会出现的情况都基本做了说明。 在做页面时,如果想做一个链接点击后不做任何事情,或者响应点击而完成其他事情,可以设置其属性 href = "#",但是,这样会有一个问题,就是当页面有滚动条时,点击后会返回到页面顶端,用户体验不好。 目前有如下几种解决办法: 1)点击链接后不做任何事情 "javascript:void(0);" >原创 2015-04-11 17:50:48 · 570 阅读 · 0 评论 -
js数组操作
1. 数组元素去除重复?方案一: var arr=[1,2,3,'4','3',5,2]; var result=unique( arr); for( var i=0;i<result.length;i++){ document.write( result[i] +""); } function unique( arr ){ var result=[]; fo原创 2015-09-16 14:26:00 · 165 阅读 · 0 评论 -
盒子模型的宽度计算问题, 有什么问题,及解决方案
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是ie 盒子模型和标准 w3c 盒子模型。 标准W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。从上图可以看到 IE 盒子模型的范围原创 2015-09-16 09:22:21 · 13606 阅读 · 1 评论 -
块级元素及内联元素
问题: #s1{width:100px; height:100px;} 以上的样式设置到中是什么效果?设置到上是什么效果? 为什么? 设置到中有效果,设置到 中没有效果。要回答这个问题首先要了解CSS中对元素类型的定义: 块级元素(block level element)内联元素(i原创 2015-09-16 09:31:33 · 462 阅读 · 0 评论 -
call和apply
在ECMAScript v3中,给Function原型定义了这两个方法,这两个方法的作用都是一样的:使用这两个方法可以像调用其他对象方法一样调用函数,这句话是从书上抄的,至少我是没读明白这是什么意思。 下面说简单易懂的,先看段代码:function Introduce(name,age) { document.write("My name is "+name转载 2015-10-31 11:52:42 · 336 阅读 · 0 评论 -
闭包
闭包是一个比较抽象的概念,尤其是对js新手来说.书上的解释实在是比较晦涩,对我来说也是一样. 但是他也是js能力提升中无法绕过的一环,几乎每次面试必问的问题,因为在回答的时候.你的答案的深度,对术语的理解以及js内部解释器的运作方式的描述,都是可以看出你js实际水平的.即使你没答对,也能让考官对你的水平有个评估.那么我先来说说我对js中的闭包的理解. 闭包是很多语言都具备的特性转载 2015-10-31 11:53:53 · 344 阅读 · 0 评论 -
IE6、IE7、IE8的CSS、JS兼容
Internet Explorer 6中查看使用 Microsoft JScript 的网页,可能会遇到web浏览器速度较慢的性能问题。原因是如果js脚本同时创建大量变量,jscript引擎执行垃圾收集算法时会监视脚本中变量分配的数量、脚本中使用的文字值的数量和脚本中分配的字符串值的总大小,如果超过这些值的阈值,就会发生垃圾收集,垃圾收集进程会中断正在运行的脚本。因此,这些运行中的脚本将被挂起,直转载 2015-10-31 11:50:54 · 127 阅读 · 0 评论 -
前端tips
行内元素有哪些?块级元素有哪些?CSS的盒模型?块级元素:div p h1 h2 h3 h4 form ul行内元素: a b br i span input selectCss盒模型:内容,border ,margin,padding前端页面有哪三层构成,分别是什么?作用是什么?结构层;主要指DOM节点;HTML/XHTML样式层;主要是指页面渲染;CSS脚本转载 2015-10-31 11:55:16 · 573 阅读 · 0 评论 -
闭包
题目:下面一段Html结构,如何实现当点li时输出该li的索引。 这是第一条alert(0);这是第二条alert(1);这是第三条alert(2);复制代码 误区:有的童鞋就会说,这个很好解决啊,,然后噼啪噼啪一顿敲,就成了下面这样。转载 2015-10-31 11:56:10 · 502 阅读 · 0 评论 -
javascript构造函数中的公有,私有,特权和静态成员
//构造函数 function myConstructor(message){ this.message=message; //私有属性 var separator='-'; var myOwner=this; //私有方法 function alertMessage(){ al翻译 2016-06-06 10:07:44 · 612 阅读 · 0 评论 -
javascript中this执行上下文的改变
this关键字引用的是包含它的函数作为某个对象的方法被调用时的那个对象。 哈哈,。。先看案例 : 先编写一个库 : (function(){if(!window.yc){window['yc']={};} function $(){var elements=new Array();//查找作翻译 2016-06-06 11:41:49 · 559 阅读 · 0 评论 -
使用js改变DOM样式的三种方式 - className属性
改变dom节点样式另一种方式是设置dom的className属性. .red{ color:red; } hello world var node=document.getElementById("a"); node.className="red"; 以上代码等同于 : hello world原创 2015-04-02 12:28:05 · 8700 阅读 · 1 评论 -
使用js改变DOM样式的三种方式 - style属性
改变dom节点样式最简单的方式是设置dom的style属性.hello world var node=document.getElementById("a"); node.style.color="red"; 以上代码等同于 : hello world原创 2015-04-02 12:25:12 · 11191 阅读 · 2 评论 -
HTML的一个Canvas实例 - 热度追踪
html5 #heatmap{ background-image:url("bark.jpg"); } var points={}; var scale=3; var x=-1; var y=-1; function loadDemo(){ document.getElementById("resetButton").onclick=res原创 2014-11-04 10:37:55 · 662 阅读 · 0 评论 -
javascript兼容性问题一_____nextSibling问题
先看代码: var item1=document.getElementById("item1"); alert( "item1的下一个子节点的节点类型为:"+item1.nextSibling.nodeType); alert( "ul元素下总共有多少子节点"+ document.getElementsByTagName("ul")[0原创 2015-03-10 12:57:31 · 1092 阅读 · 0 评论 -
html最佳实践-CSS置顶,JS置尾
在极端的情况,比较下面这段html代码: //很多js代码 //很多html代码 //css代码如果js脚本很多,浏览器加载脚本的时间会很长,这时,页面的html还没有加载,会导致浏览器长时间的出现一片空白,而js加载完后,再加载html又要花时间,而此时css还没有加载,所以显示的html是没有作何样式的,直到html加载完毕,css开始原创 2015-03-10 08:59:21 · 1364 阅读 · 0 评论 -
如何避免JS变量命名冲突
js中变量命名冲突的解决思路。原创 2015-03-10 08:25:16 · 2637 阅读 · 1 评论 -
使用js改变DOM样式的三种方式 - 动态创建style标签
改变dom节点样式另一种方式是利用js动态创建一个style标签,再填入css属性,再添加到页面 hello world function addStyleNode( str){ var styleNode=document.createElement("style"); styleNode.type="text/css"; if( sty原创 2015-04-02 12:29:08 · 6559 阅读 · 0 评论 -
javascript中扩展Array类的原型
在js中,只要是类就有原型,不管它是自定义类还是js的内置类,我们可以通过修改内置类的原型,让js基本类型的对象获得其它功能。下面,我们来扩展一下Array类的原型. //扩展Array类,实现一个each函数,//功能:循环数组中的每个元素。 // 参数: fun是一个回调函数,可以理解成是一个接口,调用each方法时,要提供这个接口的一个实现函数。Array.protot原创 2015-04-02 10:56:40 · 3069 阅读 · 0 评论 -
javascript操作标签的自定义属性
自定义属性是一个很好用的小技巧,利用它我们可以用来保存其它类型的数据。 如数组,hash对象,字符串等. 但js来操作自定义属性要注意。 案例: 在标签中定义了一个自定义属性 visitNumberbaidu var node=document.getElementById("a"); alert( node.getAttribute("visitNumber"原创 2015-04-02 11:55:40 · 3378 阅读 · 0 评论 -
javascript中的面向对象设计案例
function PhonebookManager( o ){ this._phonebook=o; } PhonebookManager.prototype={ //查询电话 getTel: function( oName ){ var tel=""; for( var i=0;i<this._phonebook.length;i++){ if( this.原创 2015-04-02 10:49:31 · 557 阅读 · 0 评论 -
javascript中使用自定义类来扩展内置类的原型
接上一篇,在这里,我们用一个自定义的类来扩展内置类的原型. function myArray( o){ this.getArray=function(){ return o; };}myArray.prototype={ each:function( fun){ var o=this.getArray(); for( var i=0,n=o.length;i<n;原创 2015-04-02 11:00:54 · 457 阅读 · 0 评论 -
javascript操作标签的常规属性
html标签和js之间存在映射的关系,html标签在js中以Dom节点对象存在。js获取html标签中属性的方式有两种: 1. 通过dom对象的getAttribute方法 2. 通过dom节点属性. 但在ie和ff下用node.getAttribute("属性名")得到的结果不太一样,相比下,通过node.属性名得到的结果更一致一些。 请在ie和ff中测试下面的代码:原创 2015-04-02 11:43:41 · 1917 阅读 · 0 评论 -
javascript中的事件冒泡
在html页面中,如果两个控件正好叠加,并且两个控件都绑定了临听事件的话,里面的控件在事件被触发时,会发生事件冒泡的现象。 示例如下:事件冒泡 #wrapper{padding:20px 0px;background:black;width:150px;text-align:center;}原创 2015-03-24 17:00:28 · 363 阅读 · 0 评论 -
javascript中访问对象的属性
JavaScript中有两种方式来访问对象的属性,点操作符或者中括号操作符。两种语法是等价的,但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名。点号后加标识符(静态的);中括号放字符串,字符串可以是动态的,obj['string'+variable];所以请注意以下代码: var a={ name: 'l原创 2017-06-15 14:53:59 · 498 阅读 · 0 评论