本文介绍了如何使用 JavaScript 实现走马灯效果，并详细讲解了 Windows 对象的多个属性，包括屏幕分辨率、粘贴版操作、历史记录、文档属性等，同时展示了如何通过事件绑定实现元素的动态变化。
练习：走马灯效果
<title>走马灯效果</title>
<script type="text/javascript">
function scroll() {
var title = document.title;
var lastCh = title.charAt(title.length - 1);
var leftStr = title.substring(0, title.length - 1);
document.title = lastCh + leftStr;
}
//每调用一次setInterval都会产生一个新的定时器，并且旧的不会自动停止
</script>
</head>
<body>
<input type="button" value="scroll" onclick="scorllbtn=setInterval('scroll()', 500)" />
<input type="button" value="scroll" onclick="clearInterval（setInterval('scroll()', 500)）" />//错误
<input type="button" value="stop" onclick="clearInterval(scorllbtn)" />
Windows对象的属性2
1.screen对象，屏幕的属性
alert("分辨率："+screen.width+"*"+screen.height);
if (screen.width < 1024 || screen.height < 768) {
alert("分辨率太低");
}
2.clipboardData对象，对粘贴版的操作
clearData（“Text”）清除 setData
<input type="button" value="分享给好友" onclick="clipboardData.setData('Text','so funny'+location.href);alert('fangjinqu');" />
禁止复制 oncopy
<body oncopy="alert('禁止复制');return false;">
禁止粘贴 onpaste
phone<input type="text" onpaste="alert('fobid taste'); return false;" />
3.复制带连接
<script type="text/javascript">
function motifyColipboard() {
var txt = clipboardData.getData("Text");
txt += "本文来自wuhazjc" + location.href;
clipboardData.setData("Text", txt);
}
</script>
</head>
<body oncopy="setTimeout('motifyColipboard()',100)">
4.history
window.history.back(), window.history.forward(),window.history.go(-1),window.history.go(1)
5.document 属性
write：向文档中写入内容
document.write("<a href='#'>你好</a>") 动态写入内容。
在onclick中加载会把原先的内容冲掉
（2）getElementById
<script type="text/javascript">
function btnClick() {
var txt = document.getElementById("textbox1");
alert(txt.value);
//alert(textbox1.value);
}
function btnClick2() {
var txt = document.getElementById("textbox2");
alert(txt.value);
//alert(form1.textbox2.value);
}
</script>
</head>
<body >
<input type="text" id="textbox1" />
<input type="button" value="点一下" onclick="btnClick()" />
<form action="Default.aspx" id="form1">
<input type="text" id="textbox2" />
<input type="button" value="点一下" onclick="btnClick2()" />
</form>
(3)getElementsByName,根据元素的name获得对象，由于页面中元素的name可以重复
<script type="text/javascript">
function btnClick() {
var radios = document.getElementsByName("gender");
// for (var r in radios) {
// alert(r.value);
// }
for (var r = 0; r < radios.length; r++) {
var radio = radios[r];
alert(radio.value);
}
}
</script>
</head>
<body >
<input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="保密" />保密
<input type="radio" name="gender" value="女" />女
<input type="button" value="click" onclick="btnClick()" />
（4）getElementsByTagName
<script type="text/javascript">
function btnClick2() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.value = "hello";
}
}
</script>
</head>
<body >
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="button" value="click" onclick="btnClick2()" />
例子：点击变化
<script type="text/javascript">
function initEvent(){
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
input.onclick = btnClick;
}
}
function btnClick() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
var input = inputs[i];
//window.event.srcElement,取得引发事件的控件
if (input == window.event.srcElement) {
input.value = "呜呜";
}
else {
input.value = "哈哈";
}
}
}
</script>
</head>
<body onload="initEvent()">
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
你弃之如履的可能就是别人梦寐以求的
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
