- 博客(20)
- 收藏
- 关注
原创 实现综合案例的注册(register)、登录(login)和跳转到主页面(index)的功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>小兔鲜案例</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> ......
2022-06-08 20:38:25 1453 1
原创 实现分页按钮的缩放效果 (结合过渡属性)
<!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-06-08 20:32:08 76
原创 案例实现: 利用2D旋转rotate设置旋转中心点
<!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-25 14:13:12 90
原创 完成正则案例需求八:提交按钮模块
// 需求八:提交按钮模块 // 使用 submit 提交事件 // 如果上面的每个模块,返回的是 false 则 阻止提交 // 如果没有勾选同意协议,则提示 需要勾选 // 在提交之前先验证 let form = document.querySelector('form') form.addEventListener('submit', function (e) { if (!verifyUs...
2022-05-25 14:10:00 65
原创 利用2D转换的位移属性实现盒子居中效果
<!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-19 16:57:06 48
原创 验证用户名信息是否有效
<!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"> <tit...
2022-05-19 16:50:55 57
原创 综合案例:渲染学生信息案例
<!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"> <tit...
2022-05-14 17:06:22 46
原创 实现进度条效果案例
<!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"> <tit...
2022-05-14 17:04:30 56
原创 完成图片跟随鼠标移动案例
<!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>Doc...
2022-05-11 14:58:32 74
原创 案例拓展: 实现随机点名的效果
<!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"> <tit...
2022-05-08 23:07:28 55
原创 分别利用 box-shadow 和 text-shadow 属性实现盒子阴影和文字阴影效果
<!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-02 23:13:15 100
原创 实现随机点名的效果
<!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>Doc...
2022-04-27 18:07:03 88
原创 实现发送短信倒计时的效果
<!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-04-22 08:02:16 73
原创 实现京东秒杀效果
<!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-04-21 08:20:17 120
原创 H5:设计网页布局
<!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>Doc...
2022-04-19 21:57:18 299
原创 实现动态生成表格的效果
<body> <table cellspacing="0"> <thead> <tr> <th>角色</th> <th>法术</th> <th>法力</th> <th>操作</th&g...
2022-04-10 15:16:49 228
原创 实现表格全选和取消全选功能
<body> <div class="wrap"> <table> <thead> <tr> <th> <!-- 开始默认补选中 checked="checked" --> <input type="che...
2022-04-10 15:13:14 287
原创 利用div盒子实现仿百度首页的效果
<!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-04-07 12:24:12 71
原创 实现百度换肤效果
<!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-04-07 12:22:59 51
原创 分时问候显示不同图片效果
<!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"> <tit...
2022-04-05 13:14:45 76
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人