javascript--經典例項錦集
阿新 • • 發佈：2019-02-14
一，javascript動態顯示：
如顯示效果上圖所示：
如圖顯示滑鼠放在百度谷歌等字樣上市動態顯示其內容明細：程式碼如下：<head><title></title><script type="text/javascript">function initEvent() {
var links = document.getElementsByTagName("a");//獲取標籤為a的內容for (var i =0; i < links.length; i++) { //逐行遍歷var link = links[i];
link.onmouseover
}
function onmouse() {
var div = document.createElement("div"); //動態建立div標籤div.style.position ="absolute"; //設定標籤屬性為手型div.style.top = window.event.clientY; //設定y座標div.style.left = window.event.clientX; //設定x座標div.innerHTML ="saefagfawefaw<font color='red'>後衛噢服務和偶if</font>
</script></head><body onload="initEvent ()"><a href="http://www.baidu.com" title="aesfwaef;ah">百度</a><br /><br /> <a href="http://www.baidu.com" title="afwaajmalkm">新浪</a><br /><br />
二：點選右鍵顯示“你好”，點選左鍵顯示禁止複製
<head><title></title><script type="text/javascript">function MyClick() {if (event.button ==1) {
alert("你好");
}
elseif (event.button ==2) {
alert("禁止複製");
}
else {
setTimeout("close();", 2000);
}
}
function close() {
window.opener =null;
window.close();
}
</script></head><body onmouseup="MyClick()"><br /></body>
三：動態走馬燈顯示
顯示效果如圖所示：
當點向左滾動式title字樣向左，點選享有滾動按鈕時title字樣想又滾動
<head><title>新學期開學課！</title><script type="text/javascript">var dir ="left"; //預設初始為向左function huigun() {if (dir =="left") { //當dir為left是向左滾動var title = document.title; //取到title的值var first = title.charAt(0); //取出第一個字var last = title.substring(1, title.length); //取出第二到最後的所有字document.title = last + first; //將第一個字加到最後}
elseif (dir =="right") { //如果向右滾，則同理var title = document.title;
var first = title.substring(0, title.length -1)
var last = title.charAt(title.length -1);
document.title = last + first;
}
else {
alert("方向錯了");
}
}
function setdir(d) { //當滑鼠點選按鈕式同時給dir複製dir = d;
}
setInterval("huigun()",500); //每隔0.5秒重新整理一次</script></head><body><input type="button" value="向左滾動" onclick="setdir('left');"/><input type="button" value="向右滾動" onclick="setdir('right');"/></body>
四：禁止複製小結
顯示效果如圖所示，將第一個手機號碼複製貼上到重複手機號碼框時禁止複製
手機號碼<input type="text"/>重複手機號碼<input type="text" onpaste="alert('為保證您的資訊保安，請勿貼上！');return false"/>
五：javascript遍歷輸出
示例程式碼：
<head><title></title><script type="text/javascript">function as() {var radios = document.getElementsByName("gander"); //遍歷name為gander的值然後輸出for (var radio =0; radio < radios.length; radio++) {
var i = radios[radio];
alert(i.value);
}
}
</script></head><body><input type="radio" name="gander" value="男"/> 男<input type="radio" name="gander" value="保密"/> 保密<input type="radio" name="gander" value="女"/> 女<input type="button" value="選擇" onclick="as()"/></body>
六：哈哈嗚嗚交叉變化
顯示效果如圖：
點選某個按鈕時當前點選的按鈕顯示嗚嗚，其他按鈕顯示哈哈
示例程式碼：
<head><title></title><script type="text/javascript">function btn() {var inputs = document.getElementsByTagName("input"); //取出名字為input的值for (var i =0; i < inputs.length; i++) { //遍歷 var input = inputs[i];
input.onclick = btnclick; //當某個按鈕被點選時呼叫btnclick函式}
}
function btnclick() {
var inputs = document.getElementsByTagName("input"); //取出input的值for (var i =0; i < inputs.length; i++) {
var input = inputs[i]; //遍歷if (input == window.event.srcElement) { //如果被點選input.value ="嗚嗚"; //將值改為嗚嗚}
else {
input.value ="哈哈"; //每點選的為哈哈}
}
}
</script></head><body onload="btn()"><input type="button" value="哈哈"/><input type="button" value="哈哈"/><input type="button" value="哈哈"/><input type="button" value="哈哈"/><input type="button" value="哈哈"/><input type="button" value="哈哈"/></body>
七：協議倒計時（開始開啟頁面時倒計時10秒閱讀時間，當十秒到後註冊按鈕可用）
示例效果如圖：
示例程式碼：
<head><title></title><script type="text/javascript">var leftSecond =10; //設定初始值var inervalId;function CountDown() {
var reg = document.getElementById("btnReg"); //取出id為btnreg的值if (reg) {
if (leftSecond <=0) { //如果值小於等於0則按鈕可用reg.disabled ="";
// clearInterval(inervalId);}
else { //如果值大於0reg.value ="請仔細閱讀，還剩"+ leftSecond +"秒"//將按鈕的值改為…+設定值leftSecond--; //設定值減1}
}
}
inervalId = setInterval("CountDown()",1000); //每隔1秒重新整理</script></head><body><textarea></textarea><input id="btnReg" type="button" value ="註冊" disabled="disabled"/> //按鈕初始不可用</body>
八：圖片隨滑鼠移動
當滑鼠移動到哪裡，圖片也移動到哪裡
當滑鼠位置發生變化時如圖所示圖片跟隨滑鼠一起變化位置，並且顯示文字:哈哈！我會飛！
效果顯示如圖：
示例程式碼：