當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

javaScript常用案例

發布時間：2023/12/18 编程问答 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 javaScript常用案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

javaScript常用案例

- 案例1：點擊按鈕彈出彈框
- 案例2：點擊按鈕控制臺輸出內容
- 案例3：點擊按鈕顯示當前時間
- 案例4：點擊按鈕切換圖片
- 案例5：分時間問候顯示不同圖片
- 案例6：隱藏密碼功能
- 案例7：關閉淘寶二維碼
- 案例8：循環精靈圖
- 案例9：顯示隱藏文本框
- 案例10：仿新浪，注冊登錄界面
- 案例11：排他思想：點擊按鈕切換背景顏色：排除其他元素，僅給一個元素添加樣式
- 案例12：百度換膚效果：點擊圖片將背景切換與圖片相同
- 案例13：表格隔行變色效果
- 案例14：全選，反選
- 案例15：tab欄切換
- 案例16：新浪下拉菜單
- 案例17：留言添加操作
- 案例18：留言刪除操作
- 案例19：動態生成表格
- 案例20：模擬京東按鍵輸入內容
- 案例21：模擬京東快遞單號查詢案例
- 案例22：倒計時效果
- 案例23：發送短信案例
- 案例24：5秒之后自動跳轉頁面
- 案例25：發送短信案例
- 案例26：拖動的模態框
- 案例27：仿京東放大鏡效果
- 案例28：仿淘寶側邊欄

案例1：點擊按鈕彈出彈框

<body><button id="btn">唐伯虎</button><script>// 點擊一個按鈕，彈出對話框//(1) 事件源事件被觸發的對象誰按鈕var btn = document.getElementById('btn');//(2) 事件類型如何觸發什么事件比如鼠標點擊(onclick) 還是鼠標經過還是鍵盤按下//(3) 事件處理程序通過一個函數賦值的方式完成btn.onclick = function() {alert('點秋香');}</script> </body>

案例2：點擊按鈕控制臺輸出內容

<body><div>點我呀</div><script>// 點擊div 控制臺輸出我被選中了// 獲取事件源var div = document.querySelector('div');// 注冊事件，添加事件處理程序div.onclick = function() {console.log('小樣兒，還真敢點');}</script> </body>

案例3：點擊按鈕顯示當前時間

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div,p {width: 300px;height: 30px;line-height: 30px;color: #fff;background-color: pink;}</style> </head> <body><button>顯示當前系統時間</button><div>某個時間</div><p>1123</p><script>// 當我們點擊了按鈕， div里面的文字會發生變化// 1. 獲取元素 var btn = document.querySelector('button');var div = document.querySelector('div');// 2.注冊事件btn.onclick = function() {// div.innerText = '2019-6-6';div.innerHTML = getDate();}function getDate() {var date = new Date();// 我們寫一個 2019年 5月 1日星期三var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];var day = date.getDay();return '今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day];}// 我們元素可以不用添加事件var p = document.querySelector('p');p.innerHTML = getDate();</script> </body>

案例4：點擊按鈕切換圖片

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style> </head><body><button id="ldh">劉德華</button><button id="zxy">張學友</button> <br><img src="images/ldh.jpg" alt="" title="劉德華"><script>// 修改元素屬性 src// 1. 獲取元素var ldh = document.getElementById('ldh');var zxy = document.getElementById('zxy');var img = document.querySelector('img');// 2. 注冊事件處理程序zxy.onclick = function() {img.src = 'images/zxy.jpg';img.title = '張學友';}ldh.onclick = function() {img.src = 'images/ldh.jpg';img.title = '劉德華';}</script> </body>

案例5：分時間問候顯示不同圖片

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>img {width: 300px;}</style> </head><body><img src="images/s.gif" alt=""><div>上午好</div><script>// 根據系統不同時間來判斷，所以需要用到日期內置對象// 利用多分支語句來設置不同的圖片// 需要一個圖片，并且根據時間修改圖片，就需要用到操作元素src屬性// 需要一個div元素，顯示不同問候語，修改元素內容即可// 1.獲取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2. 得到當前的小時數var date = new Date();var h = date.getHours();// 3. 判斷小時數改變圖片和文字信息if (h < 12) {img.src = 'images/s.gif';div.innerHTML = '親，上午好，好好寫代碼';} else if (h < 18) {img.src = 'images/x.gif';div.innerHTML = '親，下午好，好好寫代碼';} else {img.src = 'images/w.gif';div.innerHTML = '親，晚上好，好好寫代碼';}</script> </body>

案例6：隱藏密碼功能

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/close.png" alt="" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 1. 獲取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// 2. 注冊事件處理程序var flag = 0;eye.onclick = function() {// 點擊一次之后， flag 一定要變化if (flag == 0) {pwd.type = 'text';eye.src = 'images/open.png';flag = 1; // 賦值操作} else {pwd.type = 'password';eye.src = 'images/close.png';flag = 0;}}</script> </body>

案例7：關閉淘寶二維碼

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;/* display: block; */}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;}</style> </head><body><div class="box">淘寶二維碼<img src="images/tao.png" alt=""><i class="close-btn">×</i></div><script>// 1. 獲取元素 var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');// 2.注冊事件程序處理btn.onclick = function() {box.style.display = 'none';}</script> </body>

