- 博客(53)
- 收藏
- 关注
RSS订阅转载 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
879
原创 vue v-for 使用:key属性识别DOM
添加 :key 属性可以让vue识别DOM哪个是哪个上图中，列表DOM每一项有复选框，勾选状态代表了DOM自身在列表中的位置。现更新列表数据，以查看勾选项是否可以正确渲染。先勾选第三项，再删除第三项。正确的DOM渲染应该是只留下了1 2 4项，且每一项都未勾选。实际结果：实际结果显示，如果没有正确的key属性（下方所示），勾选的项目会被认为是列表第三项，移除第三项后，第...
2019-03-11 14:57:26
828
原创 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
200
原创 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
147
原创 css 3D盒子动画
翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。主要通过::before伪...
2019-01-22 11:45:13
1034
原创 浏览器环境使用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
811
原创 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
2351
原创 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
2480
原创 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
2673
原创 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
1277
原创 $.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
2458
原创 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
4051
原创 JavaScript数组去重方法
去重原理目前有数组 [2,3,4,4,3,3,0,12,4,89] 去重的原理是，做两层循环，第一层依次检测数组元素，第二层从第一层的元素后开始，并检测后面的元素是否和第一层的元素重合，如果后面的所有元素都和这个元素不同，则这个元素在此数组中是唯一的。 比如，以此数组中第一个元素“2”为例，第二层循环从它后面的“3”开始检测，3与2不同，继续下一个，是4，也与2不同，继续下一个，如此检测，...
2018-08-14 17:36:53
148
原创 matter.js学习笔记（八）--Composites.newtonsCradle()制造牛顿摆
Composites.newtonsCradle()为内置函数，可以生成牛顿摆。
2017-09-12 11:38:04
1896
1
原创 matter.js学习笔记（六）--Composites.softBody()制造布料或球网
Composites.softBody()制造布料
2017-09-12 10:01:01
2243
原创 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
3827
原创 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
11842
原创 定时器设置与取消
写在前面通过JavaScript原生的setInterval()和clearInterval()设置一个定时器和取消该定时器，从而控制页面自动生成一些内容并提供停止的功能。代码<p id="para">para:</p><button>stop</button><script> function add() { $("#para").append("add <strong
2017-04-10 22:04:18
2399
原创 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
260
原创 提示文本的隐藏与显示
写在前面这个功能类似于HTML标签的placeholder属性。不同之处在于，placeholder只有在标签获得焦点并输入非空字段时，它的文字才会消失，而此功能只要标签获得焦点就会显示，而一旦失去焦点就会消失。核心代码 $(document).ready( function () { $("#search").focus(function () {
2017-04-06 21:42:57
372
原创 浏览器的鼠标坐标值获取及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
1652
原创 jquery导航栏特效
写在前面用简单的另一种方法实现导航栏滑动特效。代码.line { float: none; position: absolute; left: 0; height: 3px; width: 0; padding: 0; backgro
2017-04-04 20:46:32
824
原创 swiper.js学习笔记
写在前面前面写过一篇关于swiper的笔记。之前那篇比较简单，测试的以为更多些。今天把它用在我的网站上，做了一个幻灯片效果，研究了几个参数，分享之。代码解读window.onload=function () { var mySwiper=new Swiper(".swiper-container",{ pagination:".swiper-paginatio
2017-04-03 21:37:18
1819
原创 jquery插件开发学习笔记（七）——页面平滑滚动改进
写在前面放假了。放松一天。虽然也没干什么事。三天的假期：过完一天是一天。呵呵。 把昨天的代码稍微改了一下，使其更符合自己的逻辑，毕竟原文中的page-scroll的自定义属性是个什么鬼（os：HTML的标签的属性可以自定义的吗？不知道。以后会知道的）。直接用id来定位元素了。代码$(document).ready(function () { jQuery.scrollTo=func
2017-04-02 22:06:24
344
原创 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
431
原创 jquery插件开发学习笔记（五）——动态选择触发器
写在前面想实现这样的功能：在前面触发某个对象切换隐藏和显示的功能中，在不刷新网页的情况下，可以动态地切换触发器。原理是有两个单选按钮，提供两个触发器。用户可以选择单选按钮来触发。 目前，可以利用单选按钮来切换，但得依靠刷新网页。 还没找到解决方案。 to be continued… 以后总会有方法的。代码<form action=""> <input type="radio" nam
2017-03-31 21:56:40
435
原创 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
293
原创 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
298
原创 我的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
1643
原创 我的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
2170
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
3796
1
翻译 声律启蒙
一东云对鱼，雪对风，晚照对晴空。 来鸿对去燕，宿鸟对鸣虫。 三尺剑，六钧弓，岭北对江东。 人间清暑殿，天上广寒宫。 两岸晓烟杨柳绿，一园春雨杏花红。 两鬓风霜，途次早行之客；一蓑烟雨，溪边晚钓之翁。
2017-03-26 12:07:39
232
原创 我的threejs学习笔记（七）——spotLight
写在前面点光源（pointlight)的特点就像夜空中的烟雾弹，向四面八方发射光线；而聚光灯（spotlight）就像手电筒或者像舞台上的探照灯，效果是一个锥形的发光区域。相比于点光源，它有照射的近场区，远场区，和发散系数。点光源属性var spotLight=new THREE.SpotLight({color:"#f2f"}); spotLight.intensity=1; sp
2017-03-25 21:13:50
2093
原创 我的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
1860
原创 我的threejs学习笔记（五）——点光源属性控制
写在前面主要练习了点光源的距离和密度属性。 理解了threejs里颜色使用的原理。代码pointLight.distance=controls.pointlight_distance; pointLight.intensity=controls.pointlight_intensity; distance（距离）控制光源的照射范围；intensity（密度）控制光源的强度。全文<!D
2017-03-23 21:14:24
3884
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人