`

javascript记录

 
阅读更多
1网页换肤
原理:改变link的href属性
2单机按钮显示隐藏div
原理:if....else.....判断div的display属性
3单击不同按钮改变div背景色
原理:通过函数传参的方式能很好的实现
4单击不同按钮改变div宽高
原理:通过传入函数两个参数实现,即属性:值
5全选反选不选
原理:if(aInput.checked==true){aInput.checked=false}else{.....}
6选项卡
原理:全部清除其他后再给本身加样式关键:aBtn.index=i;
7js简易日历
注意:var oTxt=oDiv.getElementsByTagName('div')[0];和oTxt.innerHTML=引号的应用!
8求和
关键isNaN()
9利用%实现隔行变色和数字转换为分秒
10实现n个数字求和
关键:定义一个result=0,for循环arguments的length
11根据arguments的length封装一个css函数用于获取或设置属性值
12封装一个获取非行间样式getStyle(obj,attr)
13,splice(起点,长度)删除和arr.sort(function(n1,n2){ return n2-n1;});排序
14.超酷数码时钟,注意:定义变量的位置,要在定时器要调用的函数内!还有charAt()是字符串的方法而非数组喔!
15延时提示框实例,注意:setTimeout为多少秒后触发一次
16oDiv下getElementById()是不允许的,必须document
17无缝滚动图片
offsetLeft指的是border到border之间的距离
offsetWidth不包括margin,无缝滚动制作是尽量避免margin的使用!
对于同一个元素要么你一直改变他的style,要么你一直改变他的class,混着来你懂得!
Dom
1childNodes与nodeType的配合使用或children的单独使用
2单击a链接隐藏或显示li中的内容parentNode
3offsetParent获取元素有定位的父级
4firstChild的一个兼容处理
if(oUl.firstElementChild)
        {
                oUl.firstElementChild.style.background='red';//高版本
        }
        else
        {
                oUl.firstChild.style.background='red';//低版本ie7等
        }
5setAttribute、getAttribute、removeAttribute
6封装一个getByClass
function getByClass(oParent,sClass)
{
        var aEle=oParent.getElementsByTagName('*');
        var aResult=[];
        for(var i=0;i<aEle.length;i++)
        {
                if(aEle.className=='box')
                {
                        aResult.push(aEle);
                }
        }
        return aResult;
}
7创建与插入:creatElement()与appendChild()或insertBefore
根据aLi.length是否大于0,再判断使用insertBefore,因为在低版本浏览器中当开始无li时,oUl.insertBefore(oLi,aLi[0]);会出错!
删除Dom元素:oUl.removeChild();
8表格隔行变色
关键:tBodies[0、定义oldColor以记录
添加表格oTab.tBodies[0].appendChild(oTr);
删除表格var id=oTab.tBodies[0].rows.length+1;oTd.innerHTML=id++;
var oTd=document.createElement('td');//注意获取a的方式
搜索表格
Search找到并返回字符串出现的位置,没找到返回-1;
window.onload=function()
{
        var oTab=document.getElementById('tab1');
        var oName=document.getElementById('name');
        var oBtn=document.getElementById('btn1');
        oBtn.onclick=function()
        {
                for(var i=0;i<oTab.tBodies[0].rows.length;i++)
                {
                        var sTab=oTab.tBodies[0].rows.cells[1].innerHTML.toLowerCase();
                        var sTxt=oName.value.toLowerCase()
                        var arr=sTxt.split(' ');
                        oTab.tBodies[0].rows.style.background='';
                        for(var j=0;j<arr.length;j++)
                        {
                                if(sTab.search(arr[j])!=-1)
                                {
                                        oTab.tBodies[0].rows.style.background='green';
                                }
                        }
                }        
        };
};
9给li中的数字排序
原理:转换为数组利用其sort()、parseInt等;三步:转换、排序、插入
运动
1分享到startMove(iTarget)
if(oDiv.offsetLeft>iTarget)
{
        speed=-10;
}
else
{
        speed=10;
}
注意:var timer=null;的定义的位置
2透明度的变化
注意:额外定义一个alpha变量来代替‘offsetAlpha’
if(alpha<iTarget)
{
        speed=10;
}
else                                   
{
        speed=-10;
}
if(alpha==iTarget)
3缓冲运动
注意:var speed=(目标-oDiv.offsetLeft)/10;speed=speed>0?Math.ceil(speed):Math.floor(speed);
4滑动的侧边栏
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var mm=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;
var oDivTop=parseInt(scrollTop+mm);
startMove(oDivTop);//offsetTop包括滚动
5匀速运动的停止条件
if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
{
        clearInterval(timer);
        oDiv.style.left=iTarget+'px';
}
5多物体运动中所有变量都不能公用!startMove(obj,iTarget)
多个Div同时变宽注意:aDiv.timer=null;
多个Div透明度变化注意:aDiv.alpha=30;obj.alpha+=speed;
6任意值运动startMove(obj, attr, iTarget)
注意:offset系列当有边框是会出现问题!解决:getStyle()
步骤:取当前值、算速度、判停止
7链式运动startMove(obj,attr,iTarget,fnEnd)
8多值同时运动(完美)startMove(obj,json,fnEnd)
9微博发布框
注意
if(oUl.children.length>0)
{
        oUl.insertBefore(oLi,aLi[0]);
}
else
{
        oUl.appendChild(oLi);
}
var iHeight=oLi.offsetHeight;
oLi.style.height=0;
10弹性运动
停止条件:Math.abs(speed)<1&&Math.abs(iTarget-left)<1
oDiv.style.left=oDiv.offsetLeft+speed+’px’;
由于oDiv.style.left=只接受整数,故每次定时器开启相加时都会舍去小数部分
left=left+speed;这里left就是一普通变量,神马都能接收,你懂得。。。
11碰撞运动+重力
var oDiv=document.getElementById('div1');
iSpeedY+=3;            //注意重力语句书写顺序(位置)
var l=oDiv.offsetLeft+iSpeedX;
var t=oDiv.offsetTop+iSpeedY;
12弹性+拖拽+重力
13布局转换
注意:要有默认margin值即便为零
解决层级问题zIndex++;
事件
1事件对象var oEvent=ev||event;(clientX指的是可视区的坐标)
2取消冒泡oEvent.cancelBubble
3跟随鼠标的Div注意:oDiv.style.top=clientY+scrollTop;
4一串跟随鼠标的Div
注意:
function getPos(ev)
{
        var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
        var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
        return {x:scrollLeft+ev.clientX,y:scrollTop+ev.clientY};
}
Div的position:absolute;
5keyCode键盘字符编号
6键盘控制Div的移动
注意:document.onkeydown
if(oEvent.keyCode==37)
{
        oDiv.style.left=oDiv.offsetLeft-10+'px';
}
7ctrlKey/shiftKey/altKey
oTxt1.onkeydown=function(ev)
        {
                var oEvent=ev||event;
                if(oEvent.keyCode==13&&oEvent.ctrlKey)
                {
                        oTxt2.value+=oTxt1.value+'\n';
                        oTxt1.value='';
                }
        };
8阻止右键菜单并自定义菜单
document.oncontextmenu=function()
{
        return false;
};
9只能输入数字的文本框
oTxt.onkeydown=function(ev)
{
        var oEvent=ev||event;
        if(oEvent.keyCode!=8&&(oEvent.keyCode>57||oEvent.keyCode<48))
        {
                return false;
        }
};
10拖拽
解决:菜单栏抬起问题、火狐的bug问题(down/move/up)
11事件绑定
attachEvent和addEventListener
12事件捕获
oDiv.setCapture();所有事件都集中到oDiv上oDiv.releaseCapture();释放捕获
13完美拖拽
oDiv.mousedown/if(oDiv.setCapture){oDiv...}else{document...}
function mouseMove(ev)
                {
                        var oEvent=ev||event;
                        var l=oEvent.clientX-disX;
                        var t=oEvent.clientY-disY;
                        if(l<0)
                        {
                                l=0;
                        }
                        else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                        {
                                l=document.documentElement.clientWidth-oDiv.offsetWidth;
                        }
                        if(t<0)
                        {
                                t=0;
                        }
                        else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                        {
                                t=document.documentElement.clientHeight-oDiv.offsetHeight;
                        }
                        oDiv.style.left=l+'px';
                        oDiv.style.top=t+'px';//一定要注意位置!
                }
14自定义滚动条并控制另一个Div大小
删除y轴移动的代码、
oDiv.style.left=l+'px';
var scale=l/(oDiv1.offsetWidth-oDiv.offsetWidth);
oDiv2.style.width=scale*400+'px';
oDiv2.style.height=scale*400+'px';
注意控制透明度时的两种不同写法
oDiv2.style.filter="alpha(opacity:'+100*scale+')";   oDiv2.style.opacity=scale;
控制文章的上下移动:xi.style.top=-scale*(xi.offsetHeight-oDiv2.offsetHeight)+'px';
注意布局外Div:设宽高position:relative内Div无设宽高position:absolute;left=0;top=0;
15阻止缓存
“aaa.txt?t=”+new Date().getTime();  或”aaa.txt?date=”+Math.random();
实例
1微博发布框
注意:ie = !-[1,];
onchange : 当光标消失的时候,只能触发一次
ie : onpropertychange : 输入连续触发
标准:oninput : 也是连续触发
return String(str).replace(/[^\x00-\xff]/g,'aa').length
思路:oT.onfocus、oT.onblur、if(ie)、toChange()、getLength()、oA.onclick
2图片预加载:
3在window.onload中使oImg.src与onmouseover的src保持一致即可
苹果菜单
注意:aImg.width与aImg.style.left而没有aImg.style.width一说

 

分享到:
评论

相关推荐

    javascript 记录用户最后登录时间

    ### JavaScript 记录用户最后登录时间 在网页应用开发中,记录用户的登录信息是一项非常重要的功能,这不仅可以帮助我们分析用户行为,还可以用于提供个性化的用户体验。本文将详细介绍如何使用JavaScript来实现...

    js-logger, 轻量级,低调,可以配置的JavaScript记录器.zip

    js-logger, 轻量级,低调,可以配置的JavaScript记录器 记录器 轻量级,低调,可以配置的JavaScript记录器。它可以让你丰富,出名,几乎不需要任何东西- 哦,它是使用 console.log的一个灵活抽象。安装js记录器具有...

    JavaScript记录登陆次数

    本段代码主要是利用JavaScript编写记录登陆次数的小程序,简单实用,快来看看吧!

    PhotoShop - 记录PS的所有操作为JavaScript代码

    在Photoshop中,有一种功能允许用户记录并导出他们在软件中的所有操作为JavaScript代码,这个功能被称为"动作"(Actions)。动作是Photoshop的一个强大工具,它可以自动化一系列重复性的编辑步骤,节省时间和提高...

    jsLog:非常简单的javascript记录器

    日志非常简单的javascript记录器用法很简单: log(message, level);消息:任何任意字符串/对象level :用户定义的级别(默认为INFO )。 有保留字ERROR和LOG 。 log();这将返回 {msg: 'string', lvl: 'INFO'} 形式的...

    JavaScript记录光标在编辑器中位置的实现方法

    在web开发中,记录用户在富文本编辑器中的光标位置是一...本文内容丰富,详细地介绍了使用JavaScript记录编辑器中光标位置的多种方法,不仅适用于初级开发者,对于希望进一步提高前端技能的中级开发者也有很大的帮助。

    HyperLog:高级JavaScript记录器

    **HyperLog:高级JavaScript记录器** 在JavaScript的世界中,日志记录是开发、调试和监控应用程序性能的关键工具。HyperLog是一个先进的JavaScript记录器,旨在提供更高效、更灵活的日志解决方案,尤其适合处理大...

    logmeplease:带过滤器的javascript记录器

    带过滤器的javascript记录器 用于避免控制台中的大量日志消息:) 添加过滤器以仅显示与过滤器匹配的日志。 如何使用 将日志添加到您的页面 &lt; script src = "logmeplease.js" &gt; &lt; / script &gt; 创建记录器...

    loggerz:一个简单的 javascript 记录器及其管理页面

    loggerz的核心是它的JavaScript记录器。这个记录器设计简洁,易于集成到任何JavaScript项目中。它支持多种级别的日志记录,如"DEBUG"、"INFO"、"WARN"和"ERROR",这些级别对应不同的严重性,便于开发者根据需要过滤...

    Bragi-Browser:适用于Web浏览器的Bragi Javascript记录器

    Bragi:Javascript记录器-浏览器 这是给浏览器的。 注意:这是一个早期版本,API可能会更改。 这是专为Chrome设计的,某些功能(例如颜色)在所有浏览器中均无法使用。 API可能会更改。 欢迎改进和请求。 Bragi是...

    学习html Css和Javascript的记录.zip

    学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和Javascript的记录学习html Css和Javascript的记录 学习html Css和...

    算法:使用Python,C ++和JavaScript记录Leetcode

    总结,使用Python、C++和JavaScript记录LeetCode不仅能够提升你的编程技能,还能加深对算法和数据结构的理解。通过不断练习和挑战,你将能够在实际工作中更有效地解决问题,并为面试做好充分准备。在“Algorithm-...

    关于JavaScript的学习记录

    关于JavaScript的学习记录

    :vhs:使用JavaScript记录和重播请求-JavaScript开发

    axios-vcr JavaScript在JavaScript中记录和重播请求axios-vcr是一组axios中间件,允许您记录和重播axios请求。 使用它进行可靠,快速和确定性更高的测试。 特色axios-vcr JavaScript在JavaScript中记录和重播请求...

    javascript 原创入门教程(ppt格式)

    在这里,你将学习如何使用JavaScript记录用户输入的速度和准确性,这对于评估用户在特定任务中的表现,或者优化网站用户体验有重要价值。这可能涉及到时间戳的使用、计时器函数以及数据分析技术。 最后的第十三章...

    leetcode-js:用 JavaScript 记录我的 leetcode 解决方案

    在本项目中,“leetcode-js”是一个使用 JavaScript 编写的代码仓库,主要目的是记录并分享作者在解决 LeetCode 题目的解决方案。LeetCode 是一个在线平台,提供了大量的编程题目,帮助程序员提高算法能力和解决问题...

    JavaScript_记录器几乎可以记录一切.zip

    "JavaScript_记录器几乎可以记录一切.zip"这个压缩包文件,暗示了它可能包含了一个或多个JavaScript日志记录库,这些库可以帮助开发者在开发过程中追踪和记录应用程序的运行状态。 日志记录是软件开发中的一个重要...

    log-js:简单的javascript记录器

    **JavaScript日志记录器——log-js** 在JavaScript开发过程中,日志记录是一个至关重要的环节,它可以帮助开发者跟踪代码运行情况,排查错误,优化性能。`log-js` 是一个专为JavaScript设计的简单日志记录器,它...

    JavaScript抗疫相关物料的管理系统,领用、派发记录,库存查询统计.zip

    JavaScript抗疫相关物料的管理系统,领用、派发记录,库存查询统计 JavaScript抗疫相关物料的管理系统,领用、派发记录,库存查询统计 JavaScript抗疫相关物料的管理系统,领用、派发记录,库存查询统计 ...

Global site tag (gtag.js) - Google Analytics