2. 程式人生 > >2.js按鈕特效大全

2.js按鈕特效大全

阿新 • • 發佈：2019-02-14
//2.1頁面重新整理按鈕 //重點:重新整理頁面的方法 reload 如果要使用meta元素 使用refresh屬性 function renovates(){ document.location.reload(); } //2.2按Enter鍵呼叫登入按鈕 function keyLogin(){ if(event.keyCode==13){//按鍵enter的鍵值為13 document.getElementById("input1").click();//呼叫登入按鈕 } } //2.3動態建立按鈕 提高頁面的訪問速度
//重點:createElement(),appendChild() var i=0; function addInput(){ var o=document.createElement("input");//建立DOM o.type="button";//設定型別 o.value="按鈕"+i++;//設定屬性 o.attachEvent("onclick",addInput);//新增事件 document.body.appendChild(o);//新增到主窗體 o=null;//釋放物件 } //2.9獲取按鈕的絕對位置
//使用this作為當前引數傳遞,讀取offsetTop/Left屬性 function getAddress(e){ var t=e.offsetTop; var l=e.offsetLeft while(e=e.offsetParent){ t+=e.offsetTop;//取x座標 l+=e.offsetLeft;//取y座標 } alert("x座標"+x+"y座標"+l) } //2.10刪除時確認提示 function del(){
if(confirm('確認要刪除嗎')){ alert('已經刪除'); }else{ alert('已經取消刪除操作'); } } //2.11防止按鈕連擊 重複提交資料 //重點:如何判斷頁面的狀態readyState屬性 function doubleCheck(){ if(window.document.readyState!=null&&window.document.readyState!='complete'){//判斷頁面是否執行完 alert("正在處理,請稍等!"); return false; }else{ return true; } } //2.12圖片式的按鈕 //重點:selectedIndex屬性,獲取使用者的選擇,然後指定導航地址location function goTo(){ var myindex=document.myform.mailBox.selectedIndex;//獲取下拉選中的索引 location=document.myform.mailBox.options[myindex].value;//獲取下拉框的選擇值 } //2.14選擇不同的列表項時候顯示不同的按鈕 //重點:innerHTML function butSelect(){ var selVal=document.getElementById("sel").value; if(selVal=="1"){ document.getElementById("td").innerHTML="<input type='button' value='按鈕1' onclick='btnc1();' />"; }else if(selVal=="2"){ document.getElementById("td").innerHTML="<input type='button' value='按鈕2' onclick='btnc2();' />"; }else{ document.getElementById('td').innerHTML=''; } } function btnc1(){ alert("單擊了按鈕1"); } function btnc2(){ alert('單擊了按鈕2'); } //2.15使用按鈕控制文字漸變 //重點:使用eval將普通字串連成函式名 var x=9; var change='on'; if(navigator.appName=='Netscape'){//瀏覽器是NetScape visShow="'show'";//顯示 visHide="'hide'";//隱藏 docStyle="document."; styleDoc=""; }else{//瀏覽器是IE visHide="'hidden'";//顯示 visShow="'visible'";//隱藏 docStyle=""; styleDoc=".style";//設定樣式 } function hide1(){ eval(docStyle+'object1'+styleDoc+'.visibility='+visHide); } function hide2(){ eval(docStyle+'object2'+styleDoc+'.visibility='+visHide); } function hide3(){ eval(docStyle+'object3'+styleDoc+'.visibility='+visHide); } function show1(){ eval(docStyle+'object1'+styleDoc+'.visibility='+visShow); } function show2(){ eval(docStyle+'object2'+styleDoc+'.visibility='+visShow); } function show3(){ eval(docStyle+'object3'+styleDoc+'.visibility='+visShow); } function change1(){ x+=1; eval("show"+x+"()"); if(x<2){ setTimeout("change1()",75); }else{ change2(); } } function change2(){ x-=1; eval("show"+x+"()"); if(x>1){ setTimeout("change2()",75); }else{ change1(); } } function changeOn(){//開始變化的控制 x=2; change="on"; change1(); } function changeOff(){//結束變化的控制 change="off"; } //2.16大翻頁效果的公告欄 var Scroll=new Function(){ this.delay=2000;//延遲時間 this.height=20;//行高 this.step=4;//步長 this.curHeight=0; this.stimer=nll; this.timer=null; this.start=function(){//開始翻頁 this.move(); } this.move=function(){ var self=this; if(this.curHeight==this.height){//顯示完一行 this.timer=setTimeout(function(){self.move()},this.delay);//使用定時器 this.height=0; if(this.element.scrollTop>=this.element.scrollHeight-this.height){ this.element.scrollTop=0;//瀏覽器資訊完成 } return true; } this.element.scrollTop+=this.step; this.curHeight=setTimeout(function(){self.move()},30); } this.stop=function(){//清除定時器 clearTimeout(this.timer); } } //2.17動態設定控制元件的事件 //為控制元件繫結事件 function addClick(obj){ obj.onclick=function(){ alert('動態新增事件成功'); } }

相關推薦

2.js按鈕特效大全

