javascript
清酒独酌
这个作者很懒,什么都没留下…
展开
-
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 · 311 阅读 · 0 评论 -
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 · 503 阅读 · 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 · 1549 阅读 · 0 评论 -
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 · 210 阅读 · 0 评论 -
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 · 1014 阅读 · 0 评论 -
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 · 476 阅读 · 0 评论 -
用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 · 768 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 · 923 阅读 · 0 评论 -
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 · 1156 阅读 · 0 评论 -
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 · 462 阅读 · 0 评论 -
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 阅读 · 0 评论 -
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 阅读 · 0 评论 -
js把盒子拖拽 封装为class类
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; } </style&..原创 2021-11-17 12:19:54 · 140 阅读 · 0 评论 -
纯js实现轮播图(详细注释)
<style> * { margin: 0; padding: 0; } li { list-style: none; } .warp { width: 800px; height: 450px; margin: 100px auto;..原创 2021-11-12 17:21:08 · 233 阅读 · 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 · 3929 阅读 · 0 评论 -
js盒子运动(默认值,回调函数,参数改为对象)
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; left: 0; .原创 2021-11-11 20:29:23 · 919 阅读 · 0 评论 -
密码框的显示隐藏
<style> * { margin: 0; padding: 0; } #box { width: 200px; height: 30px; border: 1px solid; } </style></head><body> ...原创 2021-11-10 19:38:41 · 81 阅读 · 0 评论 -
js实现盒子运动效果(封装成函数)
<style> * { margin: 0; padding: 0; } #box { width: 100px; height: 100px; background-color: brown; position: absolute; left: 0; .原创 2021-11-10 16:27:42 · 418 阅读 · 0 评论 -
js楼层导航
<style> * { margin: 0; padding: 0; } li { list-style-type: none; } body { background-color: #ccc; } .wrap { .原创 2021-11-10 11:52:56 · 1217 阅读 · 0 评论 -
js实现放大镜的效果
<style> /* 清除默认边距 */ * { margin: 0; padding: 0; } /* 让盒子居中 */ .wrap { width: 1226px; margin: 100px auto; } /* 小盒子的样式 */ ..原创 2021-11-09 16:40:07 · 82 阅读 · 0 评论 -
自定义鼠标右键菜单
<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 · 132 阅读 · 0 评论 -
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 · 1078 阅读 · 0 评论 -
js实现鼠标拖拽盒子
<style> #box { width: 50px; height: 50px; background-color: #e74c3c; position: absolute; } </style></head><body> <!-- 定义一个盒子 --> <div id=..原创 2021-11-08 20:40:44 · 325 阅读 · 0 评论 -
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 · 304 阅读 · 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 阅读 · 0 评论 -
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 · 3278 阅读 · 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 · 509 阅读 · 0 评论 -
js随机点名
<style> * { margin: 0; padding: 0; } .wrapper { width: 300px; height: 300px; margin: 100px auto; border: 1px solid; } ..原创 2021-11-03 20:12:37 · 125 阅读 · 0 评论 -
js多选的案例
<style> * { padding: 0; margin: 0; } .wrap { width: 500px; margin: 100px auto; } table { border-collapse: collapse; bor.原创 2021-11-03 20:09:49 · 70 阅读 · 0 评论 -
js点击图片切换
<style> img { width: 300px; height: 300px; } </style></head><body> <img src="./img/showpic01.jpg" alt=""> <button id="btn_top">上一张</button> <button id=.原创 2021-11-03 20:07:31 · 770 阅读 · 0 评论 -
利用js实现一个简易的选项卡(点击切换)
<style> * { margin: 0; padding: 0; } a { text-decoration: none; line-height: 50px; color: black; display: block; } li...原创 2021-11-02 18:11:00 · 262 阅读 · 0 评论 -
编写一个程序,让用户输入菜单代码,输入1,抽取1-100之间的10个幸运号码(不重复),输入2,查找幸运号码的最大值
<script> //存储用户输入的数 var userArr = []; //返回布尔 while (true) { /* 获得随机数 */ var Arr = []; for (i = 0; i < 10; i++) { function num(n, m) { return ..原创 2021-11-01 11:05:13 · 636 阅读 · 0 评论 -
用js制作一个简单的猜数字游戏
<script> /* 猜数字游戏 */ function num(n, m) { return parseInt(Math.random() * (m - n + 1) + n); } var number = num(1, 11);//随机一个数字 1~10之间 for (i = 1; i <= 10; i++) { var cai = prompt('你.原创 2021-10-30 09:30:12 · 2233 阅读 · 0 评论 -
封装一个函数,传入两个日期(对象),返回两个日期之间相差的天数 (number).比如 10月28号和10月31号相差3天
<script> function day(a, b) { /* 传入两个日期 */ var date1 = new Date(a); var date2 = new Date(b); /* 两个日期间的毫秒相减 */ var ms = date2.getTime() - date1.getTime(); var c = parseInt(ms / .原创 2021-10-28 19:31:09 · 372 阅读 · 0 评论 -
封装一个函数,设置一个日期,输入n,返回n天后的日期
function day(n) { /* 设置日期 */ var d = new Date('2021/10/28'); /* 日期和输入的日期相加 */ var a = d.getDate() + n; d.setDate(a); document.write(d.toLocaleString()); return d; ..原创 2021-10-28 19:29:40 · 143 阅读 · 0 评论 -
js自定义格式化日期函数 传入当天日期, 返回日期和星期几
function fn() { var date = new Date(); /* 获取年 */ var year = date.getFullYear(); /* 获取月 */ var month = date.getMonth(); /* 获取日 */ var day = date.getDate(); /* 获.原创 2021-10-28 19:28:07 · 771 阅读 · 0 评论 -
js用循环完成冒泡排序
var arr = [1, 24, 5, 23, 84, 7, 4] for (i = 0; i < arr.length - 1; i++) { for (j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { var num = arr[j]; arr[j] =.原创 2021-10-28 17:12:50 · 267 阅读 · 0 评论 -
js 点击按钮随机更改颜色页面
//按钮的样式<style> button { display: block; width: 100px; height: 100px; margin: 0 auto; margin-top: 300px; cursor: pointer; } </style>//<body>.原创 2021-10-28 11:03:50 · 917 阅读 · 0 评论