案例
吴机智
自学前端的萌新~
向行业大佬们学习~
展开
-
面向对象 tab栏切换 案例
功能:点击 tab栏,可以切换效果.点击 + 号, 可以添加 tab 项和内容项.点击 x 号, 可以删除当前的tab项和内容项.双击tab项文字或者内容项文字,可以修改里面的文字内容.html部分<body> <main> <h4> Js 面向对象 动态添加标签页 </h4> <div class="tabsbox" id="tab"> .原创 2021-03-19 02:49:24 · 606 阅读 · 2 评论 -
购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"/> <s.原创 2020-11-04 17:35:54 · 71 阅读 · 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>信.原创 2020-11-04 17:35:19 · 151 阅读 · 0 评论 -
百度搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> <style> .active{ background-color: pink; } </style.原创 2020-11-04 17:34:36 · 114 阅读 · 0 评论 -
选项卡及删除按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.js"></script> <style> ul{ border:1px solid; width: 300.原创 2020-11-04 17:33:23 · 165 阅读 · 0 评论 -
注册页验证
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> span { color: red; ...原创 2020-09-11 09:58:00 · 68 阅读 · 0 评论 -
过滤敏感词
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul, li { list-style:.原创 2020-09-11 09:57:25 · 59 阅读 · 0 评论 -
点击按钮改变样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...原创 2020-09-10 16:24:15 · 230 阅读 · 0 评论 -
点击按钮生成新闻
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button...原创 2020-09-10 16:13:41 · 86 阅读 · 0 评论 -
点击按钮修改样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { ...原创 2020-09-10 16:13:29 · 400 阅读 · 0 评论 -
多个的展开收起
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 300px;heigh...原创 2020-09-10 16:13:16 · 113 阅读 · 0 评论 -
模拟购物车
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button { ...原创 2020-09-10 16:13:01 · 48 阅读 · 0 评论 -
加减按钮改变字体大小
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> p{ ...原创 2020-09-10 16:12:48 · 239 阅读 · 0 评论 -
简易计算器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input...原创 2020-09-10 16:12:30 · 57 阅读 · 0 评论 -
九九乘法表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <...原创 2020-09-10 16:12:11 · 41 阅读 · 0 评论 -
开关灯
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <img s...原创 2020-09-10 16:11:57 · 40 阅读 · 0 评论 -
切换图片(按钮)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ ...原创 2020-09-10 16:11:41 · 74 阅读 · 0 评论 -
切换图片(箭头)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ ...原创 2020-09-10 16:00:04 · 1063 阅读 · 0 评论 -
切换图片(箭头+圆点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { ...原创 2020-09-10 15:59:48 · 294 阅读 · 0 评论 -
切换图片(输入框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img{ ...原创 2020-09-10 15:59:35 · 132 阅读 · 0 评论 -
切换图片(圆点)
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...原创 2020-09-10 15:59:19 · 236 阅读 · 0 评论 -
全选反选不选
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="button" value=...原创 2020-09-10 15:58:59 · 122 阅读 · 1 评论 -
网站换肤
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <button>黄色</button>...原创 2020-09-10 15:58:42 · 46 阅读 · 0 评论 -
显示隐藏
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> li{ width: 100px; ...原创 2020-09-10 15:50:03 · 42 阅读 · 0 评论 -
选项卡嵌套
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; list-style: none; } #warp { ...原创 2020-09-10 15:49:33 · 85 阅读 · 0 评论 -
选项卡
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 200px; ...原创 2020-09-10 15:49:16 · 48 阅读 · 0 评论 -
点击相对应的块
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul,li{ padding: 0; ...原创 2020-09-10 15:48:44 · 65 阅读 · 0 评论 -
表格添加删除
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> ul,li{ padding: 0; ...原创 2020-09-10 15:48:30 · 43 阅读 · 0 评论 -
抽奖效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div&...原创 2020-09-10 15:48:14 · 62 阅读 · 0 评论 -
倒计时
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { background-color:...原创 2020-09-10 15:48:00 · 74 阅读 · 0 评论 -
发送验证码按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div { ...原创 2020-09-10 15:47:37 · 252 阅读 · 0 评论 -
关不掉的广告
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { ...原创 2020-09-10 15:47:15 · 56 阅读 · 0 评论 -
滚动的滑块
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; ...原创 2020-09-10 15:46:59 · 76 阅读 · 0 评论 -
滚动的滑块来回
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; ...原创 2020-09-10 15:46:45 · 71 阅读 · 0 评论 -
滚动置顶
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> div{ width: 100%; ...原创 2020-09-10 15:46:17 · 100 阅读 · 0 评论 -
切换图片(随机按顺序)
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; ...原创 2020-09-10 15:46:02 · 163 阅读 · 0 评论 -
切换图片(间隔切换)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <img src=.原创 2020-09-10 15:45:49 · 71 阅读 · 0 评论 -
生成不重复随机数
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script> // 获取6位随.原创 2020-09-10 15:45:30 · 148 阅读 · 0 评论 -
添加表格
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <input type="text"> &l...原创 2020-09-10 15:45:02 · 91 阅读 · 0 评论 -
图片懒加载
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> img { width: 200px; .原创 2020-09-10 15:44:45 · 41 阅读 · 0 评论