//2.1頁面重新整理按鈕 //重點:重新整理頁面的方法 reload 如果要使用meta元素 使用refresh屬性 function renovates(){ document.location.reload(); } //2.2按Enter鍵呼

基於python-flask搭建後臺，HTML+CSS+JS（jQuery）寫前端的web全棧開發（三）——3.2 普通按鈕點選事件與後臺互動

    在上一篇文章，我們講解了基於外掛實現的上傳圖片到後臺處理，並將處理後得到的結果圖與原圖在前端顯示。    主要idea是將圖片先在後臺進行快取，我們傳回兩張圖片的途徑，在file的done函式中對<img/>標籤的src屬性進行更新。    但是這樣子存在

消除2個按鈕之間1px細節引起的沖突

mage 沖突 text true margin 間距 ima html none 1、代碼 <!doctype html> <html lang="en"> <head> <meta charset="

avro 1.8.2 (js)

score record name str mage readme.md 目錄 提示 清華大學 5月15日發布的avro 1.8.2 已經包含了js版代碼。 清華大學鏡像地址： https://mirrors.tuna.tsinghua.edu.cn/apache/avro

js常用特效-幻燈片

out cti 自動播放 cto -h src con interval clas 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta char

js常用特效——選項卡效果

weight ont pad absolut cursor asc spa cto clear 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset

Js操作Select大全(取值、設置選中等等)

自己 class 簡潔 chan break == 中括號 edit end jquery操作select(取值，設置選中） 每一次操作select的時候，總是要出來翻一下資料，不如自己總結一下，以後就翻這裏了。 比如<select class="selector"&

android 按鈕特效 波紋

gif bsp col 波紋 文件 alt com mas drawable 在drawable下 新建一個xml文件，比如ripple.xml 內容如下： 　==================== <?xml version="1.0" encoding="ut

JS函數大全 莫名其妙找到的

用例 禁止 calculate 數學 lean wid 計算機 reg 數組元素 1 .document.write(""); 輸出語句 2 .JS中的註釋為// 3 .傳統的HTML文檔順序是:document->html->(head,body) 4 .一

ASP.NET MVC 搜索+保存搜索結果.2個按鈕共用一個表單

req request exp select ucc 結果 total cli 調用 想要實現的效果,1.搜索功能 2.搜索結果保存到text功能 前臺代碼 一個表單2個按鈕,通過JS代碼來修改form的action,來實現調用不同的後臺代碼 &l

表單驗證2-JS正則

logs 驗證 -c eight 影響 技術 fff d+ wid 1. JS正則： 以/開頭，以/結尾。 　　test作用：到裏面去找，只要裏面有，就返回true；否則就返回false。 例如：rep=/\d+/; 檢驗裏面是否有數字。 2.rep=/^ $

JS小特效

ima color absolut fun cli pen left animate ray 1 <script type="text/javascript"> 2 /* 鼠標點擊特效 */ 3 var a_idx = 0; 4 jQuery(docu

鍵盤按鈕keyCode大全

tab thead tle backspace col 按鈕 head span .html 字母和數字鍵的鍵碼值(keyCode) 按鍵鍵碼按鍵鍵碼按鍵鍵碼按鍵鍵碼 A 65 J 74 S 83 1 49 B 66 K

2----JS的註釋

壞人 nbsp span 瀏覽器支持 導致 老版本 -- -s ont JS註釋 //是單行註釋 /* */ 是多行註釋 <!-- --> 是html中的單行或多行的註釋方式 在JS中HTML的<!-- 會被解釋成// 的單行註釋

2 js的20/80關鍵知識

nbsp highlight style sele undefine bubuko gpo ima .com 1. 2 var a = 1; undefined a 1 alert(a); undefined 　　 var

2.js的數據類型

註意 類型 整數 直接 書寫 單引號 {} point contents 2.js的數據類型 1.基礎數據類型 說明：js為弱類型語言，聲明變量的時候同意采用var類型即可，var可裝載整數、浮點數、單雙引號的字符串均可。 例子； var x = 1; //整數 x = 0

js 按鈕連擊 減少觸發事件次數

pan body div NPU AS btn class clas 觸發 <body> <input type="button" onClick="testbtn()" value="測試按鈕"> <script> var b1

js放大鏡特效

如何 原理 指定 開發 事件捕獲 兼容 clientx 寬高 top 原理分析：當鼠標在小圖片上移動時，通過捕捉鼠標在小圖片上的位置，定位大圖片的相應位置。（同時，當鼠標在小圖片上移動時，右側大圖片往相反的方向移動。） 放大鏡特效設計： ①頁面元素：小圖片，大圖片以及盛放圖

2-JS運算符

字符串拼接 als 類型 quotient 字符 round rod ack 運算 1、運算符 1）算術運算符 1 <button id="btn" onclick="suanShu()">運算</button> 2 <script>

微信小程序學習Course 4-2 JS數組對象學習

刪除 元素 空數組 slice gre tin 2.4 course js數組 微信小程序學習Course 3-2 JS數組對象學習 本節主要介紹JS中的數組。 3-2.1 數組的聲明 數組聲明的方式多種，如下例。一般我們可以先創建一個空數組，然後再填充。 var