搜索到
17
篇与
的结果
-
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用定时器实现页面滚动当前时间 逻辑思路先实例化日期对象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题目要求先声明一个函数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("你的成绩一塌糊涂，很差啊"); } }
-
js编写一个简易的计算器 认识算数运算符写计算器之前先简单的了解一下算术运算符计算数大小的计算器通过弹窗要用户输入第一个数和第二个数，然这两个数进行比较大小，然后输出两个数中最大的那个数//声明变量并且通过弹窗获取输入的内容赋值 var num1 = Number(prompt("请输入第一个数")); var num2 = Number(prompt("请输入第二个数")); //判断输入内容是否为空 if(num1 == "" && num2 == "") { document.write("内容为空 请重新输入"); } else { //判断第一个数是否比第二个数大 if(num1 > num2) { document.write("<h3>"); document.write(num1 + ",第一个数最大"); document.write("</h3>"); } else { document.write("<h3>"); document.write(num2 + ",第二个数最大"); document.write("</h3>"); } }计算加法的计算器用js写一个加法计算器 要求用户输入第一个数和第二个数 然后让两个数相加 最后输出两个数的和<!--html代码--> <h3>简单的加法计算器</h3> <form name="GetBox"> 加数：<input type="text" id=text1 name="number1"/> 被加数：<input type="text" id=text1 name="number2"/> <input type="button" value="求和" onclick="GetJia()"> 结果：<input type="text" id=text1 name="number3"/> </form> <br />//javascript代码 function GetJia(){ var num1 = document.GetBox.number1.value; var num2 = document.GetBox.number2.value; if(num1 == "" || num2 == "") { alert("输入内容不完整 请重新输入") } else { var num3 = parseFloat(num1) + parseFloat(num2); document.GetBox.number3.value = num3; } }计算加减乘除余的计算器用js写一个拥有加减乘除还有余的简易计算器 要求用户输入第一个数和第二个数 然后让两个数相加 相减 相乘 相除 取余 最后输出两个数的值<!--html代码--> <h3>简单的加减乘除计算器</h3> <form name="GetPro"> <table> <tr> <td width="100px">第一个数：</td> <td width="100px">第二个数：</td> <td width="100px">结果：</td> </tr> <tr> <td> <input type="text" id= text1 name="num1"> </td> <td> <input type="text" id= text1 name="num2"> </td> <td> <input type="text" id= text1 name="num3"> </td> </tr> <tr> <td>运算类型：</td> <td colspan="2"> <input type="button" value="+" onclick="Getjjcc('+')"> <input type="button" value="-" onclick="Getjjcc('-')"> <input type="button" value="*" onclick="Getjjcc('*')"> <input type="button" value="/" onclick="Getjjcc('/')"> <input type="button" value="%" onclick="Getjjcc('%')"> </td> </tr> </table> </form>//javascript代码 function Getjjcc(sign) { var pronum1 = document.GetPro.num1.value; var pronum2 = document.GetPro.num2.value; if(pronum1 == "" || pronum2 == "") { alert("输入内容不完整 请重新输入") } else { //转小数浮点格式 var firstValue = parseFloat(pronum1); var secondValue = parseFloat(pronum2); //结果 var resultValue; if(sign=="+") { resultValue = firstValue + secondValue; } else if(sign=="-") { resultValue = firstValue - secondValue; } else if(sign=="*") { resultValue = firstValue * secondValue; } else if(sign=="/") { resultValue = firstValue / secondValue; } else if(sign=="%") { resultValue = firstValue % secondValue; } document.GetPro.num3.value = resultValue; } }eval函数表达式计算eval() 函数计算 JavaScript 字符串，并把它作为脚本代码来执行。如果参数是一个表达式，eval() 函数将执行表达式。如果参数是Javascript语句，eval()将执行 Javascript 语句<!--html代码--> <h3>eval函数的用法</h3> <form name="FrmEval"> 表达式：<input type="text" name="num1"> <input type="button" value="结果为" onclick="GetEval()"> <input type="text" id= text1 name="num2"> </form>//javascript代码 function GetEval() { var num1 = document.FrmEval.num1.value; if(num1 == "") { alert("输入内容不完整 请重新输入") } else { document.FrmEval.num2.value = eval(num1); } }
-
js面向对象属性方法增删改查 图示//创建一个对象//创建一个学生对象 var student = { name : "YaoShi", age : 18, sex : '男', height : "170cm", weight : "128kg", hobby : function() { return "我是练习两年半时长的个人篮球练习生" }, speciality : function() { return "听音乐、打游戏、吃饭、睡觉" } }//给对象添加属性和方法//添加 student.qq = "58535045" //添加QQ号属性 student.wx = "58535045" //添加微信号属性 student.title = function() //添加一个标题的方法 { console.log("标题") } console.log(student);删除对象的属性或方法//删除 delete student.wx; //删除属性 delete student.speciality; //删除方法 /*删除方法 直接delete 删除什么对象的什么方法 后面不用加括号*/修改对象的属性或方法//修改（重新赋值 覆盖原有的值） student.qq = "123465" //添加QQ号属性 student.wx = "123456" //添加微信号属性 student.title = function() //添加一个标题的方法 { console.log("修改后的标题") }查询对象的属性和方法//直接就是输出调用就行了 console.log(student);课堂练习要求创建一个学生对象姓名:李华，年龄: 20岁，身高: 185cm，会跑步:50米跑6秒，读取出其属性及调用其方法李华改名为李明，又学会了一项新的运动打蓝球，要求调用他打篮球的方法。然后不经常跑步了，把跑步方法删除，输出整个对象 //课堂练习 var UserName = { //先自定义对象 声明属性并且赋值 name:"李华", age: 18, height: "185cm", hobby:function() { return "会跑步：50米跑六秒" } } //输出 console.log(UserName); console.log("姓名："+UserName.name,"年龄："+UserName.age,"身高："+UserName.height); console.log(UserName.hobby()); //修改名字 UserName.name = "李明"; //学会新技能篮球(新增方法) UserName.skill=function() { return "练习两年半的篮球，出神入化，无所不能" } //输出打篮球的方法 console.log("姓名："+UserName.name,"年龄："+UserName.age,"身高："+UserName.height); console.log(UserName.skill()); //由于不经常跑步 把跑步方法删除 delete UserName.hobby; //输出整个方法 console.log(UserName);
-
js创建自定义对象实例 示例图代码//创建一个自定义对象 var Car = new Object(); Car.name = "兰博基尼"; Car.color = "绿色"; Car.price ="100w"; Car.disposition = "顶配"; Car.Hasten = function() { document.write("<br>百公里加速只需3.9s"); } console.log(Car); document.write("这是一辆：" + Car.name + "  颜色：" + Car.color + "<br>车落地价：" + Car.price + "    车配置为：" + Car.disposition); Car.Hasten();
