<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>獲取鼠標座標</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload=function()
{
document.onclick = function(ev)
{
var oEvent = ev || event;//左邊火狐 右邊IE
alert(oEvent.clientX+','+oEvent.clientY);
}
}
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="utf-8">
<style type="text/css">
div{padding:50px;}
</style>
</head>
<body>
<div style="background:#CCC;" onclick="alert(this.style.background);">
<div style="background:yellow;" onclick="alert(this.style.background);">
<div style="background:red;" onclick="alert(this.style.background);"></div>
<!-- 會傳遞給父級，一直往上延續 -->
</div>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>阻止事件冒泡</title>
<meta charset="utf-8">
<style type="text/css">
div{width:300px;height:100px;background:red;display:none;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
var oDiv = document.getElementsByTagName('div')[0];
oBtn.onclick = function(ev)
{
oDiv.style.display = 'block';
var oEvent = ev || event;
oEvent.cancelBubble = true;//阻止往上傳
}
document.onclick = function()
{
oDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<input type="button" value="顯示" />
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>跟隨鼠標移動(有缺陷)</title>
<meta charset="utf-8">
<style ty·pe="text/css">
body{height:2000px;}
div{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript">
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var oDiv = document.getElementsByTagName('div')[0];
oDiv.style.left = oEvent.clientX + 'px';
oDiv.style.top = oEvent.clientY + 'px';
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>跟隨鼠標移動(解決問題)</title>
<meta charset="utf-8">
<style type="text/css">
body{height:2000px;}
div{width:100px;height:100px;background:red;position:absolute;}
</style>
<script type="text/javascript">
function getPos(ev)
{
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var oDiv = document.getElementsByTagName('div')[0];
oDiv.style.left = getPos(oEvent).x + 'px';
oDiv.style.top = getPos(oEvent).y + 'px';
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>類似鼠標畫筆</title>
<meta charset="utf-8">
<style type="text/css">
body{height:2000px;}
div{width:15px;height:15px;background:black;position:absolute;}
</style>
<script type="text/javascript">
function getPos(ev)
{
var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
return {x:ev.clientX+scrollLeft, y:ev.clientY+scrollTop};
}
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var oDiv = document.getElementsByTagName('div');
oDiv[0].style.left = getPos(oEvent).x + 'px';
oDiv[0].style.top = getPos(oEvent).y + 'px';
for(var i=oDiv.length-1; i>0; i--)
{
oDiv[i].style.left = oDiv[i-1].offsetLeft + 'px';
oDiv[i].style.top = oDiv[i-1].offsetTop + 'px';
}
}
</script>
</head>
<body>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
<div></div><div></div><div></div><div></div><div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>鍵盤移動物體</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:86px;background:yellow;position:absolute;}
</style>
<script type="text/javascript">
document.onkeydown = function(ev)
{
var oDiv = document.getElementsByTagName('div')[0];
var oEvent = ev || event;
if( oEvent.keyCode == 37 )
oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
else if( oEvent.keyCode == 39 )
oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>Ctrl加回車留言</title>
<meta charset="utf-8">
<style type="text/css">
div{width:400px;height:300px;border:1px solid #DDD;}
</style>
<script type="text/javascript">
document.onkeydown = function(ev)
{
var oEvent = ev || event;
var oTxt = document.getElementsByTagName('input')[0];
var oDiv = document.getElementsByTagName('div')[0];
if( oEvent.keyCode == 13 && oEvent.ctrlKey)
oDiv.innerHTML += oTxt.value + '<br />';
}
</script>
</head>
<body>
<input type="text" />
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>阻止默認事件(自定義右鍵菜單)</title>
<meta charset="utf-8">
<style type="text/css">
div{width:280px;background:#CCC;position:absolute;display:none;}
</style>
<script type="text/javascript">
// 右鍵菜單事件
document.oncontextmenu = function(ev)
{
var oEvent = ev || event;
var oDiv = document.getElementsByTagName('div')[0];
oDiv.style.display = 'block';
oDiv.style.left = oEvent.clientX + 'px';
oDiv.style.top = oEvent.clientY + 'px';
return false;
}
document.onclick = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.style.display = 'none';
}
</script>
</head>
<body>
<div>
<p>菜單1</p>
<p>菜單2</p>
<p>菜單3</p>
<p>菜單4</p>
<p>菜單5</p>
</div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>阻止默認事件(只允許數字輸入)</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oTxt = document.getElementsByTagName('input')[0];
oTxt.onkeydown = function(ev)
{
var oEvent = ev || event;
if(!(48 <= oEvent.keyCode && oEvent.keyCode <= 57) && (oEvent.keyCode != 8) )
return false;
}
}
</script>
</head>
<body>
<input type="text" />
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>拖拽效果</title>
<meta charset="utf-8">
<style type="text/css">
div{width:100px;height:100px;background:green;position:absolute;}
</style>
<script type="text/javascript">
window.onload = function()
{
var oDiv = document.getElementsByTagName('div')[0];
oDiv.onmousedown = function(ev)
{
var oEvent = ev || event;
var disX = oEvent.clientX - oDiv.offsetLeft;
var disY = oEvent.clientY - oDiv.offsetTop;
document.onmousemove = function(ev)
{
var oEvent = ev || event;
var L = oEvent.clientX - disX;
var T = oEvent.clientY - disY;
if( L < 0 )
L = 0; //頁面可視區域的寬度
else if( L > document.documentElement.clientWidth - oDiv.offsetWidth )
L = document.documentElement.clientWidth - oDiv.offsetWidth;
if( T < 0 )
T = 0; //可視區域的高度
else if( T > document.documentElement.clientHeight - oDiv.offsetHeight )
T = document.documentElement.clientHeight - oDiv.offsetHeight;
oDiv.style.left = L + 'px';
oDiv.style.top = T + 'px';
}
document.onmouseup = function()
{
document.onmousemove=null;
document.onmouseup=null;
}
}
}
</script>
</head>
<body>
<div></div>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>AJAX</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
oBtn.onclick = function()
{
//1. 創建 Ajax 對象
if(window.XMLHttpRequest)
var oAjax = new XMLHttpRequest();
else
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//2.連接到 服務器 open(方法，文件名，異步傳輸)
oAjax.open('GET','read.txt?t='+ new Date().getTime(),true);//阻止緩存
//3. 發送請求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function()
{
// oAjax.readyState 瀏覽器 和 服務器 進行到哪一步了
if( oAjax.readyState == 4) //讀取完成
{
if(oAjax.status == 200) //成功
alert('成功:' + oAjax.responseText);
else
alert('失敗:' + oAjax.status);
}
}
}
}
</script>
</head>
<body>
<input type="button" value="讀取" />
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>AJAX 封裝 以及 eval的使用</title>
<meta charset="utf-8">
<script type="text/javascript">
function ajax(url, fnSucc, fnFaild)
{
//1. 創建 Ajax 對象
if(window.XMLHttpRequest)
var oAjax = new XMLHttpRequest();
else
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
//2.連接到 服務器 open(方法，文件名，異步傳輸)
oAjax.open('GET',url,true);//阻止緩存
//3. 發送請求
oAjax.send();
//4.接收返回
oAjax.onreadystatechange = function()
{
// oAjax.readyState 瀏覽器 和 服務器 進行到哪一步了
if( oAjax.readyState == 4) //讀取完成
{
if(oAjax.status == 200) //成功 oAjax.status == 404
fnSucc(oAjax.responseText);
else
{
if( fnFaild )
fnFaild();
}
}
}
}
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
oBtn.onclick = function()
{
ajax('read.txt',function(str){alert(str);})
}
}
/*
eval的用法，將字符串轉換成數值型
data.txt 的內容爲：
[
{user: 'blue', pass: '123456'},
{user: '張三', pass: '654321'},
{user: '李四', pass: '789456'},
{user: '王五', pass: '7777'}
]
oBtn.onclick=function ()
{
ajax('data.txt?t='+new Date().getTime(), function (str){
var arr=eval(str);
for(var i=0;i<arr.length;i++)
{
var oLi=document.createElement('li');
oLi.innerHTML='用戶名：<strong>'+arr[i].user+'</strong>密碼：<span>'+arr[i].pass+'</span>';
oUl.appendChild(oLi);
}
}, function (){
alert('失敗');
});
};
*/
</script>
</head>
<body>
<input type="button" value="讀取" />
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>事件綁定</title>
<meta charset="utf-8" >
<script type="text/javascript">
window.onload = function()
{
var oBtn = document.getElementsByTagName('input')[0];
if( oBtn.attachEvent )//低版本IE
oBtn.attachEvent('onclick',function(){alert('a');});
else
oBtn.addEventListener('click',function(){alert('a');},false);
}
</script>
</head>
<body>
<input type="button" value="按鈕" />
</body>
</html>
<script type="text/javascript">
function myAddEvent(obj, ev, fn)//函數封裝
{
if( obj.attachEvent )
obj.attachEvent('on'+ev,fn);
else
obj.addEventListener(ev, fn, false);
}
</script>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>面向對象(第一個案例)</title>
<meta charset="utf-8" >
<script type="text/javascript">
var obj = new Object();
obj.name = '大帥哥';
obj.qq = '674059309';
obj.showName = function ()
{
alert('我的名字叫：'+this.name);
}
obj.showQQ = function ()
{
alert('我的QQ：'+this.qq);
}
obj.showName();
obj.showQQ();
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>面向對象（工廠方式）</title>
<meta charset="utf-8" >
<script type="text/javascript">
function createPerson(name,qq)//構造函數
{
var obj = new Object();
obj.name = name;
obj.qq = qq;
obj.showName = function ()
{
alert('我的名字叫：'+this.name);
}
obj.showQQ = function ()
{
alert('我的QQ：'+this.qq);
}
return obj;
}
var obj = createPerson('小小俊','674059309');
var obj_copy = createPerson('小俊','674059309');
obj.showName();
obj_copy.showName();
alert( obj.showName == obj_copy.showName );
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>面向對象（工廠方式,改進）</title>
<meta charset="utf-8" >
<script type="text/javascript">
function createPerson(name,qq)//構造函數
{
this.name = name;
this.qq = qq;
//採用this的寫法，這樣就可以使用new
//公共函數採用原型添加，這樣可以節省空間。
}
createPerson.prototype.showName = function ()
{
alert('我的名字叫：'+this.name);;
}
createPerson.prototype.showQQ = function ()
{
alert('我的QQ：'+this.qq);;
}
var obj = new createPerson('小小俊','674059309');
var obj_copy = new createPerson('小俊','674059309');
obj.showName();
obj_copy.showName();
alert( obj.showName == obj_copy.showName );
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->
<!DOCTYPE html>
<html>
<head>
<title>面向對象（原型添加函數）</title>
<meta charset="utf-8" >
<script type="text/javascript">
var arr = new Array(12,55,34,78,676);
var arr_copy = new Array(12,55);
arr.sum = function()//只有這個數組纔有這個方法
{
var result = 0;
for(var i=0; i < this.length; i++)
result += this[i];
return result;
}
Array.prototype.sum = function ()//原型添加函數
{
var result = 0;
for(var i=0; i < this.length; i++)
result += this[i];
return result;
}
alert(arr.sum());
alert(arr_copy.sum());
</script>
</head>
<body>
</body>
</html>
<!-- *************************************************************************************-->JS初級學習筆記（2）
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
網頁設計大賽大神養成之路第一天
在慕課網進行了第一次的學習，因爲我的專業有開設相似課程，再加上老師講的通俗易懂，所以聽起來不算費力。這讓我有了小小的信心。 在已經被教會了如何編寫代碼來設計網絡頁面後，再來慕課網詳細學習前端開發的
喜歡的一些網站彙總
http://www.redwall.com.tw/index.php/web/products/ http://www.heimavista.com/files/11-1303-4379.php