案例
关注
分享
扫一扫
文章平均质量分 92
joker.ma
这个作者很懒，什么都没留下…
展开
-
JS-案例-全中文时间
将数字时间转换为中文显示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="div0"></div>...原创 2019-05-30 14:27:45 · 451 阅读 · 0 评论 -
JS-案例-拖拽（实现小div在大div中拖拽效果）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .div0{ width: 400px; ...原创 2019-06-04 22:52:15 · 1121 阅读 · 0 评论 -
JS-案例-input节流
节流 设置在input输入时,间隔一定时间后再进行判断设置等内容,在间隔的时间内不再做任何处理<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style>...原创 2019-06-04 23:08:25 · 1604 阅读 · 0 评论 -
JS-案例-键盘按键移动div
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 100px; he...原创 2019-06-04 23:36:57 · 433 阅读 · 0 评论 -
JS-案例-input中鼠标选中英文转大小写
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" name="user" id="user"/...原创 2019-06-05 08:36:03 · 194 阅读 · 0 评论 -
jQuery-案例-五星评价
用到的imgnpm i jquery 下载node_modules，引用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sc...原创 2019-06-25 23:36:03 · 390 阅读 · 0 评论 -
JS-案例-简单放大镜效果
封装js，主要用到ce 用来创建div的样式var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgL...原创 2019-06-28 12:38:56 · 287 阅读 · 1 评论 -
JS----简单的柯里化写法
<!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...原创 2019-07-03 23:34:23 · 485 阅读 · 0 评论 -
JS---原型下的concat还原写法
<!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-...原创 2019-07-04 23:22:56 · 189 阅读 · 0 评论 -
Vue-案例-实现简单的拖拽效果
自定义指令v-dragl 存在时 只能横向拖拽t 存在时 只能纵向拖拽l t都存在时 可以任意方向拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=devi...原创 2019-07-24 14:29:18 · 903 阅读 · 0 评论 -
Vue-案例-todolist（一）
只写了能实现功能的部分，具体细节样式没有写完整代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1....原创 2019-07-24 23:22:50 · 333 阅读 · 0 评论 -
Vue-案例-todolist（二）
只写了能实现功能的部分，具体细节样式没有写完整代码如下在表单（一）的基础上进行修改，列表上边的按钮实现类似选项卡的效果，只写了能实现功能的部分，具体细节样式没有写完整代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me...原创 2019-07-24 23:27:37 · 225 阅读 · 0 评论 -
Vue-封装-$on $emit $off（封装事件订阅）
/* 事件池 eventList = { handle:[fn1,fn2,fn3] abc:[fn1,fn2,fn3] } || eventList = { } $on(eventName,callback) 判断当前事件名称是否存在，如果不存在则创建一个key值为事件名称 va...原创 2019-07-25 10:46:30 · 1283 阅读 · 0 评论 -
vue-案例-利用组件传值的todolist（todolist升级版）
效果图第一部分，填写信息，点击添加将信息在黄色框外显示（框内，框外是连个不同的组件）点击相应的信息行会变色（灰色）第二部分，点击某一信息行的修改按钮，将上方组件更换为修改信息组件并将相应的数据传递给上方的输入框中，修改数据，点击红色修改框内的修改按钮，将信息替换到相应的信息行的位置第三部分，不论是添加还是修改过程中只要点击删除按钮，就可以删除相应的一个信息行的信息。...原创 2019-07-30 17:08:47 · 526 阅读 · 0 评论 -
Vue-案例-实现简单的选项卡效果
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"> <meta name="viewport" content="maximum-scale...原创 2019-07-23 14:12:33 · 511 阅读 · 0 评论 -
JS-案例-三级菜单（可展开、合并）
运用递归写ul>li三级菜单的结构，构建点击事件，触发合并，展开的效果第一种方法侦听所有li，为防止li向上冒泡影响ul，要加e.stopPropagation( );阻止冒泡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <tit...原创 2019-06-04 21:23:11 · 3684 阅读 · 1 评论 -
JS-案例-拖拽
鼠标点击拖拽div，（点击，移动，释放）方法一css div{ width: 50px; height: 50px; background-color: greenyellow; position: absolute; }html<div>...原创 2019-06-04 19:21:55 · 197 阅读 · 0 评论 -
JS-案例-点击div使其随机变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #div0{ width: 100px; ...原创 2019-06-05 11:21:52 · 2957 阅读 · 1 评论 -
JS-案例-div自动右下左上移动（随机变色）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> html,body{margin:0;padding:0;} div{ ...原创 2019-06-05 11:43:21 · 870 阅读 · 0 评论 -
JS-案例-div随机位置（随机颜色）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head> <style> div{ width: 100px;...原创 2019-06-05 12:01:31 · 6053 阅读 · 0 评论 -
JS-案例-随机点名
第一种，点击一次鼠标，输出一个name<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:...原创 2019-06-05 12:15:44 · 508 阅读 · 0 评论 -
JS-案例-数组去重
//Plan1 var arr = [1, 3, 5, 2, 3, 5, 4, 6, 2, 3, 5, 2, 5, 3]; var arr1 = []; for(var i = 0; i < arr.length; i++) { var bool = true; console.log(arr[i]); for(var j ...原创 2019-06-05 17:14:36 · 250 阅读 · 0 评论 -
js案例-全选checkbox复选框
1\获取所有input,并且转换成一个数组2\遍历这个数组,点击每个input执行函数3\查找当前被点击的元素是第几个,第0个是全选,其他是剩余所有input4\将除了全选以外的所有checkbox是否的选中的布尔值存储在arr数组中5\点击每个除了全选外的元素后,将这个元素是否选中存储在arr数组的对应位置6\点击的是全选时,遍历input数组所有的内容,让其他元素的选中项和全选相同...原创 2019-05-28 22:12:35 · 1067 阅读 · 0 评论 -
JS-案例-全js轮播图
图片预加载封装//Utils.js //封装 预加载图片var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址 回调函数 var img=new Image(); img.num=0;/...原创 2019-06-13 09:01:25 · 525 阅读 · 0 评论 -
JS-案例-瀑布流 懒加载
封装函数部分var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) { var img=new Image(); img.num=0; img.imgList=[]; ...原创 2019-06-13 17:05:11 · 277 阅读 · 0 评论 -
JS-案例-三种轮播图写法（一）
第一种点击右侧小图，对应大图变换类型DOM构建元素，样式。初始状态函数<script> var imgArr=["./img/a.jpeg","./img/b.jpeg","./img/c.jpeg","./img/d.jpeg","./img/e.jpeg"]; var iconArr=["./img/icon_a.jpeg","./...原创 2019-06-03 19:58:48 · 937 阅读 · 0 评论 -
JS-案例-三种轮播图写法（二）
第二种点击右侧小图，对应大图变换类型CSS编写样式，JS构建点击事件函数css样式 <style> body{ margin: 0;padding: 0;} div{ width:100%; height: 455px; background...原创 2019-06-03 20:05:09 · 221 阅读 · 0 评论 -
JS-案例-三种轮播图写法（三）
第三种点击左右按钮（下方小圆点）移动类型CSS编写样式，JS构建函数事件CSS样式 <style> *{margin:0; padding: 0;} .carousel{ width: 960px; height: 320px; positi...原创 2019-06-03 20:15:28 · 462 阅读 · 0 评论 -
JS-案例-倒计时
HTML<div id="div0"></div>JS初始函数，获得一个时间，加上10分钟，获取div0，每隔一帧执行一次animation函数 <script> var time; init(); function init() { time=new Date()...原创 2019-06-03 20:43:58 · 425 阅读 · 0 评论 -
JS-案例-Promise简单实现信号灯效果
<!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-...原创 2019-06-20 08:58:42 · 523 阅读 · 0 评论 -
JS-案例-跳动小球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <script> class Ball{ ...原创 2019-06-10 23:25:37 · 860 阅读 · 0 评论 -
JS-案例-实现拖拽 不出浏览器 距边50px吸附
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>拖拽</title> <style> html,body{ margin: 0; pa...转载 2019-08-10 10:23:14 · 571 阅读 · 0 评论