js
关注
分享
扫一扫
luoyu6
个人生活和学习笔记
展开
-
jQuery实现qq音乐播放器项目-ajax跨域使用
页面是pc端的页面主页index.html包含了音乐播放暂停，上一首下一首切换，拖动进度条改变播放位置，删除当前音乐，歌词联动变色等功能，数据是本地的json格式的文件点击此处页面效果search_music.html,点击主页的logo跳转过去，输入搜索的关键词，就可以看到歌词信息，播放歌曲。调用的是QQ音乐的数据，虽然包含了搜索音乐，播放音乐，显示搜索历史，歌词变色的功能，但是界面...原创 2018-09-26 13:08:08 · 1798 阅读 · 1 评论 -
Ajax的和HTML5元素拖放实现购物车功能
浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持拖动。注意:Safari 5.1.2不支持拖动.效果图：当每一个黑色的div被拖动到灰色div中，灰色div就追加一条黑色div的信息。并且自动计算总金额 接下来我先放一坨代码在这里，先别吐，简单扫一眼就可以，一会我给你说下每一段代码的作用...原创 2018-09-30 17:15:04 · 1729 阅读 · 0 评论 -
js面向对象的几种常见写法
//定义Circle类，拥有成员变量r，常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; ...翻译 2018-10-07 18:08:19 · 259 阅读 · 0 评论 -
jQuery实现加入购物车飞入动画效果之开发不停，填坑不止（起点位置在Y轴方向位置偏移）
开发时为了完成购物车的飞入抛物线，因为懒惰随大流使用了fly.js插件，用的时候遇到的两个坑坑~~1. 有滚动条时，抛物体的起点位置在Y轴方向上有位置偏移，偏大2. 页面有滚动条时，抛物体的结束位置不一样，偏大我：(⊙o⊙)…烦烦的。。。这就是用别人东西的代价 。。。。。。不管如何先来解决第一个坑吧实现加入购物车效果，正常我们是这样使用的（第一次用的话，点击这里查看官方使用说明...原创 2018-10-30 21:44:22 · 2592 阅读 · 4 评论 -
Chrome浏览器调试HTML, CSS和Javascript
有的时候，你发现页面上元素被修改了，但是你不知道被什么代码修改了，那可以给DOM增加断点比如页面有个元素，他的max-height属性是动态改变的，但是你不知道被什么代码修改了。那我现在要给她增加一个断点 1.把鼠标放到html代码上，右键添加上断点： 点完了之后，我们在看DOM Breakpoints就给我们添加上断点了当元素被改变的时候触发断点,如下：（注...原创 2018-11-01 20:28:00 · 5584 阅读 · 0 评论 -
js获取元素位置
obj.clientWidth //获取元素的宽度（width+padding）obj.clientHeight //元素的高度obj.offsetLeft //元素相对于父元素的leftobj.offsetTop //元素相对于父元素的topobj.offsetWidth //元素的宽度(width+padding+border)obj.offsetHeight //元素的高度...转载 2018-11-10 20:38:42 · 188 阅读 · 0 评论 -
JS监听浏览器的返回事件
$(function(){pushHistory();window.addEventListener("popstate", function(e) { alert("监听到返回按钮事件啦"); //根据自己的需求实现自己的功能 //window.location.href = 'https://www.baidu.com'}, false);function pu...转载 2019-01-26 13:57:26 · 3125 阅读 · 0 评论 -
实现QQ音乐项目的一些技术点jQuery，html5
及时做下笔记，谨防忘记，忘记也不怕，回来这里找就阔以了1.//当前音乐播放结束，自动播放下一首 audio.onended = function() { $('.icon-xiayishou2').trigger('click'); }...原创 2018-10-31 13:49:46 · 1681 阅读 · 0 评论 -
js jquery 获取元素(父节点,子节点,兄弟节点),元素筛选
js jquery 获取元素(父节点,子节点,兄弟节点)一,js 获取元素(父节点,子节点,兄弟节点) var test = document.getElementById("test"); var parent = test.parentNode; // 父节点 var parent = test.parentNode.parentNode; // 父节点的父...转载 2018-10-26 18:45:02 · 295 阅读 · 0 评论 -
JS判断键盘按键
获取键盘的键码的方法如下：window.document.onkeydown = disableRefresh; function disableRefresh(e) { e = (e) ? evt : window.event alert(evt.keyCode) //按下键盘任意键，都会弹出对应键码 ...原创 2018-10-29 19:26:01 · 1821 阅读 · 0 评论 -
解决锚点链接跳转后位置上下偏移的偏移的办法
应用场景：我们把导航固定在页面顶部的时候，点击锚链接跳转到相应的部分时，很可能导航把页面的内容覆盖了，像这样导航把文字覆盖了， 原因就是我们设置了padding这类css属性 正常盒模型的宽度：width=width+padding+border,其实就是导航盖住了盒模型的padding，覆盖原因就不过多解释了。我们还是说下解决办法吧问题：既然是锚链接，要跳转，就要用href呀，同时，...原创 2018-10-05 23:08:01 · 15811 阅读 · 12 评论 -
js-with用法
js-with用法首先，给出个人的理解：with就是为了封装某个对象，减少某个对象的调用比如：定义一个对象var a={},a.name='张三';a.sex='女';一般的调用方式console.log(a.name);console.log(a.sex);使用with之后的调用with(a){ console.log(name); console...转载 2018-10-07 16:35:14 · 389 阅读 · 0 评论 -
JavaScript prototype 属性
定义和用法prototype 属性使您有能力向对象添加属性和方法。语法object.prototype.name=value实例在本例中，我们将展示如何使用 prototype 属性来向对象添加属性：<html><body><script type="text/javascript">function employee(n...翻译 2018-10-07 17:35:05 · 112 阅读 · 0 评论 -
Javascript 面向对象编程（一）：封装
Javascript是一种基于对象（object-based）的语言，你遇到的所有东西几乎都是对象。但是，它又不是一种真正的面向对象编程（OOP）语言，因为它的语法中没有class（类）。那么，如果我们要把"属性"（property）和"方法"（method），封装成一个对象，甚至要从原型对象生成一个实例对象，我们应该怎么做呢？一、 生成实例对象的原始模式假定我们把猫看成一个对象，它有...转载 2018-10-07 18:32:01 · 106 阅读 · 0 评论 -
html5拖放小实例
参照物：拖放的元素 和 目标点 API事件: ondragstart:开始拖放元素触发的事件 , 对象：拖放的元素 ondrag:拖放过程中触发的事件， 对象：拖放的元素 ondragenter：...原创 2018-09-28 23:01:55 · 219 阅读 · 0 评论 -
js去除字符串空格
str为要去除空格的字符串:去除所有空格: str = str.replace(/\s+/g,""); 去除两头空格: str = str.replace(/^\s+|\s+$/g,"");去除左空格：str=str.replace( /^\s*/, '');去除右空格：str=str.replace(/(\s*$)/g, "");...原创 2018-10-16 21:00:27 · 138 阅读 · 0 评论 -
基于jQuey的tab切换,qq音乐播放器
tab切换很常见了，基本就是两种情况1：点击不同的的tab选项，选项对应的内容改变css样式(或者js),2：不断点击当前按钮，选项对应的内容改变css样式(或者js),基于这个原理，我们来做个tab切换，两个情况都包含有的，就拿QQ音乐来说吧点击不同的单曲，会自播放 ，不断点击当前歌曲，会播放暂停切换，我们要完成的就是这个事情那怎么搞呢，我们可以给歌曲列表设置一个变量b啊...原创 2018-10-22 18:08:10 · 318 阅读 · 0 评论 -
JS/JQ获取各种屏幕的高度和宽度
网上总结的蛮全面的了，直接拿来用了:Javascript:网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)...转载 2018-10-29 21:42:16 · 244 阅读 · 0 评论 -
Array.from和slice
对于还没有部署该方法的浏览器，可以用Array.prototype.slice方法替代。//es6const toArray = ((arg) =>Array.from ? Array.from(arg) : arg => [].slice.call(arg));toArray([1,0])//[1,0]//es5var toArray=function(arg)...原创 2019-07-21 21:53:45 · 454 阅读 · 0 评论