案例8：循環精靈圖

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style-type: none;}.box {width: 250px;margin: 100px auto;}.box li {float: left;width: 24px;height: 24px;background-color: pink;margin: 15px;background: url(images/sprite.png) no-repeat;}</style> </head><body><div class="box"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div><script>// 1. 獲取元素所有的小li var lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {// 讓索引號乘以 44 就是每個li 的背景y坐標 index就是我們的y坐標var index = i * 44;lis[i].style.backgroundPosition = '0 -' + index + 'px';}</script> </body>

案例9：顯示隱藏文本框

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>input {color: #999;}</style> </head><body><input type="text" value="手機"><script>// 1.獲取元素var text = document.querySelector('input');// 2.注冊事件獲得焦點事件 onfocus text.onfocus = function() {// console.log('得到了焦點');if (this.value === '手機') {this.value = '';}// 獲得焦點需要把文本框里面的文字顏色變黑this.style.color = '#333';}// 3. 注冊事件失去焦點事件 onblurtext.onblur = function() {// console.log('失去了焦點');if (this.value === '') {this.value = '手機';}// 失去焦點需要把文本框里面的文字顏色變淺色this.style.color = '#999';}</script></body>

案例10：仿新浪，注冊登錄界面

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/mess.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/wrong.png);}.right {color: green;background-image: url(images/right.png);}</style> </head><body><div class="register"><input type="password" class="ipt"><p class="message">請輸入6~16位密碼</p></div><script>// 首先判斷的事件是表單失去焦點 onblur// 如果輸入正確則提示正確的信息顏色為綠色小圖標變化// 如果輸入不是6到16位，則提示錯誤信息顏色為紅色小圖標變化// 因為里面變化樣式較多，我們采取className修改樣式// 1.獲取元素// 獲取表單var ipt = document.querySelector('.ipt');// 獲取提示信息var message = document.querySelector('.message');//2. 注冊事件失去焦點ipt.onblur = function() {// 根據表單里面值的長度 ipt.value.lengthif (this.value.length < 6 || this.value.length > 16) {console.log('錯誤');message.className = 'message wrong';message.innerHTML = '您輸入的位數不對要求6~16位';} else {message.className = 'message right';message.innerHTML = '您輸入的正確';}}</script> </body>

案例11：排他思想：點擊按鈕切換背景顏色：排除其他元素，僅給一個元素添加樣式

首先將所有元素樣式清空，再設置單個元素

<body><button>按鈕1</button><button>按鈕2</button><button>按鈕3</button><button>按鈕4</button><button>按鈕5</button><script>// 1. 獲取所有按鈕元素var btns = document.getElementsByTagName('button');// btns得到的是偽數組里面的每一個元素 btns[i]for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// (1) 我們先把所有的按鈕背景顏色去掉干掉所有人for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = '';}// (2) 然后才讓當前的元素背景顏色為pink 留下我自己this.style.backgroundColor = 'pink';}}//2. 首先先排除其他人，然后才設置自己的樣式這種排除其他人的思想我們成為排他思想</script> </body>

