JavaScript前端原生DOM-案例
案例目录
1. 随机背景
查看代码
Document
2. 用户注册倒计时
查看代码
Document
//button开始隐藏
3. 轮播图
案例一
查看代码
QQ音乐10屏轮播图
挑战云歌单,欢迎你来
案例二
查看代码
QQ音乐轮播图
-
-
-
-
-
-
-
-
-
-
4. 关闭广告
查看代码
Document
x
5. 随机抽取
查看代码
Document
随机点名
名字是:
这里显示姓名
6. 小米搜索框
7. 全选反选
查看代码
全选
商品
商家
价格
小米手机
小米
¥1999
小米净水器
小米
¥4999
小米电视
小米
¥5999
8. 购物车加减操作
查看代码
Document
9. tab栏
查看代码
- 国际大牌◆
- 国妆名牌◆
- 清洁用品◆
- 男士精品
10. 发布留言
查看代码
微博发布

0
/
200
死数据:百里守约
死数据:发布于 2020年12月05日 00:07:54
死数据:111
X
11. 关闭多个广告
查看代码
Document
12. 动态获取页面数据
查看代码
学车在线首页
精品推荐
查看全部
13. 倒计时
查看代码
Document
今天是1970年01月01日
下班倒计时
00
:
25
:
20
现在是18:18:00
14. 跟随鼠标
查看代码
Document
15. 录入员工表格信息
HTML和JavaScript
查看代码
Document
新增学员
姓名:
年龄:
性别:
薪资:
就业城市:
就业榜
学号
姓名
年龄
性别
薪资
就业城市
操作
user.css
查看代码
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color:#721c24;
}
h1 {
text-align: center;
color:#333;
margin: 20px 0;
}
table {
margin:0 auto;
width: 800px;
border-collapse: collapse;
color:#004085;
}
th {
padding: 10px;
background: #cfe5ff;
font-size: 20px;
font-weight: 400;
}
td,th {
border:1px solid #b8daff;
}
td {
padding:10px;
color:#666;
text-align: center;
font-size: 16px;
}
tbody tr {
background: #fff;
}
tbody tr:hover {
background: #e1ecf8;
}
.info {
width: 900px;
margin: 50px auto;
text-align: center;
}
.info input {
width: 80px;
height: 25px;
outline: none;
border-radius: 5px;
border:1px solid #b8daff;
padding-left: 5px;
}
.info button {
width: 60px;
height: 25px;
background-color: #004085;
outline: none;
border: 0;
color: #fff;
cursor: pointer;
border-radius: 5px;
}
.info .age {
width: 50px;
}
16. 购物车
查看代码
购物车全选功能
17. 页面下划出现固定头部
18. 返回顶部
查看代码
Title
头部区域
主体区域
19. 手风扇
20. 过滤敏感词
查看代码
Document
21. 验证用户名
查看代码
Document
22. 拖动模态框
23. 图片放大镜效果
查看代码
Title
24. 缓动动画animate.js
查看代码









