javaScript常用案例
生活随笔
收集整理的這篇文章主要介紹了
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：表格隔行變色效果
案例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：留言添加操作
<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;// (2) 添加元素// ul.appendChild(li);//最新的留言置頂ul.insertBefore(li, ul.children[0]);}}</script> </body>案例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在文本框里面的特點：他們兩個事件觸發的時候，文字還沒有落入文本框中。
案例22：倒計時效果
案例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：拖動的模態框
彈出框，我們也稱為模態框。
功能：
實現步驟：
10.鼠標松開，就停止拖拽，就是可以讓鼠標移動事件解除
案例27：仿京東放大鏡效果
案例28：仿淘寶側邊欄
功能分析：
案例29：輪播圖制作
總結
以上是生活随笔為你收集整理的javaScript常用案例的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何写好学术论文
- 下一篇： 网易2016在线笔试小结