- 博客(20)
- 收藏
- 关注
RSS订阅原创 实现综合案例的注册、登录和跳转到主页面
<!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:33:01
151
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"> &l...
2022-05-29 15:47:00
67
原创 利用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 12:23:04
112
原创 提交按钮模块
let form = document.querySelector('form') form.addEventListener('submit', function (e) { if (!verifyUsername()) { e.preventDefault() } if (!verifyPhone()) { e.preventDefault() } ...
2022-05-25 12:06:12
61
原创 利用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"> <tit...
2022-05-19 16:08:45
55
原创 验证用户名信息是否有效
<!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:04:49
117
原创 实现进度条效果案例
<!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:19:05
61
原创 渲染学生信息案例
<!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:09:19
50
原创 图片跟随鼠标移动
<!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-11 13:41:20
43
原创 实现随机点名效果
<!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-08 15:32:51
67
原创 文字阴影与盒子阴影的对比效果
<!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 20:05:45
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"> <title&...
2022-04-27 18:27:12
85
原创 实现发送短信倒计时的效果
<!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 21:54:26
95
原创 完成秒杀/倒计时效果
<body> <div> <span class="hour">时</span> <span class="minute">分</span> <span class="second">秒</span> </div> <script> var hour=document.querySelec...
2022-04-20 21:30:11
48
原创 实现网页布局
<style> *{ margin : 0; padding : 0; } li { list-style: none; } .top { height : 50px; background-color : gray ; } .banner { width : 980px; height : 150px; background-color : gray; margin : 10px auto; } .box { width : 980px; margin
2022-04-17 13:16:57
34
原创 实现动态生成表格
<body> <table cellspacing="0"> <thead> <tr> <th>角色</th> <th>法术</th> <th>法力</th> <th>操作</th&g...
2022-04-10 12:59:53
39
原创 实现表格全选和取消全选功能
<script> var j_cbAll = document.getElementByid('j_cbAll'); var j_tbs= document.getElementByid('j_tb').getElementsByTagName('input'); j_cbAll.onclick = function() { for (var i=0; i<j_tbs.length; i++) { j_tbs[i].checked = this.checked; } ...
2022-04-10 12:43:24
99
原创 实现百度换肤效果
<body> <ul class="baidu"> <li> <img src ="images/1.jpg"> </li> <li> <img src ="images/2.jpg"> </li> <li> <img src ="images/3.jpg"> </li> <li> <img src ="images/4.jpg"> </
2022-04-07 17:04:24
49
原创 利用div盒子实现仿百度首页的效果
<body> <div class="logo"> <img src="./im/bdlogo.gif" alt=""> </div> <div class="nav"> <a href="#">新 闻</a> <strong>网 页</strong> <a href="#">贴 ...
2022-04-07 11:18:30
142
原创 分时问候显示不同图片
<!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-05 12:45:21
38
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人