JavaScript 知识要点1【web钱端吧】_百度贴吧

04月22日漏签0天

web钱端吧关注：4贴子：339

11回复贴，共1页

<返回web钱端吧

JavaScript 知识要点1

只看楼主收藏回复

document的本质：document.childNodes[0].tagName undefined
<script>
window.onload=function ()
{
alert(document.childNodes[1].tagName); // 弹出HTML，第0个子节点是 undefined 没有第2、3……个子节点
};
</script>

送TA礼物

1楼2016-01-22 11:55回复

<script>
document.onkeydown=function (ev)
{
var oEvent=ev||event; //兼容写法
alert(oEvent.keyCode); //运行页面后，按键盘上的任意键都会弹出对应的键值。
};
</script>
例如：回车键键值 13 shift 16 ctrl 17 alt 18 a 65【字母序列依次加1】大写锁定键Caps Lock 20
大键盘数字键1是49 小键盘数字键 1是 97 回格键 8 等；

2楼2016-01-22 11:56

<script>
window.onload=function ()
{
document.onclick=function (ev)
{
//IE
//alert(event.clientX+','+event.clientY);
//FF
//alert(ev.clientX+','+ev.clientY);
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
};
};
</script>
鼠标点击浏览器窗口，弹出点击位置的横竖像素值左起上起

4楼2016-01-22 11:58

document.onkeydown=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
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==38)
{
oDiv.style.top=oDiv.offsetTop-10+'px';
}
else if(oEvent.keyCode==40)
{
oDiv.style.top=oDiv.offsetTop+10+'px';
}
};
</script>键盘控制div 左右移动【键盘左37 上38 右39 下 40】但是移动会超出屏幕的范围；

6楼2016-01-22 12:04

收起回复

<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+'px';
};
</script>
<div id="div1"></div>
跟随鼠标移动的div 这个可以任意定位的div 要给position：absolute 的样式；

7楼2016-01-22 12:05

<script>
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
oDiv.style.left=oEvent.clientX+'px';
oDiv.style.top=oEvent.clientY+scrollTop+'px';
};
</script>
这是可以加鼠标滑轮上下滚动且跟随鼠标移动

8楼2016-01-22 12:07

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 oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};
</script>
可以出现左右滚动条的 div跟随鼠标移动

9楼2016-01-22 12:10

<script>
window.onload=function ()
{
var oTxt1=document.getElementById('txt1');
var oTxt2=document.getElementById('txt2');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function ()
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
};
};
</script>
</head>
<body>
<input id="txt1" type="text" />
<input id="btn1" type="button" value="发布" /><br>
<textarea id="txt2" rows="10" cols="40"></textarea>
发布留言：新留言在旧留言的后面；

10楼2016-01-22 14:17

oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.keyCode==13 && oEvent.ctrlKey)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
Ctrl+回车键提交留言

11楼2016-01-22 14:17

oTxt1.onkeydown=function (ev)
{
var oEvent=ev||event;
if(oEvent.keyCode==13)
{
oTxt2.value+=oTxt1.value+'\n';
oTxt1.value='';
}
};
回车键提交留言；

12楼2016-01-22 14:18

#div1 {width:200px; height:200px; background:red; position:absolute;}
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function (ev)
{
var oEvent=ev||event;
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.onmousemove=function (ev)
{
var oEvent=ev||event;
oDiv.style.left=oEvent.clientX-disX+'px';
oDiv.style.top=oEvent.clientY-disY+'px';
};
document.onmouseup=function ()
{
document.onmousemove=null;
document.onmouseup=null;
};
};
};
</script>
</head>
<div id="div1"></div>
拖拽

14楼2016-01-22 14:22

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

贴吧热议榜

11回复贴，共1页

<返回web钱端吧

发表回复

发贴请遵守贴吧协议及“七条底线”贴吧投诉

内容:

使用签名档查看全部

发表

保存至快速回贴