![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
swrd2014
这个作者很懒,什么都没留下…
展开
-
原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
原生JS实现淡入淡出效果/*demo css*/#demo div.box {float:left;width:31%;margin:0 1%}#demo div.box h2{margin-bottom:10px}#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder}#demo d转载 2015-07-07 16:12:45 · 1047 阅读 · 0 评论 -
jquery实现必应的自动下拉搜索功能
body{background-color: #333;} .big-img{background-image: url(img/river.jpg); background-repeat: no-repeat; width:1228px;height:690px;margin: 0 auto;position: relative;} .logo{background: url(im原创 2016-09-14 11:36:44 · 767 阅读 · 1 评论 -
H5使用canvas实现星星闪烁效果
html star JSmain.jsvar can;var ctx;var w,h;var girlPic = new Image();var starPic = new Image();var num = 60;var stars = [];var lastTime,deltaTime;var转载 2016-08-12 19:11:15 · 12942 阅读 · 1 评论 -
页面布局瀑布流的写法(jQuery写法)
瀑布流布局 -->转载 2016-09-18 07:44:26 · 401 阅读 · 0 评论 -
页面布局瀑布流的写法(原生js)
瀑布流布局转载 2016-09-18 07:42:16 · 648 阅读 · 0 评论 -
实现黑客帝国屏幕效果
Maxtrix *{ margin: 0 auto; padding: 0 auto; } body{ background: black; overflow: hidden; } //初始化画布 var matrix = document.getElementById("matrix")转载 2017-04-13 19:00:00 · 3332 阅读 · 1 评论 -
vue 简单仿写百度搜索
vue .grey{ background: #CCC; height: 25px; } ul,li{ margin: 0; padding: 0; list-style-type:none; margin-left: 65px; width: 306px; } .dialog{原创 2017-06-09 19:27:27 · 694 阅读 · 0 评论 -
链式封装ajax请求的Promise
a.txt,b.txt,c.txt分别取0,1,2$(function(){ function ajax(param, callback){ $.ajax({ url:param, type:'get', success:function(data){ callback(data); }, error:function(data){ conso原创 2017-07-21 19:11:14 · 1557 阅读 · 0 评论 -
使用Vue-cli搭建后台简单管理系统vue.js2.0
新手使用vue搭建后台管理系统使用相关技术:vue-cli:脚手架工具 vue.js(2.0) vue-router :路由 vuex:状态管理 axios: 数据请求API axios-mock-adapter :配合axios mock假数据 ElementUi:基本组件原创 2017-08-07 14:43:28 · 2785 阅读 · 0 评论 -
JavaScript中原型对象的彻底理解
一、什么是原型原型是JavaScript中的继承的继承,JavaScript的继承就是基于原型的继承。1.1 函数的原型对象 在JavaScript中,我们创建一个函数A(就是声明一个函数), 那么浏览器就会在内存中创建一个对象B,而且每个函数都默认会有一个属性prototype 指向了这个对象( 即:prototype的属性的值是这个对象 )。这个对象B就是函数转载 2017-08-22 16:34:13 · 289 阅读 · 0 评论 -
jsonp请求实例原生和jquery
$.ajax({ type:"get", url:"https://c.y.qq.com/qzone-music/fcg-bin/fcg_ucc_getcdinfo_byids_cp.fcg", async:false, jsonp:"jsonp1", jsonpCallback:"jsonp1", dataType:"jsonp", dat原创 2017-09-04 15:25:54 · 312 阅读 · 0 评论 -
正则匹配url对应参数名的值
function getParam(_type, _url){ var url = _url || window.location.href; if (new RegExp(".*\\b" + _type + "\\b(\\s*=([^&]+)).*", "gi").test(url)) { return RegExp.$2; } e原创 2017-09-15 09:11:32 · 2355 阅读 · 0 评论 -
原生按字数多少自动切换焦点
自动切换焦点 (function(){ function focusForwad(event){ var target = event.target; if(target.value.length === target.maxLength) { let form = target.fo原创 2018-01-11 18:39:57 · 212 阅读 · 0 评论 -
使用回调和Promise两种方法实现3个小球依次移动
promise调用 .ball{ width: 20px; height: 20px; border-radius: 50%; } .ball1{ background-color: red; } .ball2{ background-color: yellow; } .ball3{ background-color: green原创 2018-01-14 19:29:29 · 429 阅读 · 0 评论 -
canvs绘制动态时钟
A draw canvas let draw = document.getElementById('draw'); let context = draw.getContext('2d'); let angle = Math.PI/360; var DateTime = { initDial: function(){原创 2018-01-17 14:15:20 · 457 阅读 · 0 评论 -
渐进式Web应用(PWA)入门教程(上)
渐进式Web应用(PWA)入门教程(上)最近关于渐进式Web应用有好多讨论,有一些人还在质疑渐进式Web应用是否就是移动端未来。 但在这篇文章中我并不会将渐进式APP和原生的APP进行比较,但有一点是可以肯定的,这两种APP的目标都是使用户体验变得更好。 移动端Web应用有很多优秀的概念让人应接不暇,但好在编写一个渐进式Web应用不是一个很困难的事情。在这篇文章里将向你介绍如何把一个普通的网站转换...转载 2018-05-30 10:54:45 · 671 阅读 · 0 评论 -
原生js实现必应自动搜索功能(事件绑定和事件代理和键盘事件),亲测chrome实现
bing search body{background-color: #333;} .bg-div{position:relative;background-image: url(../river.jpg);width:1228px;height:690px;margin: 0 auto;} .logo{background-image: url(../logo.png);height:原创 2016-09-13 18:12:30 · 1621 阅读 · 0 评论 -
原生Json.stringify的写法,将json对象转成json字符串
var json = { stringify: function (val) { var stringify = '', curVal; if (val === null) { // null return String(val);原创 2016-08-10 16:09:57 · 1991 阅读 · 0 评论 -
级联下拉列表
请选择章目录请选择接目录var chapters=[{text:'1.DOM基础',value:'1'},{text:'2.事件模型',value:'2'}];var sections={1:[{text:'1.1 文档树',value:'1.1'},{text:'1.2 节点操作',value:'1.2'},{text:'1.3 元原创 2015-07-07 20:57:05 · 356 阅读 · 0 评论 -
JS中常用函数(一)启动运行函数addLoadEvent
function addLoadEvent(func){var oldonload=window.onload;if(typeof window.onload!='function'){ //判断onload上是否绑定函数window.onload=func}else{window.onload=function(){ oldonload();转载 2015-07-20 09:46:37 · 462 阅读 · 0 评论 -
javascript深入理解js闭包
闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。一、变量的作用域要理解闭包,首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种:全局变量和局部变量。Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。Js代码 var n=99转载 2015-08-12 10:39:41 · 228 阅读 · 0 评论 -
JS实现简单移动动画函数
Whee!function positionMessage(){if(!document.getElementById) return false;if(!document.getElementById("message")) return false;var ele=document.getElementById("message");ele.style.po转载 2015-07-22 15:25:16 · 837 阅读 · 0 评论 -
常用函数(二)在现有元素后插入新的元素
function insertAfter(newElement,targetElement){var parent=targetELement.parentNode;if(parent.lastChild==targetElement){parent.appendChild(newElement);}else{parent.insertBefore(newElement,tar转载 2015-07-20 09:54:26 · 362 阅读 · 0 评论 -
JS常用扩展内建对象
判断Array是否存在某个特定的值Array.prototype.inArray=function(needle){for(var i=0,len=this.length;iif(this[i]===needle){return true;}}return false;}String反转字符串String.prototype.reverse=function转载 2016-01-13 10:36:24 · 295 阅读 · 0 评论 -
实现按上下键控制li的样式移动
直播列表 html,body,ul,li{ margin: 0; padding: 0; font-size: 24px; color: #f0f0f0; } li{ list-style:none; } #bgc{ width: 160px; height: 720px; background原创 2016-04-07 18:18:32 · 5779 阅读 · 1 评论 -
UTC时间(单位毫秒)转换标准时间格式
Date.prototype.format = function (format) { var o = { "M+": this.getMonth() + 1, //month "d+": this.getDate(), //day "h+": this.getHours(), //hour转载 2016-04-07 18:22:25 · 18954 阅读 · 0 评论 -
JS实现轮播图
HTML: 轮播图 *{margin: 0; padding: 0;} ul{list-style: none;} .slideShow{ position:relative; margin: 100px auto; width: 340px; height: 140px; overflow: hidden; }原创 2016-06-05 17:33:40 · 391 阅读 · 0 评论 -
四级联动下拉菜单
jQuery多级联动美化版Select下拉框DEMO演示 body { color: #555; font-size: 14px; font-family: "微软雅黑", "Microsoft Yahei"; background-color: #EEE;}a { color: #555;}a:hover { color: #f00;}.input {原创 2016-06-28 13:45:05 · 2485 阅读 · 2 评论 -
VLC播放RTSP视频流(360浏览器可用)
--> var itemId = 0; var url = "";var totalTime = "";var playTime;var ss=0;var sMin=0;var sH=0;var millisec=0;var tottime = 0;var iTime;function registerVLCEvent(event, hand原创 2016-06-28 20:00:48 · 7220 阅读 · 4 评论 -
JS无缝隙轮播图
原生JS代码 焦点轮播图 *{ margin: 0; padding: 0; text-decoration: none;} body { padding: 20px;} #container { width: 600px; height: 400px; border: 3px solid #333; overfl转载 2016-08-18 15:10:56 · 818 阅读 · 0 评论 -
简单倒计时逻辑实现
团购——限时抢-->还剩 var sh; function FreshTime(){ var endtime=new Date("2016/10/15,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime= parseInt((endtime.getTi转载 2016-09-09 17:14:50 · 1235 阅读 · 0 评论 -
仿京东商城侧边导航栏写法
body { padding: 0; font-size: 10pt; behavior:url(css/csshover.htc); } .topmenu { display: block; width: 220p转载 2016-08-19 15:18:47 · 18052 阅读 · 0 评论 -
js五子棋的实现
html 五子棋 csscanvas{ display: block; margin: 50px auto; box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;}js var me = true;var over = false;var chessBox = [转载 2016-09-11 17:44:19 · 2717 阅读 · 0 评论 -
xml转json对象
this.xmlToJson = function(xml){ // Create the return object var obj = {}; if(xml.nodeType == 1&&xml.nodeName != "#document") { // element // do attributes if(xml.attributes原创 2016-08-10 16:07:06 · 280 阅读 · 0 评论 -
渐进式Web应用(PWA)入门教程(下)
渐进式Web应用(PWA)入门教程(下)上篇文章我们对渐进式Web应用(PWA)做了一些基本的介绍。渐进式Web应用(PWA)入门教程(上)在这一节中,我们将介绍PWA的原理是什么,它是如何开始工作的。第一步:使用HTTPS渐进式Web应用程序需要使用HTTPS连接。虽然使用HTTPS会让您服务器的开销变多,但使用HTTPS可以让您的网站变得更安全,HTTPS网站在Google上的排名也会更靠前。...转载 2018-05-30 10:57:11 · 279 阅读 · 0 评论