- 博客(53)
- 收藏
- 关注
转载 prototype详解
参考链接:https://segmentfault.com/a/1190000003017751 function Person(name){ this.name=name; } Person.prototype.sayName=function(){ console.log(this.name); } var person=n...
2019-09-05 21:52:09
906
原创 vue v-for 使用:key属性识别DOM
添加 :key 属性可以让vue识别DOM哪个是哪个上图中,列表DOM每一项有复选框,勾选状态代表了DOM自身在列表中的位置。现更新列表数据,以查看勾选项是否可以正确渲染。先勾选第三项,再删除第三项。正确的DOM渲染应该是只留下了1 2 4项,且每一项都未勾选。实际结果:实际结果显示,如果没有正确的key属性(下方所示),勾选的项目会被认为是列表第三项,移除第三项后,第...
2019-03-11 14:57:26
852
原创 css垂直居中
设置父元素position为relative,要居中的子元素position为absolute,然后设置居中子元素的位置的top和left均为50%,再将该元素进行平移translate(-50%,-50%)<div class="myParent"> <span class="myChild">123</span></div>效...
2019-02-20 11:38:24
211
原创 css清除浮动
不清除浮动产生的问题:红色为浮动的元素,浮动元素影响正常DOM流动,其父元素不考虑该浮动元素的高度,似乎无视了该浮动元素。并且影响了父元素的兄弟元素。方法一:父元素内添加空元素,并设置clear:both&amp;amp;lt;div class=&amp;quot;topDiv&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&
2019-02-20 11:20:56
155
原创 css 3D盒子动画
翻转盒子放在父容器中,触发动画的hover绑定在父容器上。否则,在360、搜狗等浏览器中,直接给3D盒子绑定hover,会出现抖动现象。本例子中,div为盛放3D盒子的父容器,且设置perspective属性,以获得更好的3D透视效果。同时,这会导致盒子翻转后大小会发生变化,再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。主要通过::before伪...
2019-01-22 11:45:13
1090
原创 浏览器环境使用es6 模块
定义一个module模块//module.jsvar m="mmm";var n="nnn";export {m,n}HTML文件script标签的type使用“module”<script type="module" src="module.js"></script>使用本地服务器本地文件模式会报错Access to script at 'file
2018-12-26 21:53:37
825
原创 matter.js技术 | collisionFilter 设置碰撞规则
matter.js技术 | 设置碰撞规则matter.js QQ交流群:796728825collisionFilter属性分析Collisions between two bodies will obey the following rules: * - If the two bodies have the same non-zero value of collision...
2018-09-13 14:19:44
2390
原创 matter.js技术 | 检测指定物体的碰撞
matter.js QQ交流群:796728825关键代码Events.on(engine, 'collisionStart', function(event) { var pairs = event.pairs; for (var i = 0; i < pairs.length; i++) { var pair = pairs...
2018-09-10 10:36:17
2528
原创 matter.js 技术 | 操作指定物体属性(旋转、加速)
引入Body模块var Body=Matter.Body;旋转物体Events.on(mouseConstraint, "startdrag", function(e){ Body.rotate(e.body,Math.PI/4); $("#rotate")[0].play();})点击物体时,将其旋转45度。此方法中,角度的单位为弧度设置物体速度$(...
2018-09-10 10:22:35
2739
原创 matter.js技术 | 删除物体
关键语句World.remove(world,body);World为Matter的World模块,world为生成的world实例,body为欲删除的物体。示例一:删除指定物体var ball=Bodies.circle(x,y,15,{});World.remove(world,ball);删除生成的球体示例二Events.on(mouseConstra...
2018-09-10 10:12:45
1345
原创 $.ajax()实现跨域访问
服务器php代码:<?php $arr = array ( 'Name'=>'希亚', 'Age'=>20 );echo $_GET['my']."(".json_encode($arr,JSON_UNESCAPED_UNICODE).")";;?>本地代码:<script type="text/javasc...
2018-08-21 17:27:59
2469
原创 nw.js打包Windows桌面应用
nw.js打包HTML5桌面应用利用HTML5技术可以生产网页,利用nw.js可以将其打包为桌面应用。 此文打包Windows平台的桌面应用。网页配置文件 一个是网页相关的文件:index.html,这是一个入口文件。 另一个是pagkage.json,这是nw.js需要读取的配置文件。下载nw.js 具体下载方法搜索nw.js,解压出来如图: 此时,点击nw.exe,如...
2018-08-19 22:20:09
4070
原创 JavaScript数组去重方法
去重原理目前有数组 [2,3,4,4,3,3,0,12,4,89] 去重的原理是,做两层循环,第一层依次检测数组元素,第二层从第一层的元素后开始,并检测后面的元素是否和第一层的元素重合,如果后面的所有元素都和这个元素不同,则这个元素在此数组中是唯一的。 比如,以此数组中第一个元素“2”为例,第二层循环从它后面的“3”开始检测,3与2不同,继续下一个,是4,也与2不同,继续下一个,如此检测,...
2018-08-14 17:36:53
165
原创 matter.js学习笔记(八)--Composites.newtonsCradle()制造牛顿摆
Composites.newtonsCradle()为内置函数,可以生成牛顿摆。
2017-09-12 11:38:04
1910
1
原创 matter.js学习笔记(六)--Composites.softBody()制造布料或球网
Composites.softBody()制造布料
2017-09-12 10:01:01
2259
原创 matter.js学习笔记(二)--Composites.stack()分析
写在前面Composites.stack()可以用来创建物体堆。在此分析其具体用法。函数分析1.先上源码Composites.stack = function(xx, yy, columns, rows, columnGap, rowGap, callback) { var stack = Composite.create({ label: 'Stack' }),
2017-09-10 22:51:05
3847
原创 matter.js学习笔记(一)
写在前面matter.js 是一个2D的javascript物理引擎,主页展示了一些demo。 这里介绍如何创建一个基本的物理世界。用法1. html文件中引入<script src="../build/matter.js"></script>2. 创建引擎,渲染器,添加世界,生成身体模型。var Engine=Matter.Engine, Render=Matter.Render,
2017-09-10 19:17:37
11919
原创 定时器设置与取消
写在前面通过JavaScript原生的setInterval()和clearInterval()设置一个定时器和取消该定时器,从而控制页面自动生成一些内容并提供停止的功能。代码<p id="para">para:</p><button>stop</button><script> function add() { $("#para").append("add <strong
2017-04-10 22:04:18
2439
原创 jquery为元素绑定事件
写在前面为HTML元素绑定新的事件。代码<button id="bind_button">绑定单击事件</button><div id="log">日志记录:</div><script> function myBindFunc(e) { $("#log").html($("#log").html()+"<p>"+e.data.d1+e.data.d2+"</p>");
2017-04-08 22:00:02
271
原创 提示文本的隐藏与显示
写在前面这个功能类似于HTML标签的placeholder属性。不同之处在于,placeholder只有在标签获得焦点并输入非空字段时,它的文字才会消失,而此功能只要标签获得焦点就会显示,而一旦失去焦点就会消失。核心代码 $(document).ready( function () { $("#search").focus(function () {
2017-04-06 21:42:57
380
原创 浏览器的鼠标坐标值获取及pageX、clientX、screenX的差异
写在前面获取方法比较简单。重点在于理解三种值的实际意义。代码<p><strong>screen:</strong><span id="screen"></span></p><p><strong>client:</strong><span id="client"></span></p><p><strong>page:</strong><span id="page"></span></p> 三个
2017-04-05 21:30:34
1680
原创 jquery导航栏特效
写在前面用简单的另一种方法实现导航栏滑动特效。代码.line { float: none; position: absolute; left: 0; height: 3px; width: 0; padding: 0; backgro
2017-04-04 20:46:32
840
原创 swiper.js学习笔记
写在前面前面写过一篇关于swiper的笔记。之前那篇比较简单,测试的以为更多些。今天把它用在我的网站上,做了一个幻灯片效果,研究了几个参数,分享之。代码解读window.onload=function () { var mySwiper=new Swiper(".swiper-container",{ pagination:".swiper-paginatio
2017-04-03 21:37:18
1838
原创 jquery插件开发学习笔记(七)——页面平滑滚动改进
写在前面放假了。放松一天。虽然也没干什么事。三天的假期:过完一天是一天。呵呵。 把昨天的代码稍微改了一下,使其更符合自己的逻辑,毕竟原文中的page-scroll的自定义属性是个什么鬼(os:HTML的标签的属性可以自定义的吗?不知道。以后会知道的)。直接用id来定位元素了。代码$(document).ready(function () { jQuery.scrollTo=func
2017-04-02 22:06:24
358
原创 jquery插件开发学习笔记(六)——页面平滑滚动
写在前面看教科书案例。代码抄的。但原代码未实现需求功能。改动之。 现分析之。关键代码<div class="scrollnav" id="scrollnav"> <a href="#" page-scroll="#scrolltoTop" id="scrolltoTop">滑动到顶端</a><br><br><br><br><br><br><br><br><br><br><br><br><b
2017-04-01 21:52:37
464
原创 jquery插件开发学习笔记(五)——动态选择触发器
写在前面想实现这样的功能:在前面触发某个对象切换隐藏和显示的功能中,在不刷新网页的情况下,可以动态地切换触发器。原理是有两个单选按钮,提供两个触发器。用户可以选择单选按钮来触发。 目前,可以利用单选按钮来切换,但得依靠刷新网页。 还没找到解决方案。 to be continued… 以后总会有方法的。代码<form action=""> <input type="radio" nam
2017-03-31 21:56:40
450
原创 jquery插件开发学习笔记(四)——导航栏特效
写在前面想法是:对于一个导航栏,鼠标悬浮于某一项上时,该项高亮,兄弟项正常。鼠标位于导航栏之外时,所有项目正常。关键代码<ul> <li id="test_1"><a href="">home</a></li> <li><a href="">java</a></li> <li><a href="">javascript</a></li></ul> m
2017-03-30 20:53:11
300
原创 jquery插件开发学习笔记(三)
写在前面复习写插件的一些基本步骤。勿忘之。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jquery插件学习---1</title> <script src="../../lib/jquery/jquery.js"></script></head><body><p id="
2017-03-29 21:19:29
306
原创 我的threejs学习笔记(十)---平行光(二)
写在前面调整了光源的参数和位置后,阴影效果比较好。代码var d_light=new THREE.DirectionalLight(ambiColor);d_light.target=cube_2;d_light.castShadow=true;d_light.shadowCameraVisible=true;d_light.shadowCameraNear = 2;d_light.sha
2017-03-28 21:12:17
1664
原创 我的threejs学习笔记(九)---平行光
写在前面今天没出作品。效果不太满意。明早还得早起。先睡吧。明天再仔细研究平行光。代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>平行光</title> <script src="../three.js-master/three.js"></script> <script s
2017-03-27 21:53:00
2187
1
原创 我的threejs学习笔记(八)——向场景添加颜色监听
写在前面这是几句纠结了半天的代码。源代码是addColor();我写的是add(),所以效果差很多。最后把源代码粘过来对比半天才发现这个差别。也是醉了。废话不说var controls=new function () { this.ambi_Color=ambiColor; }; var gui=new dat.GUI(); gui.addColor(cont
2017-03-26 21:37:06
3813
1
翻译 声律启蒙
一东云对鱼,雪对风,晚照对晴空。 来鸿对去燕,宿鸟对鸣虫。 三尺剑,六钧弓,岭北对江东。 人间清暑殿,天上广寒宫。 两岸晓烟杨柳绿,一园春雨杏花红。 两鬓风霜,途次早行之客;一蓑烟雨,溪边晚钓之翁。
2017-03-26 12:07:39
243
原创 我的threejs学习笔记(七)——spotLight
写在前面点光源(pointlight)的特点就像夜空中的烟雾弹,向四面八方发射光线;而聚光灯(spotlight)就像手电筒或者像舞台上的探照灯,效果是一个锥形的发光区域。相比于点光源,它有照射的近场区,远场区,和发散系数。点光源属性var spotLight=new THREE.SpotLight({color:"#f2f"}); spotLight.intensity=1; sp
2017-03-25 21:13:50
2116
原创 我的threejs学习笔记(六)——3D弹性球
写在前面之前用processing写过类似的弹性球。具体写法不难,主要是在IDE熟悉的基础上理解球坐标的原理。只需要两层for循环的嵌套即可完成主体部分。for嵌套for(var fi=0;fi<=Math.PI;fi+=Math.PI/10){ var count=10-3*Math.abs(Math.PI/2-fi); for(var theta=0;theta<
2017-03-24 21:55:09
1872
原创 我的threejs学习笔记(五)——点光源属性控制
写在前面主要练习了点光源的距离和密度属性。 理解了threejs里颜色使用的原理。代码pointLight.distance=controls.pointlight_distance; pointLight.intensity=controls.pointlight_intensity; distance(距离)控制光源的照射范围;intensity(密度)控制光源的强度。全文<!D
2017-03-23 21:14:24
3914
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人