2、写一个留言框,按下ctrl和回车提交留言
<div>
<textarea id=“txt1” rows = “10” cols = “40”></textarea>
<input id = “txt2” type = “text”/>
<input id = “btn” type = “button” value = “留言”/>
</div>
<script>
window.onload = function(){
var btn = document.getElementById(“btn”);
var txt1 = document.getElementById(“txt1’);
var txt2 = document.getElementById(“txt2”);
btn.onclick = function(){
txt1.value += txt2.value + “\n”; //讲txt2文本框里输入的内容加到txt1文本框内,并换行;
txt2.value = null; //点击按钮后,txt2文本框内容清空;
}
txt2.onkeydown = function(evt){
var e = evt || window.event; //兼容W3C和IE浏览器
if(e.ctrlkey && e.keyCode == 13){ //同时按下ctrl和回车键时,提交留言(回车键键码为13)
txt1.value += txt2.value + “\n”;
txt2.value = null ;
}
}
}
</script>
3、鼠标拖动物体运动
html、CSS部分代码与第一个相同
<div id = “move">
</div>
<script>
document.onmousemove = function(evt){
var e = evt || window.event; // IE与非IE兼容
var oMove = document.getElementById("move");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
//兼容, body.scrollTop/scrollLeft 为IE下的滚动条高度宽度;
oMove.style.left = e.clientX + scrollLeft +"px” ;
oMove.style.top = e.clientY + scrollTop + "px”;
//元素的位置 = 鼠标横纵坐标 +滚动的高度宽度;
}
</script>
4、写一个图片的无缝滚动
html部分:
CSS部分: