小功能
ヽ错落不堪的年华。
这个作者很懒,什么都没留下…
展开
-
js事件弹出层点击其它地方弹出层消失
<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>...原创 2020-02-14 14:14:53 · 453 阅读 · 0 评论 -
原生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-UA-Comp...原创 2019-06-12 21:02:45 · 233 阅读 · 0 评论 -
构造函数绘制canvas折线图
<!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-U...原创 2019-06-18 21:29:23 · 191 阅读 · 0 评论 -
构造函数绘制canvas饼状图
<!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-U...原创 2019-06-18 21:30:28 · 145 阅读 · 0 评论 -
css控制页面文字不能被选中user-select:none;
现象:html中可能有些地方不想让用户复制文字,或是用a标签做了个点击按钮,点快的时候文字会被选中,很丑,这个时候可以使用下面的方案禁止文字选中。原因:鼠标点快了文字会被选中。解决方案:不同的浏览器设置的内容不一样,user-select不是一个W3C的标准,浏览器的支持不完成,需要对不同的浏览器进行调整。body{-moz-user-select:none;/*火狐*/-webki...原创 2019-06-02 20:32:07 · 121 阅读 · 0 评论 -
数组去重
1.通过indexOf()方法 function unique(arr){ // 定义一个空数组 var newArr = []; for(var i in arr ){ // 判断有没有重复的数据 if(newArr....原创 2019-06-02 21:30:25 · 106 阅读 · 0 评论 -
vue-model实现简易计算器
<!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-U...原创 2019-07-07 17:17:23 · 171 阅读 · 0 评论 -
格式化时间字符串
<script>// 时间格式化字符串let sun = (val) => { if(val.length < 2){ val = '0' + val } return val}let time = '2019-7-24 12:6:23'let ary = time.split(/(?: |-|:)/g) //=> ["201...原创 2019-11-14 10:55:21 · 120 阅读 · 0 评论 -
js事件兼容代码
// 点击事件兼容代码function addEvent(elmt, type, func) { if(elmt.addEventListener){ elmt.addEventListener(type, func, false) }else if(elme.attachEvent){ elmt.attachEvent('on' + type,function(){ ...原创 2019-08-07 18:46:13 · 80 阅读 · 0 评论 -
vue 搜索结果
<tr v-for='item in search(keywords)' :key = 'item.id'> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{ item.ctime | dateFormat() }}</td> <td> &...原创 2019-08-16 17:07:18 · 105 阅读 · 0 评论 -
实现可拖拽div
<!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-Comp...原创 2019-09-02 10:47:02 · 350 阅读 · 0 评论 -
随机生成10个不同的0-100的随机数并排序
/* 生成随机数的方法 *istart 开始值 *iend 结束值 */ function getRandom(istart, iend) { return Math.floor(Math.random() * (iend - istart)) + istart } // 空数组 var array = [] // 循环随机生成10次随机数 fo...原创 2019-09-19 18:44:32 · 3137 阅读 · 3 评论 -
css3 属性缩放 scale(x,y)的使用
//检测浏览器窗口改变缩放属性function Responsive() { var ratioW = window.innerWidth / 3200; var ratioH = window.innerHeight / 1880; console.log(ratioW) console.log(ratioH) $('body').css({ ...原创 2019-10-10 17:25:51 · 2280 阅读 · 0 评论 -
纯css3实现图片正反面旋转
//这里需要用到两张大小一样的图片<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <me...原创 2019-05-18 19:08:35 · 1637 阅读 · 0 评论 -
js闭包点赞小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>对自己狠点</title> <style> ul { list-style-type: none; } li { ...原创 2019-05-18 19:05:03 · 442 阅读 · 0 评论 -
php冒泡排序
<?php$arr = array('5','2','0','1','3','1','4'); for ($i=0 ; $i <count($arr) ; $i++) { //设置一个空变量 for ($j=$i ; $j < count($arr)-1; $j++) { if ($arr[$i] > $arr[$j+1]) { ...原创 2019-05-25 21:29:33 · 101 阅读 · 0 评论 -
正则表达式验证密码强度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style type="text/css"> #dv{ width: 300px; ...原创 2019-05-19 16:51:13 · 2935 阅读 · 0 评论 -
正则表达式验证是否输入的是邮箱
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> input{ outline: none; } </style>...原创 2019-05-19 17:06:49 · 904 阅读 · 0 评论 -
正则表达式验证表单信息
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body { background: #ccc; }...原创 2019-05-19 20:38:41 · 172 阅读 · 0 评论 -
js原生代码属性旋转木马案例
html和js部分<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>旋转木马轮播图</title> <link rel="stylesheet" href="css/css.css"/></head>...原创 2019-05-10 16:38:14 · 365 阅读 · 0 评论 -
导航栏滑动底色小案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { l...原创 2019-05-10 19:50:52 · 263 阅读 · 0 评论 -
js原生手风琴小案例
代码如下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin:...原创 2019-05-10 20:02:02 · 376 阅读 · 0 评论 -
原生js贪吃蛇小案例
html部分<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...原创 2019-05-15 20:54:43 · 752 阅读 · 0 评论 -
js反转数组
1普通反转 var arr = [10,20,30,40,50,60,70]; for(var i=0;i<arr.length/2;i++){ var temp = arr[i]; arr[i]=arr[arr.length-1-i]; arr[arr.length-1-i]=temp; } console.log(arr); //输出[70,60,50,40,3...原创 2019-05-15 21:10:10 · 4286 阅读 · 0 评论 -
js三大系列总结
offset系列: (父级元素margin+父级元素padding+父级元素border+自己的margin) offsetLeft:元素距离左边位置的值 offsetTop:元素距离上面位置的值 offsetWidth:获取元素的宽度(有边框) offsetHeight:获取元素的高度(有边框) scroll系列:...原创 2019-05-11 09:06:59 · 156 阅读 · 0 评论 -
淘宝商品轮播图
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>哈哈</title> <style> * { margin: 0; padding: 0; } .box { ...原创 2019-05-11 21:09:34 · 751 阅读 · 0 评论 -
淘宝商品放大镜
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; ...原创 2019-05-12 10:32:11 · 83 阅读 · 0 评论 -
js原生兼容代码
/** * 获取元素的文本内容 * @param element 任意元素 * @returns {*} 任意元素中的文本内容 */function getInnerText(element) { if (typeof(element.textContent) == "undefined") { return element.innerText; } el...原创 2019-05-12 15:05:44 · 159 阅读 · 0 评论 -
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-U...原创 2019-05-12 17:45:57 · 735 阅读 · 0 评论 -
原生js仿百度搜索框案例
源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto;...原创 2019-05-08 20:14:41 · 542 阅读 · 1 评论