搜索到
11
篇与
的结果
-
JQ实现选项卡动态内容案例练习 效果演示需求分析需求当我们单击不同的卡片时，显示的内容也不同给选项卡添加动态的导航菜单、图片、内容选项卡导航菜单、图片、介绍通过后台数据源动态显示选择某一人物时，人物的图片和人物的介绍一并展示分析代码块都有简单注释，看不懂的地方百度复制代码后要注意图片路径，替换成你的没有本地JQ代码块的可以通过外链引入JS的数据源就相当于后台，改数据=改前台寄语朋友说：你没有以前潇洒了，似乎眼中凌乱了沧桑我笑了笑，忽然红了一下眼眶成长两个字，连偏旁都没有书写代码JQ外链代码块<script src="https://code.jquery.com/jquery-3.6.1.js"></script>HTML代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>选项卡功能</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> *{ margin: 0 auto; } img:hover{ transform: scale(1.1); } .overAll{ width: 950px; } .title{ height: 50px; background-color: cornflowerblue; } .title ul li{ list-style: none; float: left; font-size: 19px; padding: 10px 20px 10px 20px; cursor: pointer; } .title ul li:hover{ color: #fff; } .centent{ padding: 0px 20px 10px 20px; background-color: #ccc; } .tishibox{ padding-top: 10px; padding-bottom: 10px; } .tishi{ font-size: 20px; font-weight: bolder; } .tishibt{ width: 20px; height: 5px; background-color: #fff; margin-right: 5px; } .centent_img{ text-align: center; margin-bottom: 20px; } .centent_img img{ width: 440px; height: 250px; } .centent_p p{ text-indent: 2em; color: #ff007f; } .centent_lr{ height: 300px; } .centent_left{ float: left; margin-right: 10px; } .centent_right{ float: left; margin-left: 10px; } .centent_qt img{ width: 440px; height: 250px; } .footer{ height: 50px; background-color: aqua; text-align: center; } .footer p{ padding-top: 15px; } .checked{ background-color: #55aa7f; border-radius: 0px 20px 0px 20px; color: white; } </style> </head> <body> <!-- 全局div --> <div class="overAll"> <!-- 导航标题的div --> <div class="title"> <ul> </ul> </div> <!-- 内容的div --> <div class="centent"> <!-- 内容第一个div --> <div class="centent_centent"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物图片</span> </div> <!-- 人物的图片 --> <div class="centent_img"> <!-- <img src="" alt=""> --> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">人物介绍</span> </div> <!-- 人物的介绍 --> <div class="centent_p"> <!-- <p>这个是人物介绍</p> --> </div> </div> <!-- 内容第二个div --> <div class="centent_lr"> <!-- 第二个div里面的左边div --> <div class="centent_left"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">梅利号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/mlh.jpg"> </div> </div> <!-- 第二个div里面的右边div --> <div class="centent_right"> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">阳光号</span> </div> <!-- 图片内容 --> <div class="centent_qt"> <img src="img/ygh.jpg"> </div> </div> </div> <!-- 提示的标题 --> <div class="tishibox"> <span class="tishibt"> </span> <span class="tishi">草帽海贼旗</span> </div> <!-- 图片内容 --> <div class="centent_qt" style="text-align: center;"> <img src="img/caomaohzq.jpg" alt=""> </div> </div> <!-- 底部div --> <div class="footer"> <p>版权声明</p> </div> </div> </body> </html>JavaScript代码块//窗体加载完成事件 $(function(){ //数据源 let admin_nav = [{ title : "路飞", content : "蒙奇·D·路飞，“草帽一伙”的船长，绰号大船长·四皇·“草帽小子”。东海出身，悬赏金30亿贝里。 [83] 是食用了橡胶果实的橡胶人（五老星认为这是人人果实·幻兽种·尼卡形态）。“草帽一伙”的创立者。是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“海贼王”，以此为目标在大海上航行。", images : "img/lufei.jpg" },{ title : "索隆", content : "罗罗诺亚·索隆，“草帽一伙”的战斗员，绰号剑豪“海贼猎人”。东海出身，悬赏金11亿1100万贝里。是使用三把刀战斗的三刀流剑士。“草帽一伙”第一位加入的成员。 [42] 与船长路飞一样是被称作“极恶的世代”中登陆香波地群岛的11位超新星的其中一位。梦想成为“世界第一大剑豪”，以此为目标在大海上航行。", images : "img/suolong.jpg" },{ title : "山治", content : "草帽团厨师，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/shanzhi.jpg" },{ title : "甚平", content : "草帽团船舵手，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/shenping.jpg" },{ title : "娜美", content : "草帽团航海士，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/namei.jpg" },{ title : "罗宾", content : "草帽团考古学家，“草帽一伙”的考古学家，绰号“恶魔之子”。西海出身，悬赏金9亿3000万贝里。食用了花花果实的能力者。“草帽一伙”第六位加入的成员。梦想“找到空白的100年历史”，以此为目标在大海上航行。", images : "img/luobin.jpg" },{ title : "布鲁克", content : "草帽团音乐家，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。 ", images : "img/buluke.jpg" },{ title : "乌索普", content : "草帽团狙击手，“草帽一伙”的航海士，绰号“小贼猫”。东海出身，悬赏金3亿6600万贝里。使用天候棒结合气象科学进行战斗。“草帽一伙”第二位加入的成员。 [41] 梦想绘制“全世界的地图”，以此为目标在大海上航行。", images : "img/wusuopu.jpg" },{ title : "乔巴", content : "草帽团船医，“草帽一伙”的船医，绰号“爱吃棉花糖的乔巴”。伟大航路出身，悬赏金1000贝里。是食用了人人果实的驯鹿。“草帽一伙”第五位加入的成员。梦想“成为万能药”，以此为目标在大海上航行。", images : "img/qiaoba.jpg" },{ title : "弗兰奇", content : "草帽团船匠，“草帽一伙”的船匠，绰号“铁人·弗兰奇”。南海出身，悬赏金3亿9400万贝里。使用改造后的身体以及自制兵器进行战斗。“草帽一伙”第七位加入的成员。梦想“乘坐自己制作的梦想之船绕伟大航路一周”，以此为目标在大海上航行。", images : "img/fulanqi.jpg" }] //渲染页面 把数据源的数据显示出来 for (var i = 0; i < admin_nav.length; i++) { var str = "<li>"+ admin_nav[i].title +"</li>"; $(".title>ul").append(str); } //默认的内容显示 var strP = "<p>"+ admin_nav[0].content +"</p>"; $(".centent_p").html(strP); //默认的图片显示 var strImg = "<img src="+ admin_nav[0].images +">"; $(".centent_img").html(strImg); $(".title>ul>li").eq(0).addClass("checked"); $(".title>ul>li").on("click",function(){ $(".title>ul>li").removeClass("checked"); $(this).addClass("checked"); var index = $(this).index(); //对应的内容显示 var strP = "<p>"+ admin_nav[index].content +"</p>"; $(".centent_p").html(strP); //对应的图片显示 var strImg = "<img src="+ admin_nav[index].images +">"; $(".centent_img").html(strImg); }) })页面效果 -
JQ实现鼠标移入img预览图片练习 效果演示图需求分析需求写一组有效果和没效果的对比分析当鼠标移进图片时变大进入预览图片当鼠标持续移动的时候预览图也要跟进注意复制的代码图片路径肯定不对路径务必更换成你自己的路径JS代码比较复杂 都有注释慢慢看没有JQ代码块 可以使用外链的方式引入<script src="https://code.jquery.com/jquery-3.6.1.js"></script>书写代码HTML代码块<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>图片显示</title> <script src="js/jQuery3.6.1.js"></script> <script src="js/index.js"></script> <style type="text/css"> body{ margin: 0; padding: 40px; background: #fff; font: 80% Arial,Helvetica,sans-serif; color: #555; line-height: 180%; } img{ border: none; } ul,li{ margin: 0; padding: 0; } li{ width: 140px; height: 140px; list-style: none; float: left; display: inline; margin-right: 10px; margin-top: 10px; border: 1px solid #AAAAAA; } #tooltip{ position: absolute; border: 1px solid #ccc; background-color: #333; padding: 2px; display: none; color: #fff; } .toolbox{ width: 100%; height: 300px; } .toolbox img{ width: 140px; height: 140px; } .nobox img{ width: 140px; height: 140px; } .nobox{ width: 100%; height: 300px; } </style> </head> <body> <div class="toolbox"> <h3>有效果</h3> <ul> <li> <a href="img/lufei.jpg" class="tooltip" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" class="tooltip" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" class="tooltip" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" class="tooltip" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" class="tooltip" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" class="tooltip" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" class="tooltip" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" class="tooltip" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" class="tooltip" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" class="tooltip" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> <div class="nobox"> <h3>无效果</h3> <ul> <li> <a href="img/lufei.jpg" title="路飞"> <img src="img/lufei.jpg" alt="路飞"> </a> </li> <li> <a href="img/suolong.jpg" title="索隆"> <img src="img/suolong.jpg" alt="索隆"> </a> </li> <li> <a href="img/shanzhi.jpg" title="山治"> <img src="img/shanzhi.jpg" alt="山治"> </a> </li> <li> <a href="img/namei.jpg" title="娜美"> <img src="img/namei.jpg" alt="娜美"> </a> </li> <li> <a href="img/luobin.jpg" title="罗宾"> <img src="img/luobin.jpg" alt="罗宾"> </a> </li> <li> <a href="img/qiaoba.jpg" title="乔巴"> <img src="img/qiaoba.jpg" alt="乔巴"> </a> </li> <li> <a href="img/buluke.jpg" title="布鲁克"> <img src="img/buluke.jpg" alt="布鲁克"> </a> </li> <li> <a href="img/shenping.jpg" title="甚平"> <img src="img/shenping.jpg" alt="甚平"> </a> </li> <li> <a href="img/fulanqi.jpg" title="弗兰奇"> <img src="img/fulanqi.jpg" alt="弗兰奇"> </a> </li> <li> <a href="img/wusuopu.jpg" title="乌索普"> <img src="img/wusuopu.jpg" alt="乌索普"> </a> </li> </ul> </div> </body> </html>JavaScript代码块$(function(){ var x = 10; var y = 20; //鼠标移入图片的事件绑定 $("a.tooltip").mouseover(function(e){ //鼠标进入元素 //获取标签的title属性 this.myTitle = this.title; //设为空 this.title = ""; //拼接图片标题，一会放于底部 var imgTitle = this.myTitle ? "<br/>" + this.myTitle : ""; //创建div元素 包含img标签 var tooltip = `<div id = 'tooltip'> <img src='`+this.href+`' alt='产品预览图'/>`+imgTitle+`<\/div>`; //把拼接好的字符串追加到文档中 $("body").append(tooltip); //设置x坐标和y坐标并且显示 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }).show("fast"); }).mouseout(function(){ //鼠标离开元素 //鼠标离开的时候把a标签的title属性设置回来 this.title = this.myTitle; //移除样式 $("#tooltip").remove(); }).mousemove(function(e){ //鼠标在元素上持续移动的事件 持续触发 //持续修改，设置div坐标 $("#tooltip").css({ "top":(e.pageY + y) + "px", "left":(e.pageX + x) + "px" }); }); });寄语小孩子一出生就会哭，可见忧伤是人类的本能，笑只是一种能力！ 祝您在代码的路上坚持下去！
-
JQ实现简易的显示和隐藏分类练习 效果演示默认情况下点击了简化之后练习要求默认的情况下显示全部的分类内容，当点击简化了之后，隐藏中间的分类以及保留分类的最后一个让其显示，当又点击更多的时候又将隐藏的分类将其全部显示出来。通过外链式链接JQ代码块<script src="https://code.jquery.com/jquery-3.6.1.js"></script>书写代码HTML的代码块 直接复制粘贴即可<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .Movie{ width: 500px; /* height: 250px; */ padding: 0; border: solid 1px #787878; } .Mheader{ height: 40px; margin: 0; background-color: #ccc; text-align: center; } .Mcontent{ height: 150px; margin: 0; } .Mfooter{ height: 40px; margin: 0; text-align: end; } .Mfooter a{ margin-right: 10px; } .Mheader p{ font-size: 16px; font-weight: bold; padding-top: 5px; margin: 0; } .Mcontent ul{ padding: auto; } .Mcontent ul li{ list-style-type: none; padding: 10px 10px; float: left; } </style> <script src="https://code.jquery.com/jquery-3.6.1.js"></script> </head> <body> <!-- HTML的代码 --> <div class="Movie"> <div class="Mheader"> <p>电影分类</p> </div> <div class="Mcontent"> <ul> <li><a href="#">动漫</a>(1001)</li> <li><a href="#">爱情</a>(1002)</li> <li><a href="#">动作</a>(1003)</li> <li><a href="#">科幻</a>(1004)</li> <li><a href="#">NBA</a>(1005)</li> <li><a href="#">CBA</a>(1006)</li> <li><a href="#">KPL</a>(1007)</li> <li><a href="#">LPL</a>(1008)</li> <li><a href="#">修真</a>(1009)</li> <li><a href="#">恐怖</a>(1010)</li> <li><a href="#">都市</a>(1011)</li> <li><a href="#">其他</a>(1012)</li> </ul> </div> <div class="Mfooter"> <a href="#" class="aBot">简化</a> </div> </div> </body> <script src="js/index.js"></script> </html>JS的代码块 直接复制粘贴即可//电影分类 //获取简化绑定单击事件 $(".aBot").click(function(){ //获取a标签的文本内容 var text = $(this).text(); //判断简化是不是简化 if(text == "简化"){ //隐藏索引从6开始的分类且保留最后一个 $(".Mcontent ul li:gt(6):not(:last)").hide(1000); //修改div盒子的高度 $(".Mcontent").css("height","100px"); //简化修改为更多 $(this).text("更多"); } else{ //将隐藏的分类将其显示 $(".Mcontent ul li:gt(6)").show(1000); //修改div盒子的高度 $(".Mcontent").css("height","150px"); //更多修改为简化 $(this).text("简化"); } })
-
JQ实现标题简略和详细显示的练习 演示图练习要求当鼠标单击标题栏的时候，内容显示出来，单击后又把下方的内容进行隐藏！单击标题栏显示JQ的特点是什么书写代码HTML的代码块 直接复制粘贴即可<!-- HTML代码 --> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jQuery3.6.1.js"></script> <style> .box{ width: 800px; border: solid 1px #000; } .title{ text-align: center; border-bottom: solid 1px #000; } .title h2{ margin: 0; padding: 10px; background-color: aquamarine; } .content{ padding-left: 10px; padding-right: 10px; padding-bottom: 10px; } </style> </head> <body> <div class="box"> <div class="title"> <h2>jQuery 有什么特点？</h2> </div> <div class="content"> <p> 快速获取文档元素：jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。 <br><br> 提供漂亮的页面动态效果：jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。 <br><br> 创建AJAX无刷新网页：AJAX是异步的JavaScript和XML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。 <br><br> 提供对JavaScript语言的增强：jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。 <br><br> 增强的事件处理：jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太多事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。 <br><br> 更改网页内容：jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。 </p> </div> </div> <p>这是第一个段落1111111</p> <p>这是第二个段落2222222</p> <p>这是第三个段落3333333</p> </body> <script src="js/index.js"></script> </html>JS的代码块 直接复制粘贴即可前提是你必须得引入JQ代码块我这里引入的是本地路径//绑定按钮单击事件 $(".title").click(function(){ $(".title").css("borderBottom","solid 1px #000"); $(".content").slideToggle(1000,function(){ if($(".content").css("display") == "none"){ $(".title").css("border","0px"); } }) })//绑定鼠标悬浮时进行的操作 $(".title").hover(function(){ $(".title").css("border-bottom","solid 1px #000"); $(".content").slideToggle(1000,function(){ if($(".content").css("display") == "none"){ $(".title").css("border","0px"); } }) })然后再给p标签的文本内容进行单击一次就进行加大字体的效果//one单次执行事件 //p绑定一个一次性的one事件 $("p").one("click",function(){ //编写一个自定义的动画 点击时fontSize属性+=6px $(this).animate( { "fontSize":"+=6px", },500,function(){ console.log("完成") }) })
-
JQ简易实现模糊查询表格内容练习 演示图需求分析在搜索框输入内容然后点击查询给查询到的内容行添加背景颜色如果查询的结果为空则弹窗提示用户输入内容时回车也可以执行查询书写代码<!-- HTML的代码 --> <div> <input type="text" placeholder="请输入要搜索的内容"> <button class="Search">搜索</button> </div> <table> <thead> <tr> <th>编号</th> <th>用户名</th> <th>性别</th> <th>电子邮件</th> </tr> </thead> <tbody> <tr> <td>20220301</td> <td>小宝</td> <td>男</td> <td>58535045@qq.com</td> </tr> <tr> <td>20220302</td> <td>小静</td> <td>女</td> <td>2643522704@qq.com</td> </tr> <tr> <td>20220303</td> <td>耀世</td> <td>男</td> <td>927463078@qq.com</td> </tr> <tr> <td>20220301</td> <td>小周</td> <td>男</td> <td>2972532486@qq.com</td> </tr> <tr> <td>20220302</td> <td>小李</td> <td>女</td> <td>2643522704@qq.com</td> </tr> </tbody> </table>//JS代码 //获取表格 var table = $("table"); table.css("margin-top","10px"); // table.css("width","500px") //获取标题行 var th = $("table>thead>tr"); //修改样式 th.css({ "background":"#00aaff", "color":"whitesmoke", }) //获取标题的单元格 var thh = $("table>thead>tr>th"); thh.eq(0).css("width","100px") thh.eq(1).css("width","80px") thh.eq(2).css("width","50px") thh.eq(3).css("width","250px") //获取内容行 var tr1 = $("tbody>tr:even"); var tr2 = $("tbody>tr:odd"); tr1.css("background","#ccc") tr2.css("background","#fff") //var td = $("td"); //获取样式为.Search的按钮绑定点击事件 $(".Search").click(function(){ //获取tr行 赋予默认背景 $("tbody>tr:even").css("background","#ccc"); $("tbody>tr:odd").css("background","#fff"); //获取搜索框的内容 var content = $("input").val(); //判断内容输入的字符是否小于0 if(content.length <= 0){ alert("请输入搜索内容再提交"); return; //直接往回滚 } //搜索内容是否在单元行里面 $("tr:contains("+ content +")").css({ //背景颜色设置为红色 "background" : "red", }) }) //获取键盘事件 $(document).keydown(function(e){ //判断按下的按钮是否为回车键 13=回车键 if(e.keyCode == 13){ //执行搜索按钮的单击代码 $(".Search").click(); } })
-
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实例化对象课堂练习 练习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; } }
-
58注册html单页ui练习第三弹 前言练起来 练起来 练起来！第三弹练习来了 看太多书和笔记都不如直接上手操作 下面是第三个单页练习 有兴趣的往下看 练习都是大同小异 主要是为了熟悉div+css的布局 是上手操作多了自然就熟练起来了效果图说明跟练习1，2 一样的布局类型操作 注册表单就用表格table来进行布局，写之前 一定要先划分好网站的各方面区域，首先先写div、头部、导航、主体、主体左边右边、还有底部然后就是对应的css样式 我这里举例html这的主要div css样式我就不展示出来了 具体清下载文件来查看 里面都有注释了的导航栏 图片以及菜单的浮动 主体左边跟主体右边的浮动 一定要注意 然后就是在主体里面插入内容 表格啥的 等等....<div> <!--整体包裹全部div的div--> <div class="header"> <!--模块1头部区域--> </div> <div class="nav"> <!--模块2整体区域--> </div> <div class="main"> <!--模块3整体区域--> <div class="main_1"> <!--模块3-1区域--> </div> <div class="main_2"> <!--模块3-2区域--> </div> </div> <div class="footer"> <!--网站底部区域--> </div> </div> 文件下载需要下方评论区留言才可以查看下载哦隐藏内容，请前往内页查看详情
-
工商注册html单页ui练习第二弹 前言临近期末 该内卷还是要内卷的 为了考试不挂科 所以练起来 看太多书和笔记都不如直接上手操作 下面是第二个单页练习 有兴趣的往下看 练习都是大同小异 主要是为了熟悉div+css的布局效果图说明跟练习1 一样的操作 布局一定要清楚注册表单就用表格table来进行布局，写之前 一定要先划分好网站的各方面区域，首先先写div、头部、导航、主体、主体左边右边、还有底部然后就是对应的css样式 我这里举例html这的主要div css样式我就不展示出来了 具体清下载文件来查看 里面都有注释了的导航栏 图片以及菜单的浮动 主体左边跟主体右边的浮动 一定要注意 然后就是在主体里面插入内容 表格啥的 等等....<div> <!--整体包裹全部div的div--> <div class="header"> <!--模块1头部区域--> </div> <div class="nav"> <!--模块2整体区域--> </div> <div class="main"> <!--模块3整体区域--> <div class="main_1"> <!--模块3-1区域--> </div> <div class="main_2"> <!--模块3-2区域--> </div> </div> <div class="footer"> <!--网站底部区域--> </div> </div> 文件下载需要下方评论区留言才可以查看下载哦隐藏内容，请前往内页查看详情
-
唯品会html单页ui练习第一弹 前言html课程学了好几周了，虽然说学的都是基础，毕竟写的都是这些简单的单页，下面分享一下 课堂上面的练习 仿唯品会的单页 做出这个 期末的html考试基本上是稳了效果图说明写之前 一定要先划分好网站的各方面区域，首先先写div、头部、导航、主体、主体左边右边、还有底部然后就是对应的css样式 我这里举例html这的主要div css样式我就不展示出来了 具体清下载文件来查看 里面都有注释了的导航栏 图片以及菜单的浮动 主体左边跟主体右边的浮动 一定要注意 然后就是在主体里面插入内容 表格啥的 等等....<div> <!--整体包裹全部div的div--> <div class="header"> <!--模块1头部区域--> </div> <div class="nav"> <!--模块2整体区域--> </div> <div class="main"> <!--模块3整体区域--> <div class="main_1"> <!--模块3-1区域--> </div> <div class="main_2"> <!--模块3-2区域--> </div> </div> <div class="footer"> <!--网站底部区域--> </div> </div> 文件下载需要下方评论区留言才可以查看下载哦隐藏内容，请前往内页查看详情
