关于JavaScript的一些用法

时间:2022-03-15 11:40:35

关于JavaScript的死链设置问题


<!
DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript">


</script>
</head>
<body>
<input type="button" id="btn" value="单击" onclick="alert('添加')" />

<br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#" onclick="alert('点中的是#')">方法1</a> 弹窗并返回页面最上边
<br />
<a href="JavaScript:Void(0)" onclick="alert('点中的是Void')">方法2</a> 弹窗但停留在当前页面



<br />
<a href="JavaScript:alert('点中的是Href')">方法3</a> 弹窗但停留在当前页面


</body>
</html>

 

关于JavaScript 的setInterval定时器的测试

<body>

<input type="button" name="name" id="btn" />

</body>
</html>
<script type="text/javascript">
var setId= setInterval(function () {
alert(
'');
},
2000);//声明一个计时器,2000毫秒执行一次

window.onload
= function () {
document.getElementById(
'btn').onclick = function () {
clearInterval(setId);
};
//注销指定计时器
}

 setInterVal 定时器的小Demo--跑马灯

 <title>这是什么事呢</title>
</head>
<body><input type="button" name="name" id="left" />
<input type="button" name="name" id="right" /></body>
</html>
<script type="text/javascript">

function Demo(num) {
if (num == 1) {
setInterval(
function () {
var text = document.title;
document.title
= text.charAt(text.length-1) + text.substr(0, text.length - 1);
},
1000);
}
else {
setInterval(
function () {
var text = document.title;
document.title
= text.substr(1) + text.charAt(0);
},
1000);
}

}


document.getElementsByTagName(right‘
).onclick = function () { //
Demo(
1);
};
document.getElementById(
'left').onclick = function () {
Demo(
0);
};

 浏览器的   粘贴,复制事件

<body>
现在测试一下代码!看看会出现什么问题
<input type="text" id="txt"/>
</body>
</html>
<script type="text/javascript">

onload
= function () {
document.body.onpaste
= function () {
return false; //禁止在Body中粘贴

}
document.body.oncopy
= function () {
return false; //禁止复制Boby中的文字
}
  ///方法3 在复制的文字结尾添加  标签
        document.body.oncopy = function () {
            setTimeout(function () {
                clipboardData.setData('text', clipboardData.getData('text') + '自定义文字');   //text 为 获取粘贴板中那种类型数据
            }, 100);   //100为时间间隔让复制操作与添加字符串操作互不冲突
        }
    }
}

 关于事件冒泡

事件冒泡:如果元素A嵌套在元素B中,那么A被点击不仅A的onclick事件会被触发,B的onclick也会被触发。触发的顺序是“由内而外”

 <script type="text/javascript">
onload
= function () {


document.getElementById(
'dv').onclick = function () {
// alert(this.id);
alert(window.event.srcElement.id);//事件源
};
document.getElementById(
'p1').onclick = function () {
alert(
this.id);
};
function stop(e) {

alert(
this.id);
function stopBubble(e){
if(e||e.stopPropagation){
e.stopPropagation();
//火狐中取消事件冒泡
}
else{
window.event.cancelBubble
=true; //IE中取消事件冒泡
}
}



};
};

</script>
</head>
<body>
<div id="dv1" style=" width:300px; height:200px; onclick='stop(event)'>

<div id="
dv" style=" width:300px; height:200px; background-color:Yellow; cursor:pointer;">
<p id="p1" style=" width:150px; height:100px; background-color:Green;cursor:pointer;">

<span id="sp" style=" cursor:pointer;">这是span</span>

</p>
</div>
</body>