本文实例讲述了JS实现换肤功能的方法。分享给大家供大家参考，具体如下： 首先准备HTML页面如下： <div id="container"> <div id="header"><h3>无人驾驶要征服世界，得先解决这些问题</h3> </div> <div id="nav"> <input type="button" id="blue" class="blue" value="蓝色主题" onclick="changeSyle(blue);" /> <input type="button" id="green" class="green" value="绿色主题" onclick="changeSyle(green);" /> </div> <div id=...
本文实例讲述了JavaScript继承与聚合。分享给大家供大家参考，具体如下： 一、继承 第一种方式：类与被继承类直接耦合度高 1. 首先，准备一个可以被继承的类（父类），例如 //创建一个人员类 function Person(name) {//现在Person里面的域是由Person里面的 来this来控制的this.name=name; }2. 然后，有个需要继承父类的子类 function Teacher(name,books) {Person.call(this,name);//相当于java中的super函数 在new Teacher时将Per...
本文实例讲述了JavaScript私有变量。分享给大家供大家参考，具体如下： 任何在函数中定义的变量，就是私有变量，因为这些变量在函数外部是无法访问到的。总的来说，私有变量包括函数的参数、局部变量和在函数内部定义的其他函数。 function add(num1, num2){var sum = num1 + num2;return sum; }上面的例子中的 num1, num2, sum 就是函数的私有变量。 如果在这个函数内部创建一个闭包，那么闭包通过自己的作用域链也可以访问这些变...
本文实例讲述了JavaScript作用域链。分享给大家供大家参考，具体如下： 跟其他语言一样，变量和函数的作用域揭示了这些变量和函数的搜索路径。对于JavaScript而言，理解作用域更加重要，因为在JavaScript中，作用域可以用来确定this的值，并且JavaScript有闭包，闭包是可以访问外部环境的作用域的。 每一个JavaScript的函数都是Function对象的一个实例，Function对象有一个内部属性[[Scope]]，这个属性只能被JavaScript的引擎访问。...
本文实例讲述了JS/HTML5游戏常用算法之追踪算法。分享给大家供大家参考，具体如下： 追踪算法在动作游戏中非常常见，从很早的游戏《吃豆人》到大型的街机机战类游戏，到处可见追踪效果的身影。一个好的追踪算法将会大大提高游戏的可玩性和玩家的兴趣。 【简单算法】 先来看一个简单的跟踪算法，如下图所示，假设在canvas坐标系中存在物体A和B，物体A将把B作为追踪目标，物体在二维空间中的运动可以分解为坐标系中X、Y轴的运动，其在...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 地图格子算法。分享给大家供大家参考，具体如下： 这种算法经常用于RPG（早期的《最终幻想》、《DQ》、《仙剑奇侠传》）、SLG（《炎龙骑士团》、《超级机器人大战》）、PUZ（《俄罗斯方块》、《宝石谜阵》）类型的游戏。这类游戏中，通常情况下整个地图都是由一些地图块元素组成，在制作的时候首先给制作出地图所需要的最基本的元素进行编号，然后把这些编号的地图块组合起来就可以根...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 像素检测算法。分享给大家供大家参考，具体如下： 使用像素碰撞检测法算是最精确的算法了，当然，带来的代价也是比较明显的，那就是效率上的低下。除非是在极为特殊的情况下，要求使用非常精确的碰撞，否则，一般情况下在游戏中是不建议使用这种算法，特别是在运行效率不太高的HTML5游戏中。 一般来说在使用像素碰撞检测之前会使用AABB矩形包围盒先检测两个精灵是否有碰撞，如果AABB...
本文实例讲述了JavaScript模板引擎实现原理。分享给大家供大家参考，具体如下： 1、入门实例 首先我们来看一个简单模板：<script type="template" id="template"><h2><a href="{{href}}" rel="external nofollow" >{{title}}</a></h2><img src="{{imgSrc}}" alt="{{title}}"></script>其中被{{ xxx }}包含的就是我们要替换的变量。 接着我们可能通过ajax或者其他方法获得数据。这里我们自己定义了数据，具体如下： var data = [{ti...
1、基础介绍 本文旨在介绍如何在项目中配置和方便的使用svg图标。 本文以vue项目为例，当然在react中的使用原理基本相似。 svg图标可以直接通过img标签来使用，也可当做icon来使用。 本文是参考了鑫旭大佬的文章：SVG Sprite技术介绍。 2、配置 安装svg-sprite-loader。通过vue-cli脚手架创建的项目默认情况下会使用 url-loader 对svg进行处理，所以需要处理下： {test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,loader: url-loader,optio...
Intro# 最近需要用 nodejs 做一个爬虫，Google 有一个 Puppeteer 的项目，可以用它来做爬虫，有关 Puppeteer 的介绍网上也有很多，在这里就不做详细介绍了。 node 小白，开始的时候有点懵逼，模块导出也不会。 官方文档上说支持 *.mjs 但是还要改文件扩展名，感觉有点怪怪的，就没用，主要是基于js的模块使用。 模块导出的两种方式# 因为对 C# 比较熟悉，从我对 C# 的理解中，将 nodejs 中模块导出分成两种形式： 1.一个要实例化才...
具体代码如下所述：<strong>组件部分</strong> <template><div class="main"><div class="page-tab"><div :class="nowPath == item.path ? tab-item tab-item_active : tab-item"v-for=(item, index) in tabList:key="index"><router-link mode="out-in":to="item.path">{{item.name}}</router-link></div> </div><transition :name="slideDirection"><slot></slot> </transition></div> </template> <script> export default {...
在vue项目开发中，我们使用axios进行ajax请求，很多人一开始使用axios的方式，会当成vue-resoure的使用方式来用，即在主入口文件引入import VueResource from 'vue-resource'之后，直接使用Vue.use(VueResource)之后即可将该插件全局引用了，所以axios这样使用的时候就报错了，很懵逼。 仔细看看文档，就知道axios 是一个基于 promise 的 HTTP 库，axios并没有install 方法，所以是不能使用vue.use()方法的。?查看vue插件 那么难道...
vue-router传递参数分为两大类 编程式的导航 router.push声明式的导航 <router-link>编程式的导航 router.push 编程式导航传递参数有两种类型：字符串、对象。 字符串 字符串的方式是直接将路由地址以字符串的方式来跳转，这种方式很简单但是不能传递参数： this.$router.push("home");对象 想要传递参数主要就是以对象的方式来写，分为两种方式：命名路由、查询参数，下面分别说明两种方式的用法和注意事项。 命名路由 命名路由的...
这篇文章在vue里使用codemirror遇到的问题，写的很不错，还有下载的方法，大家可以点击查看。 以下是自己使用过的，做出来的例子： 做出来的效果图：记住使用之前要npm下载哦 npm install vue-codemirror --savemain.js import { codemirror } from vue-codemirrorimport codemirror/lib/codemirror.cssVue.use(VueCodemirror)再到组件中使用 import { codemirror } from vue-codemirrorrequire("codemirror/mode/python/pyt...
摘要： js调用复制功能使用: document.execCommand("copy"， false); document.execCommand()方法功能很强大，了解更多请戳：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand 正文： 调用以上方法，就实现了copy功能，可是，在调用之前，你需要先选中需要复制的内容。 选中需要复制的内容可使用select()方法，然而该方法只能选中input或者textarea标签里的内容。 因此，如果你想实现点击一个按钮，就复制一...