javascript
Posted harryblog
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript相关的知识，希望对你有一定的参考价值。
一 javascript是什么
javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。
javaScript的特点：
- javaScript主要用来向html页面中添加交互行为
- javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。
- javaScript一般用来编写客户端脚本，如node.js例外。
- javaScript是一种解释型语言，边执行边解释无需另外编译。
二 js中的变量
变量的声明和定义
1 先声明后定义
var dog; // alert(dog) // undefined未定义 // 定义 dog = ‘小黄‘
2 声明立即定义
var dog_2 = ‘小红‘; console.log(dog_2);
变量命名规范：
- 严格区分大小写
- 命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字，不能包含关键字和保留字。关键字：var number等
- 推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写
- 匈牙利命名：就是根据数据类型单词的的首字符作为前缀
三 js中的数据类型
1 基本数据类型
(1) number var a = 123; //typeof 检查当前变量是什么数据类型 console.log(typeof a) // 特殊情况 var a1 = 5/0; console.log(typeof a1) // infinity 无限大 (2) string var str = ‘123‘; console.log(typeof str) (3) boolean var b1 = false; console.log(typeof b1) (4) null var c1 = null; //空对象 objec console.log(c1) (5) undefined var d1; // 表示变量
2 引用数据类型
数组Array
(1)数组的创建方式 var colors = [‘red‘,‘green‘,‘yellow‘] 使用构造函数创建数组 var colors2 = new Array() (2)数组的赋值 var arr = []; arr[0] = 123; arr[1] = ‘哈哈’ (3) 数组的常用方法 concat() 将几个数组合并为一个数组 join() 返回字符串，其中包含了连接到一起数组中的所有元素，元素由指定分隔符分割开来 pop() 移除数组的最后一个元素并返回该元素 shift() 移除数组的一个元素 unshift() 移除数组的开头添加一个元素，并返回新的长度 splice(star,end) 删除元素，或者向数组添加新元素(插入，需添加第三个参赛为想要添加的内容)。 names.splice(0, 2) # 删除前两个元素 names.splice(1,0, "harry") # 插入新的元素 slice() 可从已有的数组中返回选定的元素。 reverse() 对数组进行反转 length 获取数组长度 toString() 将数组转为字符串 sort() 排序,升序或者降序，默认会按照ASSIC码排序 indexOf() 查找数组元素位置 lasetIndexOf() 查找数据元素位置从后往前查找 filter() 过滤数组中某些元素 var filterResult = numbers.filter(function(item, index, array) return item > 10 ) map() 可以操作数组中的每一项元素 var filterResult = numbers.filter(function(item, index, array) return item * 2 )
字符串String
字符串常用方法 charAt() 返回指定索引的位置字符 concat() 返回字符串值，表示两个或多个字符串的拼接 mantch() 返回正则表达式模式对字符串进行匹配到的结果 replace(a,b) 字符串b替换成了a search(stringObj) 返回的第一个匹配结果的索引值 slice(start,end) 返回start到end-1之间的字符串，索引从0开始 substr(start,end) 字符串截取，左闭右开 toUpperCase() 将字符串转成大写 toLowerCase() 将字符串转成小写 indexOf() 查找字符的索引位置 trim() 清楚字符串的前后空格
Date日期对象
创建方法 var myDate = new Date(); 常用方法 getDate() 根据本地时间返回指定日期对象的月份中的几(1-31) Date() 根据本地时间返回当天的日期和时间 getMonth() 根据本地时间返回指定日期对象的月份(0-11) getFullYear() 根据本地时间返回指定日期对象年份(四位数年份返回四位数字) getDay() 根据本地时间返回指定日期对象的星期中的第几天(0-6) getHours() 根据本地时间返回指定日期对象的小时(0-23) getMinutes() 根据本地时间返回指定日期的对象分钟(0-59) getSeconds() 根据本地时间返回指定日期对象的秒数(0-59) 日期格式化 toDateString() 星期 月 日 年 toTimeString() 时 分 秒 时区 toLoacleDateSting() toLocaleTimeString() toLocaleSting() 自定制返回数字时钟格式的时间 function nowNumberTime() var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var temp = ""+(hour>12?hour - 12 : hour) if(hour === 0 ) temp = ‘12‘; temp = temp + (minute <10 ? ‘:0‘: ":")+minute temp = temp + (second <10 ? ‘:0‘: ":")+second temp = temp + (hour>=12? ‘ P.M.‘:" A.M."); return temp;
Math对象
Math.floor() 向下取整，称为地板函数 Math.cel() 向上取整 Math.max(a,b) 求a和b中的最大值 Math.min(a,b) 求a和b中的最小值 Manth.random() 随机数，默认0-1之间的随机数，公式min+Math.random()*(max-min),求min~max之间的数 # 获取随机颜色 RGB(0-255, 0-255, 0-255); function randomColor() var r = random(0, 256),g = random(0, 256),b = random(0, 256); var result = ‘rgb($r, $g, $b)‘; return result; document.body.style.backgroundColor = rc; # 随机验证码 function creatCode() // 设置默认的空的字符串 var code = ‘‘; // 设置长度 var codeLength=4 var rando = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]; for(var i=0; i<codeLength; i++) // 设置随机范围 0~36 var index = random(0, 36); code = randomCode[index]
四 定时器
在js中的定时器分两种：1、setTimeout() 2、setInterval()
1.setTimeOut()
只在指定时间后执行一次 //定时器 异步运行 function hello() alert("hello"); //使用方法名字执行方法 var t1 = window.setTimeout(hello,1000); var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法 window.clearTimeout(t1);//去掉定时器
2.setInterval()
在指定时间为周期循环执行 //实时刷新时间单位为毫秒 setInterval(‘refreshQuery()‘,8000); /* 刷新查询 */ function refreshQuery() console.log(‘每8秒调一次‘) 两种方法根据不同的场景和业务需求择而取之， 一般情况下setTimeout用于延迟执行某方法或功能， setInterval则一般用于刷新表单，对于一些表单的假实时指定时间刷新同步，动画效果等。
五 DOM操作
在JS中，所有的事物都是节点，元素、文本等都是节点。
应用场景：可以通过节点进行DOM对象的增删改查
1 获取DOM节点的方法
//通过id获取，唯一的 var oDiv = document.getElementById(‘box‘); //通过类名获取 var oDiv = document.getElementsByClassName(‘.box‘)[0]; //通过标签名获取 var oDiv = document.getElementsByTagName(‘div‘)[0];
2 常用DOM节点
childNodes 获取所有的子节点，除了元素还有文本等 children 获取所有元素子节点，不包含文本 parentNode 获取父节点 previousSibling 获取上一个兄弟节点，包含文本 previousElementSibling 获取上一个兄弟元素节点，不包含文本 nextSibling 获取下一个兄弟节点，包含文本 nextElementSibling 获取下一个兄弟元素节点，不包含文本 firstChild 获取第一个子节点，包含文本 firstElementChild 获取第一个子节点，不包含文本 lastChild 获取最后一个子节点，包含文本 lastElementChild 获取父元素最后一个元素节点。不包含文本 (1) 元素节点 var oDiv = document.getElementById(‘box‘); console.log(oDiv.nodeName + "|" + oDiv.nodeValue + "|" + oDiv.nodeType); (2) 获取属性节点 var attrs = oDiv.attributes // 获取标签所有属性 (3) 文本节点 var textNode = oDiv.childNodes
3 节点的增删改查
(1) 创建节点 createElement() (2) 插入节点 appendChild() insertBefore(newNode, node) // 在一个标签前面插入 (3) 删除节点 removeChild() (4) 替换节点 replaceChild(newNode, node) (5) 创建文本节点 createTextNode() // 1.创建元素节点 var oH2 = document.createElement(‘h2‘); // 设置oH2的内容，p标签会被解析成p元素显示到HTML页面中 oH2.innerHTML = ‘<p>嘿 sariy</p>‘; // 只设置元素内的文本内容，div标签将被当做文本元素 oH2.innerText = ‘<div>嘿嘿</div>‘ // 2.将创建好的元素节点添加到指定元素所有内容的后面 oDiv.appendChild(oH2); // 获取元素节点里的所有内容 包括标签和文本 console.log(oDiv.innerHTML); // 表示元素节点的标签名大写 console.log(oDiv.tagName); // 只获取元素内的文本内容，html标签将被忽略 console.log(oDiv.innerText); // 设置元素id oH2.id = ‘luffy‘; // 设置类名 oH2.className = ‘wusir‘; oH2.className = ‘wusir2‘; //获取标签属性 console.log(oH2.getAttribute(‘class‘));//wusir2 // 设置标签属性 oA.setAttribute(‘href‘,‘https://www.jd.com‘); // 删除元素上的属性 oA.removeAttribute(‘href‘); // 删除创建的对象 // oDiv.removeChild(oH2); //如果为true 克隆当前元素与元素的所有子节点 // console.log(oDiv.cloneNode(true)); // 父节点.replaceChild(新节点,子节点) 用新节点替换某个子节点 var op = document.createElement(‘p‘); op.innerText = ‘我是一个段落‘; oDiv.replaceChild(op,oA); //style属性 ：css内联样式属性值 //一般情况下， css的样式属性中出现“-” 号，则对应的style属性 是：去掉“-”号，把“-”号 后面单词的第一字母大写。 如果没有“-”号，则两者 一样。 //例如:oDiv.css.backgroundColor = ‘red‘;
4 属性操作
var oP = document.getElementByTagName("p")[0]; var title = oP.getAttribute("title") // 获取标签的title属性 var className = oP.setAttrbute("id", "haha") // 给标签设置属性
5 样式设置
var oP = document.getElementById("box"); oP.style.backgroundColor = "black"; oP.style.color = "white"; oP.style.width = "120px";
六 BOM操作
1 什么是BOM
BOM，Browser Object Model，即浏览器对象模型。浏览器页面初始化时，会在内存创建一个全局对象，用来描述当前窗口的属性和状态，这个全局对象被称为浏览器对象模型。
2 BOM包含哪些内容
- document对象，即文档对象
- frames，即HTML自框架
- history，即页面的历史记录
- location，即当前页面的地址
- navigator，包含浏览器相关信息
- screen，用户显示屏幕相关属
3 window对象
window.alert()
window.confirm()
window.prompt()
4 location对象
location.host 返回服务器域名和端口号 location.hostname 获取服务器域名 location.pathname 获取路径 location.port 获取端口号 location.protocol 获取http或https location.href 跳转网址 location.reload 重载网址 location.search 获取url中的参数 # 访问每个查询字符串参数 // 1. 取得查询字符串 var qs = location.search.length > 0 ? location.search.substring(1):‘‘; // 2. 取得每一项存放到数组中 var items = qs.length ? qs.split("&"):[]; var item = null, name = null, value = null; for(var i=0; i<items.length; i++) item = items[i].split("=");// [‘name‘, ‘cs‘]; name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) args[name] = value;
七 JS特效案例
图片切换：
<body> <img src="image/name1.png" id="photo" width="200" height="200"> <br> <button id="prev">上一张</button> <button id="next">下一张</button> <script> // 1. 获取事件源。 需要的标签 var photo = document.getElementById("photo"); var nextbtn = document.getElementById("next"); var pervbtn = document.getElementById("prev"); var minIndex = 1, maxIndex = 3, currentIndex = minIndex; // 2. 监听按钮的点击 nextbtn.onclick = function () if(currentIndex === maxIndex) currentIndex= minIndex else currentIndex++ photo.setAttribute("src", `image/name$currentIndex.png`) </script> </body>
显示和隐藏：
<body> <button id="btn">隐藏</button> <br> <img src="image/name1.png" id="new"> <script> var obtn = document.getElementById("btn"); var newImg = document.getElementsByTagName(‘img‘)[0]; var isShow = true; obtn.onclick = function () if(isShow) newImg.style.display="none"; obtn.innerHTML = "显示"; isShow = false; else newImg.style.display="block"; obtn.innerHTML = "隐藏"; isShow = true; </script> </body>
衣服相册(实现鼠标悬浮切换大图)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * padding: 0; margin: 0; ul list-style: none; overflow: hidden; ul li float: left; margin-left: 10px; width: 50px; height: 50px; margin-top: 20px; .active border: red solid; </style> </head> <body> <img src="image/name1.png" id="bigImg"> <ul> <li> <a> <img src="image/name1.png" width="46" class="smallImg"> </a> </li> <li> <a> <img src="image/name2.png" width="46" class="smallImg"> </a> </li> <li> <a> <img src="image/name3.png" width="46" class="smallImg"> </a> </li> <li> <a> <img src="image/name4.png" width="46" class="smallImg"> </a> </li> </ul> </body> <script> var bigImg = document.getElementById("bigImg"); var smallImgs = document.getElementsByClassName("smallImg"); for(var i=0; i<smallImgs.length; i++) // 遍历集合, 给每个img添加事件 smallImgs[i].onmouseover = function () // 在悬浮到每个li标签之前, 先把所有的li标签的类名都置为空值 for (var j=0; j<smallImgs.length; j++) smallImgs[j].parentNode.parentNode.setAttribute("class", ‘‘) // 修改大图的src属性值 var smallImgSrc = this.getAttribute("src"); bigImg.setAttribute(‘src‘, smallImgSrc); // 给鼠标悬浮的img标签的父标签添加类名 this.parentNode.parentNode.setAttribute(‘class‘, ‘active‘); </script> </html>
关闭小广告效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * padding: 0; margin: 0; #qe_code width: 180px; height: 160px; position: relative; margin: 100px auto; #qe_code img position: absolute; right: 0; #qe_code #close position: absolute; width: 18px; height: 18px; border: 1px solid #e0e0e0; text-align: center; line-height: 18px; cursor: pointer; </style> </head> <body> <div id="qe_code"> <img src="image/name1.png"> <span id="close">X</span> </div> <script type="text/javascript"> var closeSpan = document.getElementById("close"); var qe_code = document.getElementById("qe_code"); closeSpan.onclick = function () qe_code.style.display = ‘none‘; </script> </body> </html>
图片切换效果2：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * padding: 0; margin: 0; #box border: 1px solid #ccc; width: 450px; height: 70px; padding-top: 430px; background: url("image/healthy.png") no-repeat; #box ul li display: inline-block; margin-right: 15px; #box ul li img width: 50px; height: 50px; padding-left: 10px; </style> </head> <body> <div id="box"> <ul> <li class="item" id="0"> <img src="image/name1.png"> </li> <li class="item" id="1"> <img src="image/name2.png"> </li> <li class="item" id="3"> <img src="image/name3.png"> </li> <li class="item" id="4"> <img src="image/name4.png"> </li> </ul> </div> <script > //和获取事件源 function $(id) return typeof id === ‘string‘? document.getElementById(id):null; var items = document.getElementsByClassName(‘item‘); for(var i=0; items.length; i++) var item = items[i]; item.index = i+1; items[i].onmouseover = function () $(‘box‘).style.background = `url("image/healthy$this.index.png") no-repeat` </script> </body> </html>
更换皮肤功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * padding: 0; margin: 0; ul list-style: none; #skin position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url("image/healthy.png"); background-position: center 0; background-repeat: no-repeat; #skin-photo width: 100%; height: 100px; position: relative; z-index: 10; #skin-photo ul overflow: hidden; width: 1200px; margin: 0 auto; background-color: rgba(255,255,255,.5); #skin-photo ul li float: left; cursor: pointer; height: 120px; margin: 10px 0 10px 96px; #skin-photo ul li img width: 180px; height: 120px; </style> </head> <body> <div id="skin"></div> <div id="skin-photo"> <ul> <li> <img src="image/name1.png"> </li> <li> <img src="image/name2.png"> </li> <li> <img src="image/name3.png"> </li> <li> <img src="image/name4.png"> </li> </ul> </div> <script> var skin = document.getElementById("skin"); var allItems = document.getElementsByTagName(‘li‘); for (var i=0; i<allItems.length; i++) allItems[i].index = i+1; allItems[i].onclick = function () skin.style.backgroundImage = `url(‘image/name$this.index.png‘)` </script> </body> </html>
音乐盒实现全选和反选
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * padding: 0; margin: 0; #panel background-color: #fff; border: 1px solid #ddd; border-radius: 4px; width: 400px; padding: 20px; margin: 100px auto; .panel-footer text-align: center; </style> </head> <body> <div id="panel"> <div class="panel-title"> <h3>千千音乐盒</h3> <hr> </div> <div class="panel-content"> <input type="checkbox">漂洋过海来看你 <br> <input type="checkbox">一眼万年<br> <input type="checkbox">后来 <br> <input type="checkbox">没那么简单 <br> <input type="checkbox">如果你要离去 <br> <input type="checkbox">恋恋风尘 <br> <input type="checkbox">南山南 <br> <input type="checkbox">涛声依旧 <br> <input type="checkbox">可惜不是你 <br> </div> <div class="panel-footer"> <hr> <button id="allSelect">全选</button> <button id="cancelSelect">取消选中</button> <button id="reverseSelect">反选</button> </div> </div> <script type="text/javascript"> function $(id) return typeof id === ‘string‘ ? document.getElementById(id) : null; // 1.获取所有的复选框 var inputs = document.getElementsByTagName(‘input‘); // 2.全选 $(‘allSelect‘).onclick = function() for(var i = 0; i < inputs.length; i ++) inputs[i].checked = true; // 3.取消选中 $(‘cancelSelect‘).onclick = function() for(var i = 0; i < inputs.length; i ++) inputs[i].checked = false; // 4.反选 $(‘reverseSelect‘).onclick = function() for(var i = 0; i < inputs.length; i ++) inputs[i].checked = !inputs[i].checked; /* if(inputs[i].checked) inputs[i].checked = false; else inputs[i].checked = true; */ </script> </body> </html>
表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>10 表单验证</title> <style type="text/css"> * padding: 0; margin: 0; #prompt font-size: 12px; color: darkgray; #score border: 1px solid darkgray; .right background: url(‘images/right.png‘) no-repeat 5px center; background-size: 15px 15px; padding-left: 20px; color: lightgreen !important; .error background: url(‘images/error.png‘) no-repeat 5px center; background-size: 15px 15px; padding-left: 20px; color: red !important; </style> </head> <body> <div id="box"> <label for=‘score‘>您的成绩：</label> <input type="text" placeholder="请输入分数" id="score"> <span id="prompt">请输入您的成绩</span> </div> <script type="text/javascript"> function $(id) return typeof id === ‘string‘ ? document.getElementById(id) : null; // input输入框失去焦点 $(‘score‘).onblur = function() // 1.获取输入的内容 var value = parseFloat(this.value); console.log(typeof value); // 2.验证 console.log(isNaN(value)); if(isNaN(value)) //不是一个数 $(‘prompt‘).innerHTML = ‘输入的成绩不正确‘; // $(‘prompt‘).setAttribute(‘class‘, ‘error‘); $(‘prompt‘).className = ‘error‘; this.style.borderColor = ‘red‘; else if(value >= 0 && value <= 100) // 合法的 $(‘prompt‘).innerHTML = ‘输入的成绩正确‘; $(‘prompt‘).className = ‘right‘; this.style.borderColor = ‘lightgreen‘; else // 超出成绩的范围 $(‘prompt‘).innerHTML = ‘成绩必须在0~100之间‘; $(‘prompt‘).className = ‘error‘; this.style.borderColor = ‘red‘; // input输入框获取焦点 恢复原来的状态 $(‘score‘).onfocus = function() $(‘prompt‘).innerHTML = ‘请输入您的成绩‘; $(‘prompt‘).className = ‘‘; $(‘score‘).style.borderColor = ‘darkgray‘; $(‘score‘).style.outline = ‘none‘; $(‘score‘).value = ‘‘; </script> </body> </html>
随机验证码校验
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12 随机验证码</title> <style type="text/css"> #code width: 100px; height: 100px; background-color: #ddd; padding: 10px; line-height: 100px; text-align: center; font-size: 20px; color: red; font-weight: bold; input outline: none; </style> </head> <body> <div id="code"></div> <input type="text" name="" id="newCode"> <input type="button" name="" id="validate" value="验证"> <script type="text/javascript"> window.onload = function() // 保存全局，与新输入的验证码进行校验 var code; // 1.获取对应的标签 var codeDiv = document.getElementById(‘code‘); var newCodeInput = document.getElementById(‘newCode‘); var validate = document.getElementById(‘validate‘); // 加载页面获取对应的验证码 creatCode() // 1.获取min到max之间的整数 (1~100) function random(max,min) return Math.floor(Math.random() * (max-min) + min); function creatCode() // 设置默认的空的字符串 code = ‘‘; // 设置长度 var codeLength = 4; var randomCode = [0,1,2,3,4,5,6,7,8,9,‘A‘,‘B‘,‘C‘,‘D‘,‘E‘,‘F‘,‘G‘,‘H‘,‘I‘,‘J‘,‘K‘,‘L‘,‘M‘,‘N‘,‘O‘,‘P‘,‘Q‘,‘R‘, ‘S‘,‘T‘,‘U‘,‘V‘,‘W‘,‘X‘,‘Y‘,‘Z‘]; for(var i = 0; i < codeLength; i++) // 设置随机范围 0~36 var index = random(0,36); code += randomCode[index]; codeDiv.innerHTML = code; // 验证按钮校验 validate.onclick = function() // 获取用户新输入的验证码 var newCode = newCodeInput.value.toUpperCase(); if(newCode === code) // 验证成功 跳转对应的网址 window.location.href = ‘https://www.apeland.cn‘; else // 验证失败 alert(‘验证码不正确,请重新输入‘); // 输入框置空 newCodeInput.value = ‘ ‘; // 重新获取验证码 creatCode(); </script> </body> </html>
发布评论：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * padding: 0; margin: 0; #box width: 1000px; border: 1px solid #ccc; margin: 100px auto; padding: 20px; #comment width: 80%; padding: 10px 10px; font-size: 20px; outline: none; .box_top margin-bottom: 20px; #comment_content li border-bottom: 1px dashed #cccccc; width: 800px; color: red; line-height: 45px; #comment_content li a float: right; </style> </head> <body> <div id="box"> <div class="box_top"> <textarea id="comment" cols="80" rows="10" placeholder="请输入你的评论"></textarea> <button id="btn">发布</button> </div> <ul id="comment_content"> <!--<li>--> <!--我的内容--> <!--<a href="javascript:void(0);">删除</a>--> <!--</li>--> </ul> </div> <script type="text/javascript"> window.onload = function() // 1 监听按钮的点击 $(‘btn‘).onclick = function () // 1.1 获取用户输入的内容 var content = $(‘comment‘).value; // 1.2 判断 if(content.length === 0) alert("请输入内容"); return; // 1.3 创建li标签插入到ul中 var newLi = document.createElement(‘li‘); newLi.innerHTML = `$content <a href=‘javascript:void(0)‘>删除</a>`; // $(‘comment_content‘).appendChild(newLi); $(‘comment_content‘).insertBefore(newLi, $(‘comment_content‘).children[0]); // 1.4 清楚输入框中的内容 $(‘comment‘).value = ‘‘; // 1.5 删除评论 var delBtns = document.getElementsByTagName(‘a‘); for(var i = 0; i < delBtns.length; i++) delBtns[i].onclick = function () this.parentNode.remove() ; function $(id) return typeof id === ‘string‘ ? document.getElementById(id) : null; </script> </body> </html>
九宫格布局(浮动实现)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14 九宫格布局</title> <style type="text/css"> * padding: 0; margin: 0; #wrap overflow: hidden; #wrap .item width: 248px; height: 360px; font-size: 13px; #wrap .item .title width: 248px; height: 30px; line-height: 30px; overflow: hidden; margin-bottom: 10px; .imgContainer width: 248px; display: table-cell; text-align: center; #wrap .item .price color:#ff6700; font-size: 18px; font-weight: bold; </style> </head> <body> <div class="cols"> <button>3列</button> <button>4列</button> <button>5列</button> </div> <div id="wrap"> <div class="item"> <div class="imgContainer"> <img src="images/taobao_1.jpg" alt=""> </div> <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_2.jpg" alt=""> </div> <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_3.jpg" alt=""> </div> <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_4.jpg" alt=""> </div> <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p> <p class="price">¥90</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_5.jpg" alt=""> </div> <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p> <p class="price">¥78</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_6.jpg" alt=""> </div> <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p> <p class="price">¥89</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_7.jpg" alt=""> </div> <p class="title">春季短款小外套女2019春装春秋新款韩</p> <p class="price">¥100</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_8.jpg" alt=""> </div> <p class="title">大码女装中长款针织衫春装胖mm显瘦</p> <p class="price">¥120</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_9.jpg" alt=""> </div> <p class="title">春款韩版2019新款女装时尚初春两件套</p> <p class="price">¥107</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_10.jpg" alt=""> </div> <p class="title">牛仔外套女短款2019春装新款女装韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_11.jpg" alt=""> </div> <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p> <p class="price">¥56</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_12.jpg" alt=""> </div> <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p> <p class="price">¥76</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_13.jpg" alt=""> </div> <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p> <p class="price">¥45</p> </div> </div> <script type="text/javascript"> // 1.获取标签 var btns = document.getElementsByTagName(‘button‘); var items = document.getElementsByClassName(‘item‘); // 2.监听按钮的点击 btns[0].onclick = function() // 3.循环 mjj_flex(3); btns[1].onclick = function() mjj_flex(4) btns[2].onclick = function() mjj_flex(5); function mjj_flex(colsNum) for(var i = 0; i < items.length; i++) items[i].style.float = ‘left‘; items[i].parentNode.style.width = (colsNum * items[i].offsetWidth) + ‘px‘ </script> </body> </html>
九宫格布局(定位实现)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>14 九宫格布局</title> <style type="text/css"> * padding: 0; margin: 0; #wrap position: relative; #wrap .item width: 248px; height: 360px; font-size: 13px; #wrap .item .title width: 248px; height: 30px; line-height: 30px; overflow: hidden; margin-bottom: 10px; .imgContainer width: 248px; display: table-cell; text-align: center; #wrap .item .price color:#ff6700; font-size: 18px; font-weight: bold; </style> </head> <body> <div class="cols"> <button>3列</button> <button>4列</button> <button>5列</button> </div> <div id="wrap"> <div class="item"> <div class="imgContainer"> <img src="images/taobao_1.jpg" alt=""> </div> <p class="title">纯色短袖女春季秋t恤韩版国新款服装2019潮</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_2.jpg" alt=""> </div> <p class="title">百搭开春装女胖mm夏季显瘦2019新款大码韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_3.jpg" alt=""> </div> <p class="title">婚纱2019新款欧美韩式孕妇婚纱高腰韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_4.jpg" alt=""> </div> <p class="title">点上衣很仙的女装夏2019新款洋气打底衫</p> <p class="price">¥90</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_5.jpg" alt=""> </div> <p class="title">大码女装胖MM文艺时尚格子圆点显瘦连衣裙</p> <p class="price">¥78</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_6.jpg" alt=""> </div> <p class="title">2019夏季新款女装韩版修身显瘦V领无袖</p> <p class="price">¥89</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_7.jpg" alt=""> </div> <p class="title">春季短款小外套女2019春装春秋新款韩</p> <p class="price">¥100</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_8.jpg" alt=""> </div> <p class="title">大码女装中长款针织衫春装胖mm显瘦</p> <p class="price">¥120</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_9.jpg" alt=""> </div> <p class="title">春款韩版2019新款女装时尚初春两件套</p> <p class="price">¥107</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_10.jpg" alt=""> </div> <p class="title">牛仔外套女短款2019春装新款女装韩版</p> <p class="price">¥69</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_11.jpg" alt=""> </div> <p class="title">2019夏季新款女装裙子纯色流苏a字裙</p> <p class="price">¥56</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_12.jpg" alt=""> </div> <p class="title">女装休闲短袖韩版宽松2019新款春夏季</p> <p class="price">¥76</p> </div> <div class="item"> <div class="imgContainer"> <img src="images/taobao_13.jpg" alt=""> </div> <p class="title">棉上衣女装秋季新款2019早春休闲时尚</p> <p class="price">¥45</p> </div> </div> <script type="text/javascript"> // 1.获取标签 var btns = document.getElementsByTagName(‘button‘); var items = document.getElementsByClassName(‘item‘); // 2.监听按钮的点击 btns[0].onclick = function() // 3.循环 mjj_flex(3); btns[1].onclick = function() mjj_flex(4) btns[2].onclick = function() mjj_flex(5); function mjj_flex(colsNum) // 第0行第0列 top: row * h left: col* w // 第0行第1列 top: 0 * h left: 1* w // 第0行第2列 top: 0 * h left: 2* w // 第1行第0列 top: 1 * h left: 0 * w // 第1行第1列 top: 1 * h left: 1 * w // 第1行第2列 top: 1 * h left: 2* w // 第2行第0列 top: 2 * h left: 0* w // 第2行第1列 top: 2 * h left: 0* w // 第2行第2列 top: 2 * h left: 0* w for(var i = 0; i < items.length; i++) // 求每个盒子占得行数和列数 10 3行 1列 // 11 3行 2列 var row = parseInt(i / colsNum); var col = parseInt(i % colsNum); // 设置盒子定位 items[i].style.position = ‘absolute‘; items[i].style.top = (row * items[i].offsetHeight) + ‘px‘; items[i].style.left = (col * items[i].offsetWidth) + ‘px‘; </script> </body> </html>
数字时钟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>19 数字时钟案例</title> <style type="text/css"> * padding: 0; margin: 0; #clock width: 600px; height: 600px; background: url(‘images/clock.jpg‘) no-repeat; position: relative; #hour,#minute,#second position: absolute; width: 30px; height: 600px; left: 50%; top: 0; margin-left: -15px; #hour background: url(‘images/hour.png‘) no-repeat center center; #minute background: url(‘images/minute.png‘) no-repeat center center; #second background: url(‘images/second.png‘) no-repeat center center; </style> </head> <body> <div id="clock"> <div id="hour"></div> <div id="minute"></div> <div id="second"></div> </div> <script type="text/javascript"> // 1.获取标签 var hour = document.getElementById(‘hour‘); var minute = document.getElementById(‘minute‘); var second = document.getElementById(‘second‘); // 2.开启定时器 获取当前时间 setInterval(function () // 2.1 获取当前的时间戳 var now = new Date(); // 2.2 获取小时 分钟 秒 var s = now.getSeconds(); var m = now.getMinutes() + s / 60; var h = now.getHours() % 12 + m / 60; // 2.3 旋转 second.style.transform = `rotate($s * 6deg)`; minute.style.transform = `rotate($m * 6deg)`; hour.style.transform = `rotate($h * 30deg)`; , 10); </script> </body> </html>
长图滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>20 长图滚动效果</title> <style> * padding: 0; margin: 0; body background-color: #000; #box width: 658px; height: 400px; border: 1px solid #ff6700; margin: 100px auto; overflow: hidden; position: relative; #box img position: absolute; top: 0; left: 0; #box span position: absolute; width: 100%; height: 50%; left: 0; cursor: pointer; #box #top top: 0; #box #bottom bottom: 0; </style> </head> <body> <div id="box"> <!-- 658 4066 --> <img src="images/timer.jpeg" alt=""> <span id="top"></span> <span id="bottom"></span> </div> <script type="text/javascript"> // 1.获取标签 var box = document.getElementById(‘box‘); var pic = document.getElementsByTagName(‘img‘)[0]; var divTop = document.getElementById(‘top‘); var divBottom = document.getElementById(‘bottom‘); // 2.添加事件 var num = 0,timer = null; divTop.onmouseover = function () clearInterval(timer); // 让图片向上滚动 timer = setInterval(function () num -= 10; if(num >= -3666) pic.style.top = num + ‘px‘; else clearInterval(timer); ,50); divBottom.onmouseover = function () clearInterval(timer); // 让图片向上滚动 timer = setInterval(function () num += 10; if(num <= 0) pic.style.top = num + ‘px‘; else clearInterval(timer); ,100); box.onmouseout = function () clearInterval(timer); </script> </body> </html>
以上是关于javascript的主要内容，如果未能解决你的问题，请参考以下文章