动态网页
egg55
这个作者很懒,什么都没留下…
展开
-
综合案例,index,register,login
indexlet li=document.querySelector('.xtx_navs li:first-child');let obj=JSON.parse(localStorage.getItem('data'));if(obj){ li.innerHTML=`<a href="#">您好${obj.username}用户!</a>`;}registerlet icon=document.querySelector('.icon-queren'.原创 2022-05-28 10:38:32 · 516 阅读 · 0 评论 -
分页按钮过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> li{ float:left; width:30px; list-style:none; height:30px; border:1px solid re.原创 2022-05-28 10:34:29 · 108 阅读 · 0 评论 -
旋转中心点案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ overflow:hidden; width:200px; height:200px; border:1px solid hotpink; ma.原创 2022-05-23 13:10:36 · 117 阅读 · 0 评论 -
盒子居中效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ position:relative; width:600px; height:600px; background-color: red; } p.原创 2022-05-20 10:20:04 · 106 阅读 · 0 评论 -
用户名验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>课堂案例-验证用户.原创 2022-05-20 09:22:12 · 109 阅读 · 0 评论 -
进度条过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .bar{ width:150px; height:15px; border:1px solid red; border-ra.原创 2022-05-13 15:44:23 · 107 阅读 · 0 评论 -
渲染学生信息案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link href="css/style.css" rel="stylesheet"></head><body><h1>新增学员</h1><div class="info"&.原创 2022-05-12 11:26:27 · 229 阅读 · 0 评论 -
跟随鼠标移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>案例分析:跟随鼠标.原创 2022-05-11 20:22:08 · 51 阅读 · 0 评论 -
随机点名扩展
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>随.原创 2022-05-04 20:24:10 · 82 阅读 · 0 评论 -
实现盒子和文字的阴影效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> .div1{ font-size: 100px; font-family: 华文行楷; color: #87dfeb; fon.原创 2022-05-02 08:12:42 · 375 阅读 · 0 评论 -
随机点名效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div { width: 200px; height: 60px; border: 5px solid hotpink; text-align: center;.原创 2022-04-25 10:54:58 · 105 阅读 · 0 评论 -
倒计时短信
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> 验证码:<input type="text"><button>发送</button><script> var btn=document.que.原创 2022-04-24 21:03:28 · 53 阅读 · 0 评论 -
倒计时案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><style> div { margin: 200px; } span { /* 转换为行内块元素 */ display: inline-block; width: 40px; heigh.原创 2022-04-20 20:16:34 · 62 阅读 · 0 评论 -
一个网页布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> li{ list-style:none; } *{ margin:0; padding:0; } .top{ .原创 2022-04-18 15:50:46 · 51 阅读 · 0 评论 -
动态生成表格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: .原创 2022-04-10 10:40:05 · 76 阅读 · 0 评论 -
百度换肤效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>百.原创 2022-04-10 10:10:41 · 216 阅读 · 0 评论 -
实现表格全选和取消全选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl.原创 2022-04-10 09:33:44 · 197 阅读 · 0 评论 -
根据时间显示不同图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div>12345</div> <img src="#"> <script> var img=document.原创 2022-04-03 10:11:36 · 266 阅读 · 0 评论 -
显示当前系统时间
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ background-color: #55585a; color:#ffffff; width:250px; tex.原创 2022-04-03 10:06:54 · 178 阅读 · 0 评论