DOM----学习笔记
Dom
事件:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
function bodymousedown() {
alert('文本');
}
</script>
</head>
<body onmousedown="bodymousedown()" >
</body>
</html>
动态添加事件:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
function f1() {
alert('动态1');
}
function f2() {
alert('动态1');
}
</script>
</head>
<body>
<input id="Button1" type="button" onclick=f1 value="button" />
<input id="Button2" type="button" onclick=f2 value="button" />
</body>
</html>//动态点击按钮显示变化文字
confirm:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
function confirmdemo()
{
if(confirm(是否继续?))
{
alert("确定");
}
else
{
alert("取消");
}
}
</script>
</head>
<body onmousedown="bodymousedown()" >
<p>
<input id="Button1" type="button" onclick="confirmdemo()"value="button" />
<input id="Button2" type="navigate测试" onclick="navigate("www.baidu.com")" value="button" />//点击按钮通过navigate()页面导向百度
</p>
</body>
</html>
间隔执行:
setlnterval("alert(‘Hello’)",5000);//每隔5秒执行一个弹出Hello
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
function setlntervaldemo()
{
setlnterval("alert(‘Hello’)",5000);
}
</script>
</head>
<body onmousedown="bodymousedown()" >
<p>
<input id="Button1" type="button" onclick="setlnterval()" value="button" />
<input id="Button2" type="navigate测试" onclick="navigate("www.baidu.com")" value="button" />//点击按钮通过navigate()页面导向百度
</p>
</body>
</html>
clearlnterval(编号)//取消操作
setTimeout()和clearsetTimeout()原理一样
网页标题走马灯效果:
<head>
<title>欢迎来到本网站</title>
<script type="text/javascript" >
function scroll()
{
var title=document.title;
var firstch=title.charAt(0);
var leftstr=title.substring(1,title.length);
document.title=leftstr+firstch;
}
setInterval("scroll()",500);
</script>
</head>//实现页面标题的间隔执行,走马灯效果
事件:
onload="";
onunload="";
onbeforeunload="window.event.returnValue='文章会被丢失'";//博客常用
属性:
window.event.事件
returnValue
禁止跳转:
onclick("数据有问题!");window.event.returnValue=false;
复制地址分享好友:
<input type="button" value="分享给好友" onclick="clipboardData.setData(‘Text','我发现的网址,去看看!’+location.herf;alert('已经降低至粘贴到剪贴板中,通过qq或msn发送给好友吧'));">
禁止复制效果:
<body oncopy="alert(‘禁止复制!’);return false;">
添加适当主题内容,内容不能被复制
</body>
onpaste="";//效果一样,禁止粘贴
复制文档最后显示来源:
function modifyClipboard()
{
clipboardData.setData('Text',clipboardData.getData('Text')+'本文来源于CSDN,转载请注明来源'+location.herf);
}
oncopy="setTimeout('modifyClipboard()',100)"//用户复制发生0.1秒后再去改粘贴板中的内容要注意
document对象:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
document.write("<a herf=‘www.baidu.com’>链接中文名字</a>");
</script>
</head>
<body onmousedown="bodymousedown()" >
页面内容
</body>
</html>
广告联盟,新闻外链,一样的原理
document.getElementById("控件名");//执行自动查找控件
document.getElementByName("名字/对象数组");
document.getElementsByTagName("标签名");
注册选框倒计时:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" >
var leftSeconds=10;
var intervalID;
function()
{
var btnReg=document.getElementById("btnReg");
if(btnReg)
{
if(leftSeconds<=0)
{
btnReg.value="同意";
btnReg.disable="";//btnReg.disabled=false;
clearInterval(intervalID);
}
else
{
btnReg.value="请仔细阅读协议(还剩"+leftSeconds+"秒)";
leftSeconds--;
}
}
}
</script>
</head>
<body>
<input id="btnReg" type="button" value="同意" disabled="disabled"/>
</body>
</html>