相关阅读： Jquery代码实现图片轮播效果（一） 在网页上经常可以看到有背景图片可以自动淡入淡入切换的效果，非常漂亮，实用性也非常高。今天小编抽个时间给大家分享基于jquery代码实现图片墙自动+手动淡入淡出切换效果，一起学习吧！ 先给大家展示效果图，如果大家觉得还不错，请参考具体实现代码。添加一个div（class=container），设置宽度和高度，这里设置了宽800px，高450px。添加居中的定位。在div里面添加一个ul(class="img...
在实现自己的call,apply,bind前，需要复习一下this.所谓的this其实可以理解成一根指针：其实 this 的指向，始终坚持一个原理：this 永远指向最后调用它的那个对象,这就是精髓。最关键所在 this的四种指向：当this所在的函数被普通调用时，指向window，如果当前是严格模式，则指向undefined function test() {console.log(this); };test(); 指向window 输出下面的代码： // Window {speechSynthesis: SpeechSynthesis, caches: Cach...
js手动实现call和bind都是谎言网上有很多关于说自己实现call和bind的原理的文章，然而call和bind的原理真如他们所说的那样吗？今天就让我来推翻这些所谓的”原理“，揭开谎言下的真相。 首先看看网上对call的实现： // 手写 call Function.prototype.mycall = function (context) {context = context || window;context.fn = this;const args = [...arguments].slice(1);const result = context.fn(...args);// 执行fn时上下文cont...
这是一个简易的js无限循环轮播图，只用了一行js代码就实现了无限循环，记录一下三目运算符的伟大！ <!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-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul,li{ list-style: none; } .container { width: 600px; heig...
静态文件服务器实现 nodejs不仅仅可以用来写服务端接口，用来做静态文件服务器替代nginx的功能， 也是分分钟可以搞定的。 话不多说，先上代码： var server=http.createServer(function (req,res){fs.createReadStream(Path.resolve(__dirname,"."+req.url)).pipe(res); })在项目根目录建一个hello.html文件测试一下 hello.html内容如下： <h1>hello,world</h1>node app.js运行，打开浏览器访问一下： http://localhost/hello.html...
做过校验需求的小伙伴们都知道，校验其实是个麻烦事。 规则多，需要校验的字段多，都给我们前端带来巨大的工作量。 一个不小心，代码里就出现了不少if else等不可维护的代码。 因此，我觉得一个团队或者是一个项目，需要一个校验工具，简化我们的工作。 首先，参考一下 Joi。只看这一小段代码： Joi.string().alphanum().min(3).max(30).required() 我希望我的校验工具Coi也是链式调用，链式调用可以极大的简化代码。 校验呢，其实...
介绍采用集中式存储管理应用的所有组件的状态, 就能实现组件间数据共享 实现逻辑图从图上有两条线: Vue.use(vuec), 与 new Vuec.center(options) 第一条线Vue.use(vuec)安装插件使用Vue.use(vuec)时, 会执行vuec的install方法,会注入参数Vue 所以vuec是这样的, // index.js import {Center, install} from ./center export default {Center, install}Center对象将实例化成center(下面再说),我们先看看install方法 // center.js let...
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：下载地址 先来看一下实现效果：点击查看效果整体思路 我们先看一下使用到的文件的目录：我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件。整体思路是通过 props 来达到组件的灵活通用的效果，整体语法是使用vue的VM语法。 pageComponent.vue实现 首先实现一个分页，需要知道数据总...
简单的JS俄罗斯方块游戏源码，先给大家展示下效果图，如果大家感觉不错，请参考实现代码， 效果图： 代码如下，复制即可使用： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用JS实现俄罗斯方块游戏</title> <style type="text/css">.MainFrame{border: 1px solid burlywood;margin: 10px auto;position: relative;background-color: silver;}.MainFramediv{float: left;margin: 1px;position: absolute;/*z-...
getter和setter getter 是一种获得属性值的方法，setter是一种设置属性值的方法。 属性被赋值 a = 1的时候, a 的原型内的setter就会被触发； 而 console.log(a) 的时候，a 的原型内的getter就会被触发。 实现getter和setter 我们不能直接给变量的setter和getter 绑定事件函数，为了实现绑定我们要借助Object对象来构造带有setter和getter的属性。 这里有前辈总结的 几种实现getter和setter的方法，而且他还总结了一些Object.protot...
这里讲解一下子组件向父组件传递值的常用方式。 这里通过一个加减法的实例向大家说明一下，这个的原理。 如下图所示： 当没有任何操作的时候父组件的值是 0当点击加号以后父组件的值是 1当点击减号以后父组件的值是减一变成 0具体代码我直接贴出来，刚出炉的代码。 <!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-UA-...
使用剪贴板是一项基本技能。作为码农都应知道， Tab , Ctrl/Cmd + A ， Ctrl / Cmd + C 以及 Ctrl / Cmd + V 分别是自动聚焦、复制、粘贴的快捷键。 而对普通用户可能就不太容易了。即使用户知道剪贴板是什么，（除了）那些眼神极好或反应很快的人，其他情况下很难以突出显示他们想要的确切文字。若用户不知道键盘快捷键，也看不到隐藏的编辑菜单，或从未使用右键菜单或不知道长按触屏弹出选项菜单，那么他很可能无法察觉到复制功能...
前段时间在寻找一些关于富文本编辑器的资料，然后发现了这个名为 Pell 的项目，它是一个所见即所得（WYSIWYG）的文本编辑器，虽然它的功能很简单，但是令人吃惊的是它只有 1kb 大小。而项目最核心的文件 pell.js 只有130行，即使加上其它部分，总的 js 数量也不到200行。这引起了我的兴趣，决定看看它的源码是如何做到这一点的。 项目的主要代码在 pell.js 文件中，其结构很简单，主要功能的实现依赖于以下的几个部分 actions 对象...
需求在最近的项目中需要实现公告栏滚动显示效果如下：解决方案1、 HTML先建一个div层作为公告显示区，里面包裹一个公告列表(ul); <div class="notice"><ul><li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li><li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li><li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li><li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li></u...
在此之前我们给大家整理过用javaScript和jQuery自动加载的几种方法，大家可以参考一下：javaScript 页面自动加载事件详解 一、JavaScript自动加载 ①在文本中用onload： 当页面中所有内容（包括图片）加载完后再执行onload，如下： <body onload="alert(1)"></body> <!-- 当有一个onload --> <body onload="alert(2);alert(3);alert(4)"></body> <!-- 当有多个onload用分号隔开,依次弹出 2 3 4 -->②在脚本中用window.onl...