JavaScript案例
关注
分享
扫一扫
以实战为线索，逐步深入React开发各个环节，掌握前端常用性能体验优化思路，打造完整前端工作流，提升工程化编码能力和思维能力。
HAI6545
这个作者很懒，什么都没留下…
展开
-
五星好评效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><img src="./images/rank_3.gif" alt=""><img src="./images/rank_4.gif" alt=""><img .原创 2022-01-21 17:07:01 · 510 阅读 · 0 评论 -
组合模式实现tab切换、轮播图、放大镜效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/14-组合模式.css"></head><body> <!-- tab切换开始 --> <di..原创 2022-01-21 16:56:35 · 1036 阅读 · 0 评论 -
class方法封装工具库
var tool, Tooltool = Tool = (function(){ class Utils{ noConflict(bool = false){ if(!bool){ window.tool = undefined }else{ window.tool = window.Tool = undefined return thi.原创 2022-01-21 16:43:03 · 160 阅读 · 0 评论 -
使用class方法实现放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.middle{ width: 400px; height: 400px; position: relative;}.middle>img{ wid..原创 2022-01-21 16:40:50 · 437 阅读 · 0 评论 -
使用class方法实现轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .carousel{ width: 600px; height: 300px; border:1px solid #000; margin:50px aut..原创 2022-01-21 16:39:20 · 391 阅读 · 0 评论 -
使用es6的class方法实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto;}..原创 2022-01-21 16:37:27 · 432 阅读 · 0 评论 -
使用数组生成二维码
<!doctype html><html><title>My_QR_code</title> <head> </head> <h2>扫扫看看有什么吧</h2><body> <canvas id="canvas" width="500" height="500" style="border: 2px solid #ddd"></canvas><scrip..原创 2022-01-20 16:57:31 · 470 阅读 · 0 评论 -
拼图验证码
<!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-01-20 16:46:03 · 522 阅读 · 0 评论 -
简易网站锚点布局
<!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"> <link rel=".原创 2022-01-19 20:05:10 · 383 阅读 · 0 评论 -
淘宝精品展示案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; font-size: 12px; } ul { ..原创 2022-01-19 19:55:29 · 305 阅读 · 0 评论 -
鼠标移动显示效果
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; }..原创 2022-01-19 19:52:35 · 291 阅读 · 0 评论 -
卷帘式下拉菜单案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } ...原创 2022-01-19 19:48:35 · 232 阅读 · 0 评论 -
滑动导航效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> ul{ list-style-type: none; padding: 0; margin: 0; position:..原创 2022-01-19 19:38:34 · 238 阅读 · 0 评论 -
jQuery动态创建滑动轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.carousel{ width: 600px; height: 300px; border:1px solid #000; position:relativ..原创 2022-01-18 14:10:07 · 443 阅读 · 0 评论 -
使用nodejs搭建聊天室
搭建一个服务器//引入fsvar fs = require('fs')//引入http var http = require('http')var date = new Date()/** * @FormDate 格式化时间 * @param {*} date 当前时间 */function FormDate(date) { return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date原创 2022-01-17 20:08:24 · 2363 阅读 · 0 评论 -
使用jquery实现tab切换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.tab{ width: 600px; height: 300px; border:1px solid #000; margin: 50px auto;...原创 2022-01-17 19:33:25 · 3604 阅读 · 0 评论 -
使用jquery实现全选反选效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src =" https://code.jquery.com/jquery-3.6.0.min.js "></script></head><body><but...原创 2022-01-17 19:30:09 · 213 阅读 · 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>D.原创 2022-01-17 19:17:05 · 302 阅读 · 0 评论 -
简易后台效果
<!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-01-14 17:29:15 · 331 阅读 · 1 评论 -
环绕鼠标旋转效果
<!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>C.原创 2022-01-14 17:23:24 · 641 阅读 · 2 评论 -
jsonp模拟百度搜索关键字
<!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>D.原创 2022-01-13 20:03:20 · 159 阅读 · 0 评论 -
使用promise构造函数封装ajax
*//** * 发送ajax请求的函数 * @param {object} obj 发送ajax的配置项 * @returns undefined */function ajaxPromise(obj){ return new Promise(function(resolve, reject){ if(obj.url === undefined) throw new Error('请求地址不能为空') if(Object.prototype.toStri.原创 2022-01-13 13:55:31 · 141 阅读 · 0 评论 -
css实现飞翔的鸟
<!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>飞翔的小鸟&l.原创 2022-01-13 11:48:30 · 490 阅读 · 0 评论 -
ajax代码封装
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script>function ajax(obj){ // 判断url // 判断是否传入 if(obj.url ===..原创 2022-01-12 17:41:03 · 388 阅读 · 0 评论 -
钟表案例
<!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>D.原创 2022-01-12 17:33:59 · 112 阅读 · 0 评论 -
滑块验证案例
<!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-01-12 17:28:03 · 438 阅读 · 0 评论 -
弧形运动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>.box{ width: 30px; height: 30px; background-color: #f00; position:absolute; .原创 2022-01-11 19:38:53 · 241 阅读 · 0 评论 -
进阶烟花效果
<!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-01-11 19:34:06 · 316 阅读 · 0 评论 -
使用注册账号登陆
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> td:first-child{ text-align: right; }</style><body><form action.原创 2022-01-11 15:43:06 · 328 阅读 · 0 评论 -
使用ajax上传注册信息
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> td:first-child{ text-align: right; }</style><body><form actio..原创 2022-01-11 15:39:15 · 140 阅读 · 0 评论 -
秒表效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> section { width: 400px; height: 200px; } div { width: 300p.原创 2022-01-10 17:24:00 · 281 阅读 · 0 评论 -
表格添加与删除
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style>body>table{ float:left; margin-right:200px;}b{ font-size: 20px; }table>...原创 2022-01-10 17:16:50 · 260 阅读 · 0 评论 -
代码雨效果
<!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>代码雨demo&l.原创 2022-01-10 17:04:17 · 146 阅读 · 0 评论 -
购物车案例
HTML结构<!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"> <t..原创 2022-01-06 17:30:13 · 159 阅读 · 0 评论 -
面向对象实现贪吃蛇
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><button>开始</button></body><script>// 面向对象贪吃蛇/*地图 - 对象 地图属性 - di..原创 2022-01-06 17:18:51 · 374 阅读 · 0 评论 -
简易烟花效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body></body><script src="./js/utils.js"></script><script>// 烟花效果逻辑：/*创建..原创 2022-01-06 17:14:44 · 603 阅读 · 0 评论 -
面向对象实现放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> .container{ width: 100%; margin-top: 400px; } .content{ wid..原创 2022-01-06 17:13:01 · 428 阅读 · 0 评论 -
分页插件的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> table tbody tr:hover{ background-color: hotpink; } tbody tr:nth-child(2n){..原创 2022-01-05 19:06:05 · 453 阅读 · 1 评论 -
面向对象创建分页插件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body><!-- 在布局的时候需要留一个盒子放分页 --><div class="container"></div></body><scri..原创 2022-01-05 19:02:44 · 314 阅读 · 0 评论 -
简易登录注册页面
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>login</title> <!-- <link rel="stylesheet" type="text/css" href="pageChange.css" /> --> <!-- <script src="pageChange.js">..原创 2022-01-05 18:58:40 · 434 阅读 · 0 评论