- 博客(67)
- 收藏
- 关注
RSS订阅原创 vue利用自定义指令实现图片的优化加载
<!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-11 12:04:30
312
原创 点击登录按钮弹出登录模态框
<!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.
2021-12-30 17:12:15
1821
1
原创 vue简单的排序案例
<!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.
2021-12-30 17:08:02
445
原创 vue实现选项卡案例
<!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.
2021-12-30 17:05:25
423
原创 vue实现一个记事本的案例
<!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.
2021-12-30 17:02:26
566
原创 vue使用过滤（filter）实现根据文章发表的时间来显示它是几小时前,几分钟前
<!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.
2021-12-30 16:57:09
508
原创 js原生实现图片爆炸效果
<!doctype html><html><head> <meta charset="utf-8"> <title>原生JS实现图片爆炸特效</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #boom { width: 50.
2021-12-16 10:14:39
506
1
原创 js 实现拖拽旋转相册
<!DOCTYPE html><!--设置图片的拖拽事件 不可用--><html lang="en" ondragstart="return false"><head> <meta charset="UTF-8"> <title>3D效果</title> <style> body { background-color: #000; .
2021-12-16 10:08:37
1552
原创 js 随机生成验证码
<!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>Document...
2021-12-16 10:02:03
211
原创 node 封装MySQL增删改查
#封装 增 删 改 查 const mysql = require("mysql") /* 建立链接池 */const pool = mysql.createPool({ host: "localhost", user: "root", password: "root", database: "yang", queueLimit: 3, connectionLimit: 20 }) .
2021-12-14 17:26:23
1628
原创 使用node实现简易的登录功能
//html部分<body> <form action="http://172.16.41.102:3000/" method="post"> <input type="text" name="username"> <input type="password" name="password"> <input type="submit" value="登录"> </form&g.
2021-12-09 14:10:51
1170
原创 利用node 实现搭建一个简易的网站
/* 创建模块 */const fs = require("fs");const path = require("path");const http = require("http");/* 创建服务器 */http.createServer((req, res) => { /* 判断是不是为空 */ if (req.url == "/") { console.log(req.url) fs.readFile(path.join(__dir.
2021-12-09 11:16:28
1222
原创 利用node 实现一个简易的服务器
//引入http模块，用于搭建服务器。const http = require("http");//创建服务，传入一个回调函数，当有请求进来的时候，该回调就会执行。//req:请求对象 包含请求信息和对应的方法//res:响应对象 包含响应信息和对应的方法let app = http.createServer((req,res)=>{ //当有请求进来，我们给浏览器一个响应。 res.end("<h1>hello,boy</h1>");});//添加.
2021-12-09 11:10:48
103
原创 js 使用canvas制作一个简易的画板
<!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.
2021-12-01 16:20:48
1016
原创 js音乐播放器
<!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> * { .
2021-11-29 19:13:03
477
原创 用jQuery写一个下拉菜单的案例
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>下拉菜单</title> <!-- 引入iconfont --> <link rel="stylesheet" type="text/css" href="font/iconfont.css"> <!-- 引入jQuery --> .
2021-11-29 11:33:05
773
原创 js的密码强度验证
<style> #box { width: 224px; display: flex; justify-content: space-between; } #box span { margin-top: 10px; width: 60px; height: 30px; .
2021-11-24 17:18:03
1886
原创 js本地存储中localStorage的使用案例
<style> div { text-align: center; } table { width: 640px; border: 1px solid gray; border-collapse: collapse; margin: 50px auto; } thead tr { background: #ccc; } th, td { wi.
2021-11-24 14:35:30
924
原创 js 记住用户名和密码案例
<body> 用户名: <input type="text" id="userName"> <br> 密 码 : <input type="password" id="paw"> 记住用户名和密码 <input id="remember" type="checkbox"> <script> /* 获取元素 */ const userName = documen.
2021-11-23 16:33:53
1158
原创 js 实现一个简易的英语词典
因为这里是使用的是本地的单词库，所以需要下载文件下载地址：提取文件 - 单词库<!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
2021-11-22 14:58:30
464
原创 js选项卡封装为class类
<style> * { margin: 0; padding: 0; } li { list-style: none; text-align: center; } a { text-decoration: none; line-heig..
2021-11-17 20:25:55
256
原创 js轮播图封装为class类
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"> <ti
2021-11-17 20:19:55
548
1
原创 用js实现贪吃蛇游戏
<style> * { margin: 0; padding: 0; } /* 按钮样式 */ #begin { width: 100px; height: 40px; position: absolute; left: 50%; top: 5...
2021-11-17 14:04:25
2297
原创 js把盒子拖拽 封装为class类
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; } </style&..
2021-11-17 12:19:54
141
原创 纯js实现轮播图（详细注释）
<style> * { margin: 0; padding: 0; } li { list-style: none; } .warp { width: 800px; height: 450px; margin: 100px auto;..
2021-11-12 17:21:08
234
1
原创 用js制作打砖块的游戏
<style> * { margin: 0; padding: 0; } #wrap { width: 1200px; margin: 100px auto; display: flex; justify-content: space-between; align.
2021-11-11 20:33:04
3933
原创 js盒子运动（默认值，回调函数，参数改为对象）
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; left: 0; .
2021-11-11 20:29:23
921
原创 密码框的显示隐藏
<style> * { margin: 0; padding: 0; } #box { width: 200px; height: 30px; border: 1px solid; } </style></head><body> ...
2021-11-10 19:38:41
81
原创 js实现盒子运动效果（封装成函数）
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; left: 0; .
2021-11-10 16:27:42
419
原创 js楼层导航
<style> * { margin: 0; padding: 0; } li { list-style-type: none; } body { background-color: #ccc; } .wrap { .
2021-11-10 11:52:56
1219
原创 js实现放大镜的效果
<style> /* 清除默认边距 */ * { margin: 0; padding: 0; } /* 让盒子居中 */ .wrap { width: 1226px; margin: 100px auto; } /* 小盒子的样式 */ ..
2021-11-09 16:40:07
84
原创 自定义鼠标右键菜单
<style> #menu { width: 200px; height: 200px; box-shadow: 3px 3px rgba(0, 0, 0, .2); display: none; position: absolute; } li { list-style-type:...
2021-11-09 11:34:02
134
原创 js鼠标拖拽移动盒子但只在父框内移动（三种写法）
// 1 父框没有定位 <style> #box { width: 50px; height: 50px; background-color: #e74c3c; position: absolute; } #plus_box { width: 300px; height: 300px;.
2021-11-09 10:48:40
1092
原创 js实现鼠标拖拽盒子
<style> #box { width: 50px; height: 50px; background-color: #e74c3c; position: absolute; } </style></head><body> <!-- 定义一个盒子 --> <div id=..
2021-11-08 20:40:44
325
原创 js通过方向键移动盒子（按shift移动距离加倍）
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: #16a085; position: absolute; left: 0; .
2021-11-08 16:24:13
305
1
原创 js实现鼠标跟随
<style> body { background-color: black; /* 吧鼠标隐藏 */ cursor: none; } #box { width: 100px; height: 100px; /* background-image: url(./img/src=http.
2021-11-05 16:45:54
476
原创 js实现简易的评论留言功能
<style> * { margin: 0; padding: 0; } li { list-style: none; width: 500px; height: 30px; line-height: 30px; background-color: cadetbl.
2021-11-05 10:49:56
3298
1
原创 用js添加表单的内容，默认表单有内容
<style> div { text-align: center; } table { width: 640px; border: 1px solid gray; border-collapse: collapse; margin: 50px auto; } ..
2021-11-04 16:02:59
510
原创 js随机点名
<style> * { margin: 0; padding: 0; } .wrapper { width: 300px; height: 300px; margin: 100px auto; border: 1px solid; } ..
2021-11-03 20:12:37
125
原创 js多选的案例
<style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 100px auto; } table { border-collapse: collapse; bor.
2021-11-03 20:09:49
71
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人