- 博客(12)
- 收藏
- 关注
原创 课堂综合案例
运行代码:<script> //需求①: 发送验证码 // 用户点击之后,显示 05秒后重新获取 // 时间到了,自动改为 重新获取 let code = document.querySelector('.code') code.addEventListener('click', function () { this.innerHTML = `05秒后重新获取`
2022-05-24 19:25:29 66
原创 实现发送验证码功能
// 需求一:发送验证码 // 用户点击之后,显示05秒后重新获取 // 时间到了,自动改为重新获取 let code =document.querySelector('.code') code.addEventListener('click', function () { this.innerHTML = `05秒后重新获取` let mark = 5 let time = setIn...
2022-05-20 14:54:25 913
原创 渲染学生信息案例
运行代码:<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>Document</title> <link rel=
2022-05-12 22:24:40 114
原创 事件对象阻止默认行为
运行代码:<body> <body> <div>123</div> <a href="http://www.baidu.com">百度</a> <form action="http://www.baidu.com"> <input type="submit" value="提交" name="sub">
2022-05-12 14:54:20 112
原创 鼠标移动案例
运行代码:<style> img { position: absolute; /* px一定不能省略 */ top: 0px; left: 0px; } </style></head><body> <img src="images/修狗儿.gif" alt=""> <script&g
2022-05-10 00:05:02 56
原创 随机点名拓展
运行程序: <style> * { margin: 0; padding: 0; } h2, .btns { text-align: center; } .box { width: 600px; margin: 50px auto;
2022-05-09 23:55:21 38
原创 随机点名1
代码段:<style> div { width: 200px; height: 60px; border: 5px solid hotpink; text-align: center; line-height: 60px; } button { width: 210px;
2022-05-04 14:51:14 182
原创 发送短信定时器
运行代码:<body> 手机号码: <input type="tel"> <button>发送</button> <script> var btn = document.querySelector('button'); var time=5; btn.addEventListener('click',function(){ btn.di
2022-04-21 15:48:10 88
原创 倒计时效果
运行代码:<style> div { margin: 200px; } span { display: inline-block; width: 40px; height: 40px; background-color: #333; font-size: 20px;
2022-04-19 22:15:42 125
原创 动态生成表格
运行代码: <style> a { text-decoration: none; } table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; }
2022-04-13 23:38:03 196
原创 表格全选\取消全选
运行代码:<body> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse:
2022-04-07 19:24:48 476
原创 百度换肤效果
运行代码:<title>百度换肤效果</title> <style> *{ margin:0; padding:0; } body{ background: url(images/1.jpg) no-repeat center top; } li{ list-style: none;
2022-04-05 18:24:53 220
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人