搜索到
20
篇与
的结果
-
JS编写一个简易的留言板 案例需求利用节点的创建、添加和删除相关知识完成一个简易的留言板功能。在页面中实现单击“发布”按钮动态创建一个li元素，添加到ul里面。步骤分析编写HTML结构，完成页面布局添加留言功能：获取元素添加留言功能：注册事件，添加留言删除留言功能：首先在添加li时，给li中增加一个a链接，给所有的a链接注册单击事件，找到a的父节点li，进行删除即可。删除留言功能：注册事件，删除留言运行结果书写代码<!--HTML代码--> <div> <textarea id="textBox"></textarea> <button>留言</button> <ul> </ul> </div>//获取元素 var textBox = document.getElementById("textBox"); var but = document.querySelector("button"); var ul = document.querySelector("ul"); //绑定按钮的单击事件 but.onclick = function() { //判断文本框内容是否为空 if(textBox.value == "") { return alert("内容不能为空") } var li = document.createElement("li"); li.innerHTML=textBox.value;//赋值 //拼接a标签删除按钮 li.innerHTML+="<a href='#' type='javaScript'>删除</a>" /* //把（新旧）的子节点换成新的子节点 ul.replaceChild(li,ul.children[0]); //把li添加到指定的额子节点后面 ul.appendChild(li,ul.children[0]); */ //把li添加到指定的额子节点前面 ul.insertBefore(li,ul.children[0]); //文本框内容清空 textBox.value=""; //a标签的单击事件 var as = document.querySelectorAll("a"); for (var i = 0; i < as.length; i++) { as[i].onclick=function() { ul.removeChild(this.parentNode); } } } -
JS实现鼠标移动展示下拉菜单 案例要求鼠标指针经过菜单时，显示当前下拉框中的内容同时隐藏其他下拉菜单内容编写HTML结构代码鼠标经过，展示当前下拉列表内容运行结果书写代码<!--HTML 放body里面--> <ul class="nav"> <li> <a>微博<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> <li> <a>留言板<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> <li> <a>表白墙<span>⇓</span></a> <ul> <li><a>私信</a></li> <li><a>评论</a></li> <li><a>@我</a></li> </ul> </li> </ul>/*CSS文件*/ * { margin: 0; padding: 0; } li { list-style-type: none; } a { text-decoration: none; font-size: 14px; } .nav { margin: 100px; } .nav>li { position: relative; float: left; width: 80px; height: 41px; text-align: center; border: solid 1px; } .nav li a { display: block; width: 100%; height: 100%; line-height: 41px; color: #333; cursor: pointer; } .nav>li>a:hover { background-color: #eee; } .nav ul { display: none; position: absolute; top: 41px; left: 0; width: 100%; border-left: 1px solid #FECC5B; border-right: 1px solid #FECC5B; } .nav ul li { border-bottom: 1px solid #FECC5B; } .nav ul li a:hover { background-color: #FFF5DA; } //显示标签栏 var ul = document.querySelector("ul"); var Listul = ul.children; //循环所有的li绑定鼠标移入、移除事件 for(var i = 0; i < Listul.length; i++) { Listul[i].onmouseover=function() { //this是指向最近的对象，所以this现在就是li this.children[1].style.display="block"; this.children[0].children[0].innerHTML="⇑"; } //鼠标移出的事件 Listul[i].onmouseout=function() { this.children[1].style.display="none"; this.children[0].children[0].innerHTML="⇓"; } }
-
JS获取父级以及子节点 什么是节点HTML文档可以看作是一个节点树，网页中的所有内容都是节点，一般来说，节点至少拥有nodeType（节点类型）、nodeName（节点名称）和nodeValue（节点值）这3个基本属性。下面列举常见的节点类型：元素节点，nodeType为1属性节点，nodeType为2文本节点，nodeType为3，文本节点包含文字、空格、换行等节点层次一个HTML文件可以看作是所有元素组成的一个节点树，各元素节点之间有级别的划分。节点基础DOM根据HTML中各节点的不同作用可将其分别划分为标签节点（元素节点）文本节点和属性节点 节点之间的层级关系如下：根节点：标签是整个文档的根节点，有且仅有一个父节点：指的是某一个节点的上级节点子节点：指的是某一个节点的下级节点兄弟节点：两个节点同属于一个父级节点子节点兄弟节点可以使用nextElementSibling返回当前元素的下一个兄弟元素节点，previousElementSibling属性返回当前元素的上一个兄弟元素节点，如果找不到则返回null。需要注意的是，这两个属性有兼容性问题，IE9以上才支持。实际开发中，nextSibling和previousSibling属性返回值都包含其他节点，操作不方便，而nextElementSibling和previousElementSibling又有兼容性问题。为了解决兼容性问题，在实际开发中通常使用封装函数来处理兼容性。书写代码//获取父级节点的属性 如： element.parentNode var li = document.querySelector("li"); console.log(li.parentNode); //获取父级节点的属性 //获取子节点的属性 //childNodes 属性:该属性获取全部子节点 无论类型 //children 属性:该属性获取全部子元素节点 值包含元素节点 var ul=document.querySelector("ul"); console.log(ul.childNodes); //获取全部类型的子节点 console.log(ul.children); //只获取 子元素节点 //获取单个子节点 var ul = document.querySelector("ul"); console.log(ul.firstChild); //获取全部类型的第一个子节点 console.log(ul.lastChild); //获取全部类型的最后一个子节点 console.log(ul.firstElementChild); //获取子元素的第一个子节点 console.log(ul.lastElementChild); //获取子元素的最后一个子节点 //获取兄弟节点 //element.nextSibling 该属性获取下一个兄弟节点 //element.previousSibling 该属性获取上一个兄弟节点 var li = document.querySelector("li") console.log(li.nextSibling); console.log(li.previousSibling); //获取兄弟节点的子元素 console.log(li.nextElementSibling); //下一个兄弟节点的子元素 console.log(li.previousElementSibling); //上一个兄弟节点的子元素 运行结果
-
JS实现改变HTML属性样式 演示图 通过JS实现点击修改div盒子以及偶数的li列表的背景颜色书写代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="box" style="border-style: solid;width: 100px;height: 100px;"> 盒子 </div> <div> <ul id="ulone"> <li>第一个li</li> <li>第二个li</li> <li>第三个li</li> <li>第四个li</li> </ul> <button onclick="changcolor()">点击换色</button> </div> <script src="js/index.js"></script> </body> </html>//点击变色代码 function changcolor() { //获取div盒子的属性 var box = document.getElementById("box"); box.style.background = getRandom(0,9); //获取li列表的属性 var lilist = document.getElementsByTagName("li"); for(var i = 0; i < lilist.length; i++) { //判断是否基数 if(i % 2 != 0) { //不是基数时 偶数进行变色 lilist[i].style.background = getRandom(0,9); } } } //随机颜色代码函数 function getRandom(min,max){ var str = "#"; for(var i = 0; i < 6; i++) { str += Math.round(Math.random() * (max - min) + min) } return str; }
-
JS用定时器实现页面滚动当前时间 逻辑思路先实例化日期对象Date()通过时间对象获取 时、分、秒if判断小时，当前时间是早上还是下午使用三元表达式调整时、分、秒的格式时、分、秒小于10时在前面拼接一个字符串的0，并重新赋值文档对象的class标签选择器box的数组第一个的覆盖原有值运行图示书写代码function comtime() { //先实例化日期对象Date() var time = new Date(); //通过时间对象获取 时、分、秒 var hh = time.getHours();//时 var mm = time.getMinutes();//分 var ss = time.getSeconds();//秒 //if判断小时，当前时间是早上还是下午 var Greet; if(hh>0 && hh<12) { Greet = "早上好" } else { Greet = "下午好" } //使用三元表达式调整时、分、秒的格式 //时、分、秒小于10时在前面拼接一个字符串的0，并重新赋值 hh = hh >= 10? hh:"0" + hh mm = mm >= 10? mm:"0" + mm ss = ss >= 10? ss:"0" + ss //document.write(Greet+"当前时间为"+hh+"时"+mm+"分"+ss+"秒<br>"); //文档对象的class标签选择器box的数组第一个的覆盖原有值 document.getElementsByClassName("box")[0].innerHTML="尊敬的用户，"+Greet+"<br>当前时间为"+hh+"时"+mm+"分"+ss+"秒<br>"; //定时器 setTimeout(comtime,1000); } //调用函数 comtime();
-
JS实现猜数字游戏案例 题目需求 使程序随机生成一个1~10之间的数字，并让用户输入一个数字，判断这两个数的大小，如果用户输入的数字大于随机数，那么提示“你猜大了”，如果用户输入的数字小于随机数，则提示“你猜小了”，如果两个数字相等，就提示“恭喜你，猜对了”，结束程序。书写代码 //写一个随机生成一个数的方法 function GetRandom(min,max) { return Math.floor(Math.random() * (max - min + 1) + min); } //随机生成一个1~10之间的数字 var random = GetRandom(1,10); while(true) { //让用户输入一个数字，判断这两个数的大小 var centent =prompt("请输入1-10之间的整数"); if(centent == "") { //如果用户未输入，那么提示“你还没有输入内容” alert("你还没有输入内容！"); } else if(random < centent) { //如果用户输入的数字大于随机数，那么提示“你猜大了” alert("你猜的数字大了，再猜一次"); } else if(random > centent) { //如果用户输入的数字小于随机数，则提示“你猜小了” alert("你猜的数字小了，继续加油"); } else { //如果两个数字相等，就提示“恭喜你，猜对了” alert("恭喜你，猜对了，答案是 " +random); //结束循坏。 break; } } 运行结果
-
JS常用对象字符截取 常用对象之字符截取书写代码var str = new String("欢迎使用JavaScript！"); console.log(str); console.log(str.charAt(3));//str[num]也可以 console.log(str[3]);//html5新增的方式 //ASCLL码 console.log(str.charCodeAt(4)); //索引，找不到返回-1，从前往后 console.log(str.indexOf("a"));//从前往后找返回某个字符在某一字符串第一次出现的位置 //索引，找不到返回-1，从后往前 console.log(str.lastIndexOf("a"));//从后往前找返回某个字符在某一字符串中首次出现的位置 //开始的索引位置，结束的索引位置 console.log(str.substring(1,5));//输出索引1到5的字符，不包含索引为5的字符 console.log(str.substring(0,8)); console.log(str.substring(4,-1)); console.log(str.substring(5,1)); //开始索引的位置 截取几个字符 console.log(str.substr(4,1)); var str1 = "a1b2c3d4e" console.log(str1.split(/\d/)); //查找字符串“heLLo wOrd！”中的L var str = "hello wOrd！"; console.log(str.match(/l/g));//加g全局匹配字符 //替换上边字符串中所有的“o”，“我原本是一个字母” console.log(str.replace(/o/gi,"我原本是一个字母")); //以“o”为分界拆分字符串 console.log(str.split(/o/));
-
JS实例化对象课堂练习 练习1使用构造函数创建铅笔对象，铅笔对象中有厂家名称，笔芯颜色和厂家可以随时改变书写代码document.write("1.使用构造函数创建铅笔对象，铅笔对象中有厂家名称，笔芯颜色和厂家可以随时改变<br>") function pencil(color,factory) { //color:笔芯颜色 factory:厂家 this.color = color; this.factory = factory; }练习2编写人类代码，指出人类都有哪些常见的特征，行为，并通过产生对象来调用这些属性和行为书写代码document.write("<br><br>2.编写人类代码，指出人类都有哪些常见的特征，行为，并通过产生对象来调用这些属性和行为<br>") function Mankind(mankind) { //var that = this; if(mankind) { if(mankind.name) { this.name = mankind.name; } if(mankind.age) { this.age = mankind.age; } if(mankind.height) { this.height = mankind.height; } if(mankind.weight) { this.weight = mankind.weight; } } } //实例化对象 var yaoshi = new Mankind({name:"耀世",age:"19岁",height:"170cm",weight:"128kg"}); console.log(yaoshi); //实例化对象 var xiaobao = new Mankind({name:"小宝",age:"28岁",height:"172cm",weight:"130kg"}) document.write("我的名字："+xiaobao.name+"，今年："+xiaobao.age+"，身高是："+xiaobao.height+"，体重是："+xiaobao.weight+"<br>") //实例化对象 var xiaojing = new Mankind({name:"小静",age:"20岁",height:"168cm",weight:"105kg"}) document.write("我的名字："+xiaojing.name+"，今年："+xiaojing.age+"，身高是："+xiaojing.height+"，体重是："+xiaojing.weight+"<br>") 练习3定义一个盒子对象box，指定盒子的长宽高后，输出该盒子的体积书写代码document.write("<br><br>3.定义一个盒子对象box，指定盒子的长宽高后，输出该盒子的体积<br>") function box(width,height,long) { this.width = width; //宽 this.height = height; //高 this.long = long; //长 //长×宽×高 this.volume=function() { document.write("长:"+this.long+" 宽:"+this.width+" 高:"+this.height+"，该盒子的体积是:"+this.long*this.width*this.height+"<br>"); } } //实例化对象 var box1 = new box(10,10,10); box1.volume(); //实例化对象 var box2 = new box(5,16,3); box2.volume(); //实例化对象 var box3 = new box(10,16,20); box3.volume();运行结果
-
JS基础验证登录案例 案例用html写一个登录界面可自定义的添加css元素，然后通过点击登录按钮进行验证用户输入的数据是否与内置对象的账号密码匹配代码都写有注释 不懂的话下方评论区留言运行结果书写代码<!-HtML+CSS 代码--> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>用户登录 - 星逸</title> <style type="text/css"> /*<!--整体div的布局-->*/ .overall { width: 30%; margin: 0 auto; margin-top: 50px; } /* <!--标题1--> */ .title1 { font-size: 35px; color: #1E90FF; font-weight: bold; } /* <!--标题2--> */ .title2 { font-size: 25px; color: #000000; } /* <!--文本1--> */ .text1 { color: red; font-size: 12px; font-weight: bold; } /* <!--文本2--> */ .text2 { color: #000000; } /* <!--文本输入框的样式--> */ .textBox { width: 200px; height: 25px; margin: 10px; border-style: solid; border-color: #A0CFEC; border-radius: 3%; border-width: 1px; } /* <!--输入框+按钮的div布局--> */ .LogDiv { margin-top: 50px; margin-left: 100px; } /* <!--登录按钮--> */ .LogBox { width: 80px; height: 30px; margin-top: 30px; margin-left: 150px; background-color: #1E90FF; border-style: none; border-radius: 5%; color: aliceblue; } .lab1 { margin-left: 80px; font-size: 10px; color: #1E90FF; border-style: none; outline:none; /* border-style:hidden; */ } </style> </head> <body> <div class="overall"> <span class="title1">星逸blog</span> <span class="title2">| 用户登录</span> <div class="LogDiv"> <form name="loginForm"> <span class="text1">*</span><span class="text2">用户名：</span><input type="text" name="UserName" class="textBox" placeholder="请输入您的用户名" /> <br> <span class="text1">*</span><span class="text2">密 码：</span><input type="password" class="textBox" name="UserPwd" placeholder="请输入您的密码" /> <br> <span class="text1">*</span><span class="text2">邮 箱：</span><input type="text" class="textBox" name="UserEmail" placeholder="请输入您的邮箱" onkeydown="emailing()"/> <br> <input type="text" name="labcentent" class="lab1" onclick="Myemail()" readOnly /> <br> <input type="button" name="subLog" value="登录" class="LogBox" onclick="Loging()"/> </form> </div> </div> </body> <script src="js/index.js"></script> </html> //js文件代码 //创建一个用户对象 var admin= { UserName : "admin", UserPwd : "123456", MyName : "耀世", UserEmail:"58535045@qq.com" } //获取邮箱输入的值并且拼接@qq.com function emailing() { var email = document.loginForm.UserEmail.value; email = email+ "@qq.com"; document.loginForm.labcentent.value = email; } //点击把完整的邮箱地址赋值给邮箱 function Myemail() { var labcentent = document.loginForm.labcentent.value; document.loginForm.UserEmail.value = labcentent; } //验证用户登录 function Loging() { //获取用户文本框输入的值 var name = document.loginForm.UserName.value; var pwd = document.loginForm.UserPwd.value; var email = document.loginForm.UserEmail.value; //判断输入是否为空 if(name == "" || pwd == "" || email == "") { alert("您输入的不完整，请重新输入") return false; } //判断用户名输入的内容 for(var i = 0;i < name.length; i++) { var Len = name.substr(i,1); if(Len >= '0'&&Len<='9'|| Len>='a'&&Len<='z'||Len>='A'&&Len<='Z'||&&Len=='_') { continue; } else { alert("含有非法字符") return false; } } //判断用户输入的密码长度是否小于6 if(pwd.length < 6) { alert("密码长度小于六位 请重新输入"); return false; } //判断邮箱中是否存在艾特@符合 if(email.indexOf("@") == -1) { alert("邮箱必须包含@"); return false; } //判断邮箱@是否位于邮箱.的前面 58535045@qq.com if(email.indexOf("@") > email.indexOf(".")) { alert("邮箱地址符号@必须在符号.前面"); return false; } //判断用户输入的账号密码是否与用户对象的匹配 else if(name == admin.UserName && pwd == admin.UserPwd) { alert("登录成功，欢迎回来：" + admin.MyName); return true; } //其他错误时进行 else { alert("账号或者密码输入不正确，请重新操作"); return false; } }
-
js回顾函数课堂练习 练习1题目要求先声明一个函数getMax()，获取数据类型的方法: typeof变量typeof(变量)书写代码//先声明一个函数getMax()， //获取数据类型的方法: typeof变量typeof(变量) function getMax(num1,num2) { //判断传过来的参数的值类型是否为数字 if(typeof num1 != "number" || typeof num2 != "number") { //NaN 不是数字 return "NaN，其中有值不是数字型"; } //两个数之间作比较 不是num1大 就是 num2大 return num1 > num2 ? num1:num2; } console.log(getMax(100,300));练习2题目要求判断一个年份是否为闰年的方法（闰年366天）书写代码function getRunNian(num1) { //判断传过来的参数的值类型是否为数字 if(typeof num1 != "number") { //NaN 不是数字 return "NaN，其中有值不是数字型"; } else { //闰年是年份除以四可以整除的则是闰年 if(num1 % 4 == 0 && num1 % 100 != 0 || num1 % 100 == 0) { return num1 + " 是闰年" } else { return num1 + " 不是闰年" } } } 练习3题目要求创建一个手机的构造函数,name,color,可以打电话(call),可以发短信(msg)实例化华为、小米、苹果书写代码function ShouJi(name,color) { this.name = name, this.color = color, this.call = function() { console.log(this.name +" 我可以打电话"); }, this.msg = function() { console.log(this.name +" 我可以发短信"); } } var xm = new ShouJi("小米","远峰蓝"); console.log(xm); xm.call(); var hw = new ShouJi("华为","石灰白"); console.log(hw); hw.msg(); var pg = new ShouJi("苹果","暗夜紫"); console.log(pg); pg.call(); pg.msg(); //遍历对象属性及方法 for (var item in xm) { console.log(item);//遍历显示属性名 console.log(xm[item]); }运行结果
-
JavaScript中switch练习示例 定义和用法switch 语句用于基于不同的条件来执行不同的动作。switch 语句是 JavaScript 条件语句的一部分，用于根据不同的条件执行不同的动作。使用 switch 从多个语句块中选择一个执行。switch 语句计算每个表达式。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。switch 语句通常与 break 或 default 关键字一起使用。练习题目要求：写一段程序，使用prompt()函数接收一个0~6之间的整数，输出对应的星期，输入1则输出“星期一”代码书写：var number = prompt("请输入一个0~6之间的整数"); number =parseInt(number); switch(number) { case 0: document.write("今天是星期天"); break; case 1: document.write("今天是星期一"); break; case 2: document.write("今天是星期二"); break; case 3: document.write("今天是星期三"); break; case 4: document.write("今天是星期四"); break; case 5: document.write("今天是星期五"); break; case 6: document.write("今天是星期六"); break; default: document.write("你输入的内容超出范围"); }运行结果：
-
-
-
JavaScript实现阶乘 阶乘公式:n!=n*(n-1)!阶乘的计算方法 阶乘指从1乘以2乘以3乘以4一直乘到所要求的数.例如所要求的数是4,则阶乘式是1×2×3×4,得到的积是24,24就是4的阶乘.例如所要求的数是6,则阶乘式是1×2×3×..×6,得到的积是720,720...练习题目要求：编写一个函数factorial()，该函数实现计算某个数的阶乘代码书写：HTML代码：<!--HTMl代码 放body里面--> <form name="factFrom"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td>请输入一个数：</td> <td><input type="text" name="content"/></td> </tr> <tr> <td>阶乘是：</td> <td><input type="text" name="result" /></td> </tr> <tr> <td colspan="2"><input type="button" name="butjc" value="计算" onclick="FactRes()"/></td> </tr> </table> </form> JavaScript代码：function FactRes() { var content = document.factFrom.content.value;//获取输入的值 if(content == "") { alert("你输入的内容为空"); } else { num = parseInt(content);//吧输入的数转整数 var sum = 1; for (var c = 1; c <= num; c++) { sum*= c; } document.factFrom.result.value = sum; } }运行结果：
-
js编写一个成绩判断示例 成绩判断 if弹窗要求用户输入一个0-100之间的成绩数，成绩大于或等于60则弹窗显示考试成绩及格，小于60分则弹窗显示考试成绩不及格var score; score = Number(prompt("请输入成绩:","")); if(score == ""){ document.write("<h1>内容输入为空</h1>"); } else{ if(score >= 60){ alert("考试成绩及格！"); } else{ alert("考试成绩不及格！"); } }成绩判断进阶 else if弹窗要求用户输入一个0-100之间的成绩数，成绩大于或等于90则弹窗显示你的成绩一级棒啊，大于或等于80则弹窗显示你的成绩优秀啊，大于或等于70则弹窗显示你的成绩优良啊，大于或等于60则弹窗显示你的成绩一般般啊，小于60分则弹窗显示你的成绩一塌糊涂，很差啊！var score; score = Number(prompt("请输入你的成绩：","")); if(score == ""){ document.write("<h1>内容输入为空</h1>"); } else{ if(score >=90){ alert("你的成绩一级棒啊"); } else if(score >=80 && score < 90){ alert("你的成绩优秀啊"); } else if(score >=70 && score < 80){ alert("你的成绩优良啊"); } else if(score >=60 && score < 70){ alert("你的成绩一般般啊"); } else{ alert("你的成绩一塌糊涂，很差啊"); } }
