前端
文章平均质量分 64
_小鹰
这个作者很懒,什么都没留下…
展开
-
【前端 HTML+CSS+JavaScript(JS)】DOM练习-购物车的实现 ~ElementSibling parentElement children 事件的绑定与带注释/总结
效果:总结:1、event.target和this似乎一致,自行查阅。2、绑定事件方法:在带有括号(需要传参)时,一定要在外面带上引号,因为不加引号的话意为直接调用函数。<input type="button" value="-" onclick="sub(event)" class="subBtns">3、css中的类属性为class,在js中设置dom元素的class要使用className,其他的例如border-color要改为驼峰规则borderColor。4、事件的绑原创 2022-02-17 22:11:25 · 1150 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片在DIV间移动的实现-removeChild cloneNode position append 上下对齐 带注释/总结
总结:1、让元素上下对齐的方法:①让图片上下对齐用vertical-align:cender;②让其他元素上下对齐设置line-height与height一样。2、CSS中设置颜色为==#fff时,而这个样式在JS中则是用字符串"rgb(255, 255, 255)"==存储的,我判断是否被选中就是判断边框颜色来筛选选中的图片的,代码如下:if(imgsDoms[i].style.borderColor == "rgb(0, 0, 0)"){}3、/* ★★★这个b原创 2022-02-17 21:36:45 · 958 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-createElement appendChild remove实现开关按钮 带注释/总结
作业要去:实现一个简单的开关按钮:当点击按钮之后,按钮的文本修改为 “活力全----关” , 并且删除下面的图片。再点击,将按钮的文本修改回来,并且再次添加一张图片。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3-开关</title> </head> <body> <div id="b-bo原创 2022-02-17 20:20:58 · 329 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-append remove实现排队买鸡蛋 带注释/总结
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业2-排队</title> <style type="text/css"> #b-box{ margin: 50px auto; width: 500px; text-align: center; } #folk{ marg原创 2022-02-17 20:12:42 · 302 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-数字预警的实现 带注释/总结
作业要求:实现数字预警。逢7…页面效果:要求:用户随便输入一个数字,可以重复,将用户输入的数字罗列在页面中,如果这个数字是7的倍数就将字体调整为红色,并且字体大于其他字体。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> 请输原创 2022-02-16 21:33:32 · 286 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onkeydown键盘事件-用wasd移动图片的位置 带注释/总结
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业6-键盘事件</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> *{原创 2022-02-15 22:42:39 · 392 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-onmouseover事件 鼠标悬浮切换图片 带注释/总结
效果:鼠标放到图片上图片变化代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业5-mouse事件</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> </head> <body&原创 2022-02-15 22:32:39 · 722 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-图片切换的实现 带注释/总结
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3-图片切换</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style type="text/css"> #b-box原创 2022-02-15 22:19:44 · 263 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-checkbox实现全选 带注释/总结
作业要求:效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业2-全选</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> <style type="text/css">原创 2022-02-14 21:16:58 · 229 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】DOM练习-用户名密码校验(表单校验) 带注释/总结
作业要求:效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业1-表单校验</title> <script src="utility.js" type="text/javascript" charset="utf-8"></script> </head> <body> <原创 2022-02-14 21:15:03 · 783 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】Array数组的声明定义使用以及遍历方法练习 带注释/总结
作业要求:效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var names = ["唐僧","齐天大圣-大师兄","天蓬元帅-二师兄","卷帘大将-三师弟"]; na原创 2022-02-14 21:16:52 · 491 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】活了多少天计算器的实现 带注释/总结
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p> 你的生日: <input type="text" size="4" id="year" >年 <input type="text" size="2" id=原创 2022-02-14 21:16:44 · 738 阅读 · 0 评论 -
【前端 HTML+CSS+JavaScript(JS)】Object对象的声明定义及使用方法练习 带注释/总结
一、Object对象练习1作业要求:效果:用两种方法,声明定义一个Object对象,并调用。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> var hero1 = { //声原创 2022-02-14 21:16:34 · 619 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】自定义函数的练习 带注释/总结
一、自定义函数连接字符串效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>字符串连接函数</title> </head> <body> <script type="text/javascript"> // concatenate("love","i","you");原创 2022-02-14 21:16:17 · 514 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现 可连加连减 带注释/总结
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title> <script type="text/javascript"> // 初始状态,记得每次按等号要还原 var t1 = 0, t2 = 0, flag = 0; //初始0 加法1 减法2 乘法3 除法4 var equ原创 2022-02-14 21:16:10 · 919 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】判断水仙花数的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>判断水仙花数</title> <style type="text/css"> #res-area{ overflow: auto; } </style> </head> <body> <原创 2022-02-14 21:16:04 · 353 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】求两个数最大公约数的实现 不借助中间变量实现两数交换
效果:代码:似乎有点bug。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>最大公约数</title> </head> <body> <script type="text/javascript"> function cal(){ var res = 0; // ★★★★★★★★原创 2022-02-14 21:15:59 · 269 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】判断某个数是否为质数的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>判断质数</title> </head> <body> <script type="text/javascript"> function cal(){ var flag = 1; var num = parseInt(d原创 2022-02-14 21:15:51 · 661 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】判断某年某月的天数的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>月的天数</title> </head> <body> <script type="text/javascript"> var flag; function estimate(){ flag = 0; var ye原创 2022-02-12 08:59:49 · 601 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】简易工资计算器的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算工资</title> <style type="text/css"> #b-box{ width: 1024px; text-align: center; } .modual,#cal{ font-size: 14px;原创 2022-02-12 08:59:42 · 1330 阅读 · 1 评论 -
【前端】【HTML+CSS+JavaScript(JS)】简易加密器的实现
效果:每一位+5对6位数字进行加密。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>加密</title> <style type="text/css"> #line-1,#line-2{ margin-top: 20px; } #line-1 input{ width: 30px; t原创 2022-02-12 08:59:33 · 442 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】简易登陆界面的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录界面</title> <style type="text/css"> *{ font-family: "微软雅黑"; border: 0px solid #464646; margin-top: 15px; } #log原创 2022-02-12 08:59:24 · 2808 阅读 · 1 评论 -
【前端】【HTML+CSS+JavaScript(JS)】<select>标签添加onchange事件的应用
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3</title> </head> <body> <style type="text/css"> #b-box{ margin-top: 200px; text-align: center; border原创 2022-02-12 08:59:17 · 814 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】判断闰年/平年的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>判断闰年/平年</title> <style type="text/css"> *{ border: 0px solid; text-align: center; font-family: "微软雅黑"; } #b-box{原创 2022-02-12 08:59:07 · 1086 阅读 · 0 评论 -
【前端】【HTML+CSS+JavaScript(JS)】简易计算器的实现
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>calculator</title> <style type="text/css"> *{ margin: 0px; padding: 0px; border: 0px solid; font-size: "微软雅黑"; }原创 2022-02-12 08:58:54 · 236 阅读 · 0 评论 -
【前端】<select>标签添加onchange事件【HTML+CSS+JavaScript(JS)】
效果:利用onchange事件绑定函数,以实现点击下拉框(下拉框选中内容修改)时,进行相关操作。代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>give-a-whirl</title> </head> <body> <script type="text/javascript"> function原创 2022-02-12 08:58:47 · 4348 阅读 · 0 评论 -
【前端】利用html+css实现脚手架企业页面【HTML+CSS+JavaScript(JS)】
效果:代码:免费下载:https://download.csdn.net/download/cc2855816075/80144740注意:1.float浮动的元素会脱离标准流,当一个div中的所有元素都脱标时,div将失去大小,因为没有元素将它撑开撑大,所以常见的解决办法有两个:①在原处放一个和他一样大小的div帮他占位置。②利用clear:both消除float浮动带来的影响。<!-- ★★★去除float造成的影响★★★ --> <div style="cle原创 2022-02-12 08:58:37 · 272 阅读 · 0 评论 -
【前端】<div>的排版练习【HTML+CSS+JavaScript(JS)】
效果:代码:免费下载:https://download.csdn.net/download/cc2855816075/80144175原创 2022-02-12 08:58:22 · 98 阅读 · 0 评论 -
【前端】html+css实现鼠标悬浮变色的按钮,消除加粗边框发生抖动现象的两种方法 hover【HTML+CSS+JavaScript(JS)】
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>zuoye4</title> <style type="text/css"> div{ display: inline-block; margin: 5px 10px; } input:hover{ border-color: #FF原创 2022-02-11 19:47:02 · 2550 阅读 · 0 评论 -
【前端】html+css实现鼠标悬浮变色的按钮 hover【HTML+CSS+JavaScript(JS)】
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>zuoye3</title> <style type="text/css"> input{ border-radius: 10px; font-size: 15px; width: auto; height: auto; }原创 2022-02-11 19:40:10 · 6139 阅读 · 0 评论 -
【前端】html+css实现鼠标悬浮/选中变色的翻页栏 hover active【HTML+CSS+JavaScript(JS)】
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业2</title> <style type="text/css"> div{ display: inline-block; width: 30px; height: 30px; background-color: #EEEEEE;原创 2022-02-11 19:34:58 · 543 阅读 · 0 评论 -
【前端】html+css实现鼠标悬浮变色导航栏 hover【HTML+CSS+JavaScript(JS)】
效果:代码:html文件:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业1</title> <link rel="stylesheet" href="zuoye1.css"/> </head> <body> <div class="box"> <div class="to原创 2022-02-11 19:29:14 · 3279 阅读 · 0 评论 -
【前端】利用HTML标签+css实现百度页面【HTML+CSS+JavaScript(JS)】
效果:免费下载:https://download.csdn.net/download/cc2855816075/80141329代码:(图片见上方链接↑)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>百度</title> <style type="text/css"> #nvgn-bar{/*最上方导航栏*/原创 2022-02-11 19:17:07 · 876 阅读 · 0 评论 -
【前端】利用HTML标签实现个人简历界面 <table>【HTML+CSS+JavaScript(JS)】
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>作业3-简历</title> </head> <body> <table border="0" align="center" width="1024"> <tr> <!--4列--> <th原创 2022-02-11 19:05:53 · 983 阅读 · 0 评论 -
【前端】利用HTML标签实现信息管理系统界面 <iframe>【HTML+CSS+JavaScript(JS)】
效果:代码:免费下载:https://download.csdn.net/download/cc2855816075/80138441注意:1.多个input的radio,设置他们的name属性相同,可以实现单选。2.<select multiple size=“3”>中的size表示下拉框的可视区域为三行。3.readonly只读属性,存在即生效,还有disabled,checked,selected。4.<tr colspan=“2” align=“center”&原创 2022-02-11 18:52:16 · 1275 阅读 · 0 评论 -
【前端】利用HTML标签 实现简单用户登录界面 表单<form> <input>【HTML+CSS+JavaScript(JS)】
效果:代码:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>登录页面</title> </head> <body> <form><!--注意需要用table--> <table align="center" width="512" style="border:1px solid;"&原创 2022-02-11 18:15:47 · 3009 阅读 · 1 评论 -
【前端】利用HTML标签制作个人简历页面【HTML+CSS+JavaScript(JS)】
利用HTML标签制作个人简历页面,表格,无序列表,有序列表。tb tr td th, ul li,ol li。原创 2022-02-11 18:03:24 · 2166 阅读 · 0 评论 -
【前端】HTML标签的应用 ,列表ul、li【HTML+CSS+JavaScript(JS)】
【前端】HTML标签的应用 ,列表ul、li【HTML+CSS+JavaScript(JS)】原创 2022-02-11 17:17:44 · 246 阅读 · 0 评论