JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例
JS控制按鈕禁止被選擇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){ document.getElementById("s").onmouseover=function(evet){ var _x=this.offsetLeft; var _y=this.offsetTop; var x=Math.random()*180+Math.random()*50; var y=Math.random()*120+Math.random()*50; this.style.position="absolute"; this.style.top=y+'px'; this.style.left=x+'px'; return false; } document.getElementById("s").onclick=function(){ alert("就知道你心里想的和表面做的是相反的!"); document.getElementById("main").style.display="none"; document.getElementById("img").style.display="block"; } document.getElementById("w").onclick=function(){ alert("寶貝:謝謝你的愛(ài)!我愛(ài)你╮(╯▽╰)╭"); document.getElementById("main").style.display="none"; document.getElementById("img").style.display="block"; } } </script> <style> *{ margin:0; padding:0; } html{ height: 100%; background:url(http://img17.3lian.com/d/file/201702/13/9524e4e08e99e0423f9e9f299e314c72.gif) no-repeat; background-size: cover; } span{ width: 100%; height: 100px; display: block; text-align: center; line-height: 100px; color: #fff; } section{ } section button:nth-child(1){ position: absolute; background: #DE7C2C; left: 100px; border: 0; z-index: 1; } section button:nth-child(2){ position: absolute; z-index: 0; border: 0; background: #DE7C2C; left: 150px; } div{ width:300px; height:200px; background:rgba(34,93,146,.7); border:1px solid #eee; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } </style> </head> <body> <div id="main"> <span>親愛(ài)的我愛(ài)你,你愛(ài)我嗎?</span> <section> <button id="s" style="padding:1px 10px;">不</button> <button id="w" style="padding:1px 10px;">愛(ài)</button> </section> </div> <div id="img" style=" display:none; width:100%; height:100%; background:url(http://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2017-8/20178172014060928.gif) no-repeat; background-size:cover;"></div> </body> </html>
以上這篇JS控制鼠標(biāo)拒絕點(diǎn)擊某一按鈕的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證(2)
這篇文章主要為大家詳細(xì)介紹了JavaScript+html實(shí)現(xiàn)前端頁(yè)面滑動(dòng)驗(yàn)證的第二種方法,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-06-06該如何加載google-analytics(或其他第三方)的JS
很多網(wǎng)站為了獲取用戶訪問(wèn)網(wǎng)站的統(tǒng)計(jì)信息,使用了google-analytics或其他分析網(wǎng)站(下面的討論中只提google-analytics,簡(jiǎn)稱ga)。2010-05-05JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法
這篇文章介紹了JS隨機(jī)生成不重復(fù)數(shù)據(jù)的實(shí)例方法,有需要的朋友可以參考一下2013-07-07ECMAScript6變量的解構(gòu)賦值實(shí)例詳解
ES6允許按照一定模式,從數(shù)組和對(duì)象中提取值,對(duì)變量進(jìn)行賦值,這被稱為解構(gòu)(Destructuring),下文中給大家提供了嵌套數(shù)組的解構(gòu)例子,大家一起看看吧2017-09-09JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用示例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)圖片元素旋轉(zhuǎn)的相關(guān)功能代碼的封裝與使用操作技巧,需要的朋友可以參考下2018-07-07JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊按鈕控制Div變寬、增高及調(diào)整背景色的方法,涉及javascript動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,適用于動(dòng)態(tài)更換頁(yè)面皮膚的功能,需要的朋友可以參考下2015-08-08