总结

发布时间：2024-11-19 04:16

结尾总结：总结要点，强化主要信息 #生活技巧# #职场沟通技巧# #书面表达#

1.键盘的左右键移动div

这个比较简单，就是判断一下键盘按的是哪个键，判断它的keyCode。

if(oevent.keyCode==37)//如果按的是向左键
{
odiv.style.left = odiv.offsetLeft -10 +'px';
}
else if(oevent.keyCode==39)
{
odiv.style.left = odiv.offsetLeft+10 +'px';
}
else if(oevent.keyCode==40)
{
odiv.style.top = odiv.offsetTop +10 +'px';
}
else if(oevent.keyCode==38)
{
odiv.style.top = odiv.offsetTop -10 +'px';
}

首先去百度一下，上下左右键的码值。

document.onkeydown = function(ev)
{
var odiv = document.getElementById('div1');
var oevent = ev||event;

当然，现在是要获取键盘上按的是那个键，也就是onkeydown，

*****最后，还有一个十分重要的问题：就是这个div必须绝对定位。

2.微博效果（发布消息）

要做出来的效果十分简单，就是在一个textarea里输入内容，点击发布，（当然也可以使用快捷键），内容发布到指定的框内。

（1）当触发click事件，获取到textarea里的内容，再把textarea框清空，

（2）把获取到的内容发布到发布框内，

<i>新创建一个li标签， var oli = document.createElement('li');//当然新创建一个div也可以，

<ii>然后把从textarea里获取到的内容赋给oli，oli.innerHTML= otxt.value；

<iii>最后一步就把这个li添加到ul里，（ul即为发布框）

if(oul.children.length>0)
{
oul.insertBefore(oli,oul.children[0]);//新发布的消息在最上面
}
else
{
oul.appendChild(oli);//新发布的消息在最下面
}

3.一串跟着鼠标的div

就是好多div跟着鼠标走，鼠标到哪它到哪儿，大体的思路就是，每一个div都跟着它的前一个div走（

odiv[i].style.left = odiv[i-1].offsetLeft-20+'px';
odiv[i].style.top = odiv[i-1].offsetTop-20+'px';

），第一个div跟着鼠标走。

<i>首先获取到鼠标的位置

function getPos(ev)
{
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};
}

***clientX，clientY只是在没有滚动条的时候，在屏幕的可视区里面是正常的。一旦出现滚动条就会出问题。这里必须获取scrollTop和 scrollLeft，

<ii>

后一个div跟着前一个div走，第一个div跟着鼠标走

for(var i=odiv.length-1;i>0;i--)
{
odiv[i].style.left = odiv[i-1].offsetLeft-20+'px';
odiv[i].style.top = odiv[i-1].offsetTop-20+'px';

}
odiv[0].style.left =pos.x+'px';
odiv[0].style.top = pos.y+'px';

******最后，这些要动的div都必须是绝对定位。

js源码：

function getPos(ev)
{

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
return {x:ev.clientX+scrollLeft,y:ev.clientY+scrollTop};

}

document.onmousemove = function(ev)
{

var odiv = document.getElementsByTagName('div');

var oevent =ev||event;
var pos = getPos(oevent);

for(var i=odiv.length-1;i>0;i--)
{

odiv[i].style.left = odiv[i-1].offsetLeft-20+'px';
odiv[i].style.top = odiv[i-1].offsetTop-20+'px';

}
odiv[0].style.left =pos.x+'px';
odiv[0].style.top = pos.y+'px';

}

总结：要实现一个功能的时候，首先要想清楚它要实现什么，怎么实现，按步骤分析清楚，再开始写代码，还有就是尽量的考虑全面一些，用主流浏览器都做一下测试。

网址：总结 https://www.yuejiaxmz.com/news/view/130168

上一篇：员工压力与情绪管理培训课件模板(

下一篇：内训:高情商的情绪压力管理,推荐