案例12：百度換膚效果：點擊圖片將背景切換與圖片相同

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {background: url(images/1.jpg) no-repeat center top;}li {list-style: none;}.baidu {overflow: hidden;margin: 100px auto;background-color: #fff;width: 410px;padding-top: 3px;}.baidu li {float: left;margin: 0 1px;cursor: pointer;}.baidu img {width: 100px;}</style> </head><body><ul class="baidu"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li><li><img src="images/4.jpg"></li></ul><script>// 1. 獲取元素 var imgs = document.querySelector('.baidu').querySelectorAll('img');// console.log(imgs);// 2. 循環注冊事件 for (var i = 0; i < imgs.length; i++) {imgs[i].onclick = function() {// this.src 就是我們點擊圖片的路徑 images/2.jpg// console.log(this.src);// 把這個路徑 this.src 給body 就可以了document.body.style.backgroundImage = 'url(' + this.src + ')';}}</script> </body>

案例13：表格隔行變色效果

用到新的鼠標事件鼠標經過 onmouseover 鼠標離開 onmouseout

核心思路：鼠標經過 tr 行，當前的行變背景顏色，鼠標離開去掉當前的背景顏色

注意：第一行（thead里面的行）不需要變換顏色，因此我們獲取的是 tbody 里面的行

<head><style>.bg {background-color: pink;}</style> </head> <body></table><script>// 1.獲取元素獲取的是 tbody 里面所有的行var trs = document.querySelector('tbody').querySelectorAll('tr');// 2. 利用循環綁定注冊事件for (var i = 0; i < trs.length; i++) {// 3. 鼠標經過事件 onmouseovertrs[i].onmouseover = function() {// console.log(11);this.className = 'bg';}// 4. 鼠標離開事件 onmouseouttrs[i].onmouseout = function() {this.className = '';}}</script> </body>

案例14：全選，反選

全選和取消全選做法：讓下面所有復選框的checked屬性（選中狀態）跟隨全選按鈕即可
下面復選框需要全部選中，上面全選才能選中做法：給下面所有復選框綁定點擊事件，每次點擊，都要循環查看下面所有的復選框是否有沒選中的，如果有一個沒選中的，上面全選就不選中。
可以設置一個變量，來控制全選是否選中

案例15：tab欄切換

<body><div class="tab"><div class="tab_list"><ul><li class="current">商品介紹</li><li>規格與包裝</li><li>售后保障</li><li>商品評價（50000）</li><li>手機社區</li></ul></div><div class="tab_con"><div class="item" style="display: block;">商品介紹模塊內容</div><div class="item">規格與包裝模塊內容</div><div class="item">售后保障模塊內容</div><div class="item">商品評價（50000）模塊內容</div><div class="item">手機社區模塊內容</div></div></div><script>// 獲取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');var items = document.querySelectorAll('.item');// for循環綁定點擊事件for (var i = 0; i < lis.length; i++) {// 開始給5個小li 設置索引號 lis[i].setAttribute('index', i);lis[i].onclick = function() {// 1. 上的模塊選項卡，點擊某一個，當前這一個底色會是紅色，其余不變（排他思想）修改類名的方式// 干掉所有人其余的li清除 class 這個類for (var i = 0; i < lis.length; i++) {lis[i].className = '';}// 留下我自己 this.className = 'current';// 2. 下面的顯示內容模塊var index = this.getAttribute('index');console.log(index);// 干掉所有人讓其余的item 這些div 隱藏for (var i = 0; i < items.length; i++) {items[i].style.display = 'none';}// 留下我自己讓對應的item 顯示出來items[index].style.display = 'block';}}</script> </body>

案例16：新浪下拉菜單

<body><ul class="nav"><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li><li><a href="#">微博</a><ul><li><a href="">私信</a></li><li><a href="">評論</a></li><li><a href="">@我</a></li></ul></li></ul><script>// 1. 獲取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4個小li// 2.循環注冊事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script> </body>

案例17：留言添加操作

案例18：留言刪除操作

<body><textarea name="" id=""></textarea><button>發布</button><ul></ul><script>// 1. 獲取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');// 2. 注冊事件btn.onclick = function() {if (text.value == '') {alert('您沒有輸入內容');return false;} else {// console.log(text.value);// (1) 創建元素var li = document.createElement('li');// 先有li 才能賦值li.innerHTML = text.value + "<a href='javascript:;'>刪除</a>";// (2) 添加元素// ul.appendChild(li);ul.insertBefore(li, ul.children[0]);// (3) 刪除元素刪除的是當前鏈接的li 它的父親var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// node.removeChild(child); 刪除的是 li 當前a所在的li this.parentNode;ul.removeChild(this.parentNode);}}}}</script> </body>

案例19：動態生成表格

<body><table cellspacing="0"><thead><tr><th>姓名</th><th>科目</th><th>成績</th><th>操作</th></tr></thead><tbody></tbody></table><script>// 1.先去準備好學生的數據var datas = [{name: '魏瓔珞',subject: 'JavaScript',score: 100}, {name: '弘歷',subject: 'JavaScript',score: 98}, {name: '傅恒',subject: 'JavaScript',score: 99}, {name: '明玉',subject: 'JavaScript',score: 88}, {name: '大豬蹄子',subject: 'JavaScript',score: 0}];// 2. 往tbody 里面創建行：有幾個人（通過數組的長度）我們就創建幾行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { // 外面的for循環管行 tr// 1. 創建 tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 2. 行里面創建單元格(跟數據有關系的3個單元格) td 單元格的數量取決于每個對象里面的屬性個數 for循環遍歷對象 datas[i]for (var k in datas[i]) { // 里面的for循環管列 td// 創建單元格 var td = document.createElement('td');// 把對象里面的屬性值 datas[i][k] 給 td // console.log(datas[i][k]);td.innerHTML = datas[i][k];tr.appendChild(td);}// 3. 創建有刪除2個字的單元格 var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">刪除 </a>';tr.appendChild(td);}// 4. 刪除操作開始 var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// 點擊a 刪除當前a 所在的行(鏈接的爸爸的爸爸) node.removeChild(child) tbody.removeChild(this.parentNode.parentNode)}}// for(var k in obj) {// k 得到的是屬性名// obj[k] 得到是屬性值// }</script> </body>

案例20：模擬京東按鍵輸入內容

<body><input type="text"><script>// 核心思路：檢測用戶是否按下了s 鍵，如果按下s 鍵，就把光標定位到搜索框里面// 使用鍵盤事件對象里面的keyCode 判斷用戶按下的是否是s鍵// 搜索框獲得焦點：使用 js 里面的 focus() 方法var search = document.querySelector('input');document.addEventListener('keyup', function(e) {// console.log(e.keyCode);if (e.keyCode === 83) {search.focus();}})</script> </body>

案例21：模擬京東快遞單號查詢案例

keydown和keypress在文本框里面的特點：他們兩個事件觸發的時候，文字還沒有落入文本框中。

快遞單號輸入內容時，上面的大號字體盒子（con）顯示(這里面的文字

同時把快遞單號里面的值（value）獲取過來賦值給 con盒子（innerText）做為內容

如果快遞單號里面內容為空，則隱藏大號字體盒子(con)盒子

注意： keydown 和 keypress 在文本框里面的特點：他們兩個事件觸發的時候，文字還沒有落入文本框中。

keyup事件觸發的時候，文字已經落入文本框里面了

當我們失去焦點，就隱藏這個con盒子

當我們獲得焦點，并且文本框內容不為空，就顯示這個con盒子

<body><div class="search"><div class="con">123</div><input type="text" placeholder="請輸入您的快遞單號" class="jd"></div><script>// 快遞單號輸入內容時，上面的大號字體盒子（con）顯示(這里面的字號更大）// 表單檢測用戶輸入：給表單添加鍵盤事件// 同時把快遞單號里面的值（value）獲取過來賦值給 con盒子（innerText）做為內容// 如果快遞單號里面內容為空，則隱藏大號字體盒子(con)盒子var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function() {// console.log('輸入內容啦');if (this.value == '') {con.style.display = 'none';} else {con.style.display = 'block';con.innerText = this.value;}})// 當我們失去焦點，就隱藏這個con盒子jd_input.addEventListener('blur', function() {con.style.display = 'none';})// 當我們獲得焦點，就顯示這個con盒子jd_input.addEventListener('focus', function() {if (this.value !== '') {con.style.display = 'block';}})</script> </body>

案例22：倒計時效果

這個倒計時是不斷變化的，因此需要定時器來自動變化（setInterval）

三個黑色盒子里面分別存放時分秒

三個黑色盒子利用innerHTML 放入計算的小時分鐘秒數

第一次執行也是間隔毫秒數，因此剛刷新頁面會有空白

最好采取封裝函數的方式，這樣可以先調用一次這個函數，防止剛開始刷新頁面有空白問題

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>div {margin: 200px;}span {display: inline-block;width: 40px;height: 40px;background-color: #333;font-size: 20px;color: #fff;text-align: center;line-height: 40px;}</style> </head> <body><div><span class="hour">1</span><span class="minute">2</span><span class="second">3</span></div><script>// 1. 獲取元素 var hour = document.querySelector('.hour'); // 小時的黑色盒子var minute = document.querySelector('.minute'); // 分鐘的黑色盒子var second = document.querySelector('.second'); // 秒數的黑色盒子var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用戶輸入時間總的毫秒數countDown(); // 我們先調用一次這個函數，防止第一次刷新頁面有空白 // 2. 開啟定時器setInterval(countDown, 1000);function countDown() {var nowTime = +new Date(); // 返回的是當前時間總的毫秒數var times = (inputTime - nowTime) / 1000; // times是剩余時間總的秒數 var h = parseInt(times / 60 / 60 % 24); //時h = h < 10 ? '0' + h : h;hour.innerHTML = h; // 把剩余的小時給小時黑色盒子var m = parseInt(times / 60 % 60); // 分m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60); // 當前的秒s = s < 10 ? '0' + s : s;second.innerHTML = s;}</script> </body>

案例23：發送短信案例

<body>手機號碼： <input type="number"> <button>發送</button><script>// 按鈕點擊之后，會禁用 disabled 為true // 同時按鈕里面的內容會變化，注意 button 里面的內容通過 innerHTML修改// 里面秒數是有變化的，因此需要用到定時器// 定義一個變量，在定時器里面，不斷遞減// 如果變量為0 說明到了時間，我們需要停止定時器，并且復原按鈕初始狀態var btn = document.querySelector('button');var time = 3; // 定義剩下的秒數btn.addEventListener('click', function() {btn.disabled = true; //禁用var timer = setInterval(function() {if (time == 0) {// 清除定時器和復原按鈕clearInterval(timer);btn.disabled = false;btn.innerHTML = '發送';} else {btn.innerHTML = '還剩下' + time + '秒';time--;}}, 1000);})</script> </body>

案例24：5秒之后自動跳轉頁面

<body><button>點擊</button><div></div><script>var btn = document.querySelector('button');var div = document.querySelector('div');btn.addEventListener('click', function() {// console.log(location.href);location.href = 'http://www.itcast.cn';})var timer = 5;setInterval(function() {if (timer == 0) {location.href = 'http://www.itcast.cn';} else {div.innerHTML = '您將在' + timer + '秒鐘之后跳轉到首頁';timer--;}}, 1000);</script> </body>

案例25：發送短信案例

location.search取到數據

<body><div></div><script>console.log(location.search); // ?uname=andy// 1.先去掉？ substr('起始的位置'，截取幾個字符);var params = location.search.substr(1); // uname=andyconsole.log(params);// 2. 利用=把字符串分割為數組 split('=');var arr = params.split('=');console.log(arr); // ["uname", "ANDY"]var div = document.querySelector('div');// 3.把數據寫入div中div.innerHTML = arr[1] + '歡迎您';</script> </body>

案例26：拖動的模態框

彈出框，我們也稱為模態框。
功能：

點擊彈出層，會彈出模態框，并且顯示灰色半透明的遮擋層。

點擊關閉按鈕，可以關閉模態框，并且同時關閉灰色半透明遮擋層。

鼠標放到模態框最上面一行，可以按住鼠標拖拽模態框在頁面中移動。

鼠標松開，可以停止拖動模態框移動。

實現步驟：

點擊彈出層，模態框和遮擋層就會顯示出來 display:block;

點擊關閉按鈕，模態框和遮擋層就會隱藏起來 display:none;

在頁面中拖拽的原理：鼠標按下并且移動，之后松開鼠標

觸發事件是鼠標按下 mousedown，鼠標移動mousemove 鼠標松開 mouseup

拖拽過程: 鼠標移動過程中，獲得最新的值賦值給模態框的left和top值，這樣模態框可以跟著鼠標走了

鼠標按下觸發的事件源是最上面一行，就是 id 為 title

鼠標的坐標減去鼠標在盒子內的坐標，才是模態框真正的位置。

鼠標按下，我們要得到鼠標在盒子的坐標。

鼠標移動，就讓模態框的坐標設置為：鼠標坐標減去盒子坐標即可，注意移動事件寫到按下事件里面。
10.鼠標松開，就停止拖拽，就是可以讓鼠標移動事件解除

<body><div class="login-header"><a id="link" href="javascript:;">點擊，彈出登錄框</a></div><div id="login" class="login"><div id="title" class="login-title">登錄會員<span><a id="closeBtn" href="javascript:void(0);" class="close-login">關閉</a></span></div><div class="login-input-content"><div class="login-input"><label>用戶名：</label><input type="text" placeholder="請輸入用戶名" name="info[username]" id="username" class="list-input"></div><div class="login-input"><label>登錄密碼：</label><input type="password" placeholder="請輸入登錄密碼" name="info[password]" id="password" class="list-input"></div></div><div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登錄會員</a></div></div><div id="bg" class="login-bg"></div><script>// 1. 獲取元素var login = document.querySelector('.login');var mask = document.querySelector('.login-bg');var link = document.querySelector('#link');var closeBtn = document.querySelector('#closeBtn');var title = document.querySelector('#title');// 2. 點擊彈出層這個鏈接 link 讓mask 和login 顯示出來link.addEventListener('click', function() {mask.style.display = 'block';login.style.display = 'block';})// 3. 點擊 closeBtn 就隱藏 mask 和 login closeBtn.addEventListener('click', function() {mask.style.display = 'none';login.style.display = 'none';})// 4. 開始拖拽// (1) 當我們鼠標按下，就獲得鼠標在盒子內的坐標title.addEventListener('mousedown', function(e) {var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;// (2) 鼠標移動的時候，把鼠標在頁面中的坐標，減去鼠標在盒子內的坐標就是模態框的left和top值document.addEventListener('mousemove', move)function move(e) {login.style.left = e.pageX - x + 'px';login.style.top = e.pageY - y + 'px';}// (3) 鼠標彈起，就讓鼠標移動事件移除document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move);})})</script> </body>

案例27：仿京東放大鏡效果

黃色的遮擋層跟隨鼠標功能。

把鼠標坐標給遮擋層不合適。因為遮擋層坐標以父盒子為準。

首先是獲得鼠標在盒子的坐標。

之后把數值給遮擋層做為left 和top值。

此時用到鼠標移動事件，但是還是在小圖片盒子內移動。

發現，遮擋層位置不對，需要再減去盒子自身高度和寬度的一半。

遮擋層不能超出小圖片盒子范圍。

如果小于零，就把坐標設置為0

如果大于遮擋層最大的移動距離，就把坐標設置為最大的移動距離

遮擋層的最大移動距離：小圖片盒子寬度減去遮擋層盒子寬度

案例28：仿淘寶側邊欄

功能分析：

需要用到頁面滾動事件 scroll 因為是頁面滾動，所以事件源是 document

滾動到某個位置，就是判斷頁面被卷去的上部值。

頁面被卷去的頭部：可以通過window.pageYOffset 獲得如果是被卷去的左側 window.pageXOffset

注意，元素被卷去的頭部是 element.scrollTop , 如果是頁面被卷去的頭部則是 window.pageYOffset

其實這個值可以通過盒子的 offsetTop 可以得到，如果大于等于這個值，就可以讓盒子固定定位了

<body><div class="slider-bar"><span class="goBack">返回頂部</span></div><div class="header w">頭部區域</div><div class="banner w">banner區域</div><div class="main w">主體部分</div><script>//1. 獲取元素var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');// banner.offestTop 就是被卷去頭部的大小一定要寫到滾動的外面var bannerTop = banner.offsetTop// 當我們側邊欄固定定位之后應該變化的數值var sliderbarTop = sliderbar.offsetTop - bannerTop;// 獲取main 主體元素var main = document.querySelector('.main');var goBack = document.querySelector('.goBack');var mainTop = main.offsetTop;// 2. 頁面滾動事件 scrolldocument.addEventListener('scroll', function() {// console.log(11);// window.pageYOffset 頁面被卷去的頭部// console.log(window.pageYOffset);// 3 .當我們頁面被卷去的頭部大于等于了 172 此時側邊欄就要改為固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 4. 當我們頁面滾動到main盒子，就顯示 goback模塊if (window.pageYOffset >= mainTop) {goBack.style.display = 'block';} else {goBack.style.display = 'none';}})</script> </body>

案例29：輪播圖制作

總結

以上是生活随笔為你收集整理的javaScript常用案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。