JavaScript
js常用知识点及特效
QQ帝国
积土成山,风雨兴焉;积水成渊,蛟龙生焉;积善成德,而神明自得,圣心备焉。故不积跬步,无以至千里;不积小流,无以成江海。骐骥一跃,不能十步;驽马十驾,功在不舍。锲而舍之,朽木不折;锲而不舍,金石可镂。蚓无爪牙之利,筋骨之强,上食埃土,下饮黄泉,用心一也。蟹六跪而二螯,非蛇鳝之穴无可寄托者,用心躁也。
展开
-
JS二进制文件转换:File、Blob、Base64、ArrayBuffer
【代码】JS二进制文件转换:File、Blob、Base64、ArrayBuffer。原创 2024-02-28 15:11:36 · 1366 阅读 · 1 评论 -
html2canvas截取页面
常用的插件就是html2canvas。插件的使用本身很简单,这里说的是如何将其生成的canvas保存为图片。1、引入 import html2canvas from 'html2canvas' <div > <el-button type="info" size="mini" @click="tohomedetail" class="back">..原创 2019-03-06 10:30:14 · 598 阅读 · 0 评论 -
拖拽函数的简单封装
function drag(obj, box) { //obj:拖拽的对象;box:移动的对象; 一个参数时拖动自身;if (box) {} else {//当第二个参数为空时,调用obj; box = obj;};var distanceTop = box.offsetTop - obj.offsetTop;//拖拽对象与移动对象的偏离值;var distanceLef...转载 2018-09-10 20:47:17 · 276 阅读 · 0 评论 -
通过fromdata实现上传文件
其实呢,文件上传的插件很多,可是现在做的东西要求尽量少用插件,所以就自己写了一下。例子1:a.html文件<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head> <meta http-equiv="content-type" content="text...原创 2019-03-03 02:29:39 · 673 阅读 · 0 评论 -
js模糊搜索
方法一:jQuery根据文本框输入实时模糊查询HTML代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, i原创 2018-08-15 14:58:43 · 1623 阅读 · 0 评论 -
JQ--百度新闻导航滑块
<!doctype html><html><head><meta charset="utf-8"><title>头部导航滑块 内容切换 (原创)-jq22.com</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js">...原创 2018-09-21 16:12:50 · 376 阅读 · 3 评论 -
在js中怎样获得checkbox里选中的多个值?(jQuery)
思路:利用name属性值获取checkbox对象,然后循环判断checked属性(true表示被选中,false表示未选中)。下面进行实例演示:1、HTML结构<input type="checkbox" name="test" value="1"/><span>1</span><input type="checkbox"原创 2018-08-12 22:01:53 · 327 阅读 · 0 评论 -
原生js实现文字轮播
<!doctype html><html><head><meta charset="utf-8"><title>简单的滚文字动-jq22.com</title><script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js&q原创 2018-09-20 20:56:11 · 2237 阅读 · 0 评论 -
Vue前端模糊搜索 js 封装及用法
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">...原创 2019-08-02 11:16:38 · 459 阅读 · 0 评论 -
原生js实现前后轮播
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <style type="text/css"> body{backgr原创 2018-09-20 20:52:51 · 272 阅读 · 0 评论 -
选项卡js和jQ写法
一、原生js写法:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css">原创 2018-09-25 21:34:19 · 254 阅读 · 0 评论 -
js实现页面侧滑菜单效果
写手机站的时候经常会有侧滑菜单,下面就为大家介绍:先定义一个最外层div container,这个也是页面显示部分,设置样式overflow: hidden;然后在container里面定义个div为侧滑菜单,样式为:position: absolute;top: 0px;left:-菜单宽度;还需要在container里面写一个div main,这个div里面存放主页面下面就是j...原创 2018-08-15 09:09:55 · 2586 阅读 · 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-...原创 2018-08-03 22:08:20 · 428 阅读 · 0 评论 -
canvas制作画板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-08-03 22:26:38 · 448 阅读 · 0 评论 -
canvas绘制时钟
方法一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2018-08-04 16:58:07 · 270 阅读 · 0 评论 -
Flex 弹性布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。Webkit 内核的浏览器,必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ display: flex;}一、flex-direction属性决定主轴的方向(即项目的排列方向)。.box { f...原创 2018-09-26 10:03:57 · 249 阅读 · 1 评论 -
canvas画笔升级版
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>画板</title> <style> *{paddin原创 2018-08-04 11:53:38 · 294 阅读 · 0 评论 -
css知识点总结
https://blog.csdn.net/liujie19901217/article/details/513940461、实现不使用 border 画出1px高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果。<div style="height:1px;overflow:hidden;background:red"></div>2、居中一个浮动...原创 2018-09-24 20:54:46 · 210 阅读 · 0 评论 -
Canvas制作小球遇边缘反弹
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2018-08-03 22:07:18 · 1232 阅读 · 0 评论 -
table导出为Excel
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="renderer" content="webkit" /> <meta http-equiv="X-UA-Compatible" conte转载 2018-10-22 16:41:15 · 422 阅读 · 1 评论 -
replace转义空格
wen内容.文本replace(/\n/g,'<br/>') ,转义空格需求:把添加内容时的空格,渲染出来,不转会把内容显示一行原创 2019-04-28 18:31:12 · 810 阅读 · 0 评论 -
js截取字符串最后一个 / 后的内容
js截取字符串最后一个 ‘ / ’后的内容var str = "/asdasf/asfaewf/agaegr/trer/rhh";var index = str .lastIndexOf("\/"); str = str .substring(index + 1, str .length);alert(str );封装方法://获取最后斜杠后的字符串 ...原创 2018-12-07 15:04:33 · 9916 阅读 · 0 评论 -
JQ中toggle替代方案
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .dian{width: 100px;height: 30px ;backgr原创 2018-10-19 09:53:11 · 314 阅读 · 0 评论 -
数组中有多条对象去重方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQ去重</title></head><body><script src="原创 2018-11-13 10:25:06 · 252 阅读 · 0 评论 -
带id的市和区/县 json数据
市和区/县 json数据[ { "name":"山东省", "id":"370000", "child":[ { "name":"莱芜市", "id":"371200", "child":[原创 2018-12-05 15:29:59 · 2263 阅读 · 0 评论 -
jquery得到同一class的多个src属性值
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .暗示法{width: 100px;height: 100px ;backgr原创 2018-10-18 15:37:29 · 901 阅读 · 0 评论 -
兼容问题
css兼容:1.box-shadow:filter:progid:DXImageTransform.Microsoft.Shadow(color=#909090,direction=120,strength=4);/兼容ie/-moz-box-shadow: 2px 2px 10px #909090;/兼容firefox/-webkit-box-shadow: 2px 2px 10px #9...原创 2018-10-02 21:10:56 · 160 阅读 · 0 评论 -
jquery 判断元素是否在数组内
js 方法:var arr = ["a", "b", "c"];// js arr.indexOf("c")var result1 = arr.indexOf("c"); //返回index为2,失败返回-1jquery 方法:var arr = ["a", "b", "c"];// jquery $.inArray("原创 2018-11-06 11:59:09 · 222 阅读 · 0 评论 -
面向对象----面向过程
面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了。 面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为了完成一个步骤,而是为了描叙某个事物在整个解决问题的步骤中的行为。1.什么是面向对象技术?面向对象技术是一种以对象为基础,以事件或消息来驱动对象执行处理的程序设计技术。它具有抽象性、封...转载 2018-09-27 21:04:17 · 244 阅读 · 0 评论 -
原生js获取 url 键值对
GetUrlParam(paraName) { var url = window.location.toString(); var arrObj = url.split("?"); if (arrObj.length > 1) { var arrPara = arrObj[1].split("&a...原创 2018-11-15 13:54:41 · 2447 阅读 · 0 评论 -
JS获取两个数组中相同的元素
<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> </body> <sc原创 2018-11-11 18:03:35 · 2498 阅读 · 0 评论 -
封装简单的jquery插件
接下来我们一起来写个高亮的jqury插件1.定一个闭包区域,防止插件"污染"//闭包限定命名空间(function ($) { })(window.jQuery);2.jQuery.fn.extend(object)扩展jquery 方法,制作插件//闭包限定命名空间(function ($) { $.fn.extend({ "highLi...原创 2018-09-28 16:50:22 · 303 阅读 · 0 评论 -
js中eval()函数的使用
1.eval() 函数作用:可以接受一个字符串str作为参数,并把这个参数作为脚本代码来执行。2.参数情况:(1)如果参数是一个表达式,eval() 函数将执行表达式; (2) 如果参数是Javascript语句,eval()将执行 Javascript 语句3.注意:(如果执行结果是一个值就返回,不是就返回undefined,如果参数不是一个...原创 2018-10-06 20:36:45 · 10102 阅读 · 0 评论 -
Js Date日期格式和字符串的相互转化
Date格式转字符串已知格式:Wed Dec 13 2017 16:00:00 GMT+0800 (中国标准时间)所需求的格式为:2017-12-13 16:00:00转换代码var formatDate = function (date) { var y = date.getFullYear(); var m = date.getMonth() + 1;...原创 2018-11-02 19:24:01 · 2192 阅读 · 0 评论 -
伪数组转化为数组的方法
伪数组(类数组):无法直接调用数组方法或期望length属性有什么特殊的行为,但仍可以对真正数组遍历方法来遍历它们。方法:在js中,数组是特殊的对象,凡是对象有的性质,数组都有,数组表示有序数据的集合,而对象表示无序数据的集合。那伪数组是什么呢,当然它也是对象,伪数组一般具有以下特点:1、按索引方式存储数据;2、具有length属性;3、没有数组的push、shift、pop等...原创 2018-09-27 15:33:50 · 270 阅读 · 0 评论 -
数组[ { },{ }, { }, { }, { } ]对象去重
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>JQ去重</title></head><body><script src="原创 2018-11-13 18:47:01 · 187 阅读 · 0 评论 -
js保存请求原始数据
copy(obj){ if(typeof obj != 'object'){ return obj; } var newobj = {}; for ( var attr in ...原创 2019-01-19 18:27:02 · 478 阅读 · 0 评论 -
js时间戳与日期格式的相互转换
1. 将 时间戳 转换成日期格式:var date = new Date(); //时间对象var str = date.getTime(); //转换成时间戳1.时间戳转换成形如 2018年1月4日 14:00:00 格式:function getDate(date){ var t = new Date(date).toLocaleString...原创 2018-12-04 10:05:47 · 684 阅读 · 1 评论 -
JS、JQ判断时间大小
JQ判断<!DOCTYPE><html><head> <title></title> <meta http-equiv="X-UA-Compatible" charset="utf-8"/> <script src="js/jquery-1.1原创 2018-11-17 11:21:55 · 994 阅读 · 0 评论 -
js以数组值寻找对应id的name
let arr1 = ['aaa','bbb','ccc']; let arr2 = [ {id:'aaa',name:'苹果1'}, {id:'bbb',name:'苹果2'}, {id:'ccc',name:'苹果3'}, {id:'ddd',name:'苹果4'} ]; let namestr = ''...原创 2019-05-16 23:07:16 · 5926 阅读 · 0 评论