v-cloak 当用户频繁刷新页面或网速慢时，页面未完成 Vue.js 的加载时，导致 Vue 来不及渲染，这就会导致在浏览器中直接暴露插值(表达式)，Vue由此也给出了解决方法。在指定标签或整个父容器加入v-cloak指令，通过css选择器选中v-cloak，隐藏元素即可。 // html <div v-cloak id="app"><span>{{ msg }}</span> </div> // css [v-cloak]{display:"none"; } // vue实例对象 => vm var vm = new Vue({el:#app,data:{msg:"hello world",...
废话少说，代码如下所述： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Vue实例中的数据,事件和方法</title> </head><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body><div id="root"><h1 v-text="number"></h1></div><script type="text/javascript">new Vue({ el:"#root",data:{msg: "world",number:123}})</script> </body> </html>显示123 <!DOCTYPE html> <html lang=...
都知道浏览器和服务端是通过 HTTP 协议进行数据传输的，而 HTTP 协议又是纯文本协议，那么浏览器在得到服务端传输过来的 HTML 字符串，是如何解析成真实的 DOM 元素的呢，也就是我们常说的生成 DOM Tree，最近了解到状态机这样一个概念，于是就萌生一个想法，实现一个 innerHTML 功能的函数，也算是小小的实践一下。 函数原型 我们实现一个如下的函数，参数是 DOM 元素和 HTML 字符串，将 HTML 字符串转换成真实的 DOM 元素且 appe...
本文实例讲述了JS添加或删除HTML dom元素的方法。分享给大家供大家参考，具体如下： 创建新的 HTML 元素 如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 <div id="div1"> <p id="p1">这是一个段落。</p> <p id="p2">这是另一个段落。</p> </div> <script> var para=document.createElement("p"); var node=document.createTextNode("这是一个新段落。"); para.appendChild(no...
本文实例讲述了JS/HTML5游戏常用算法之追踪算法。分享给大家供大家参考，具体如下： 追踪算法在动作游戏中非常常见，从很早的游戏《吃豆人》到大型的街机机战类游戏，到处可见追踪效果的身影。一个好的追踪算法将会大大提高游戏的可玩性和玩家的兴趣。 【简单算法】 先来看一个简单的跟踪算法，如下图所示，假设在canvas坐标系中存在物体A和B，物体A将把B作为追踪目标，物体在二维空间中的运动可以分解为坐标系中X、Y轴的运动，其在...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 地图格子算法。分享给大家供大家参考，具体如下： 这种算法经常用于RPG（早期的《最终幻想》、《DQ》、《仙剑奇侠传》）、SLG（《炎龙骑士团》、《超级机器人大战》）、PUZ（《俄罗斯方块》、《宝石谜阵》）类型的游戏。这类游戏中，通常情况下整个地图都是由一些地图块元素组成，在制作的时候首先给制作出地图所需要的最基本的元素进行编号，然后把这些编号的地图块组合起来就可以根...
本文实例讲述了JS/HTML5游戏常用算法之碰撞检测 像素检测算法。分享给大家供大家参考，具体如下： 使用像素碰撞检测法算是最精确的算法了，当然，带来的代价也是比较明显的，那就是效率上的低下。除非是在极为特殊的情况下，要求使用非常精确的碰撞，否则，一般情况下在游戏中是不建议使用这种算法，特别是在运行效率不太高的HTML5游戏中。 一般来说在使用像素碰撞检测之前会使用AABB矩形包围盒先检测两个精灵是否有碰撞，如果AABB...
本文实例讲述了JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法。分享给大家供大家参考，具体如下： 原理可参考：https://www.gxlcms.com/article/152744.htm 完整实例代码如下： <!DOCTYPE html> <html lang="en"> <head><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta charset="UTF-8"><title>A*寻路算法</title><style>#stage {border: 1px solid lightgra...
如下所示： <div ng-app="module" ng-controller="ctrl">{{data}}<hr><div ng-bind-html="data"></div><hr><div ng-bind-html="title | trustHtml"></div> </div> <script>var m = angular.module(module, []);/*$sce服务写成过滤器*/m.filter(trustHtml,[$sce,function($sce){return function(data){return $sce.trustAsHtml(data);}}])m.controller(ctrl, [$scope, $sce, function ($scope, $sce) {/*第一种：不用过滤器的方式*/...
在前端与后台的撕逼中，很大一部分是因为数据的问题。使用angular会遇到这样的问题，后台返回的数据不是自己想要的纯字符串，而是带有html标签及属性的，那么我们将它输出来后，在页面上就出现了带有标签的内容，很不优雅。那么找后台更改的话，又会引起议论撕逼大战，而且人家不一定有时间搭理你。这样的情况下，我们就要自己动手，丰衣足食了。 通常angular绑定数据有这样的方法，{{}}或者ng-bind =”,此时数据为带有html标签的数...
安装依赖包 cnpm install js-striphtml 使用： 删除标签样式： var striphtml = require(js-striphtml); striphtml.striptags(<body>I am a <b>HTML</b> string.<div class="clear"></div></body>, [ b ]); // Returns "I am a <b>HTML</b> string."删除标签样式（保留指定样式）： var striphtml = require(js-striphtml); striphtml.stripAttr(<p style="background:green">I am a <b>HTML</b> string. <img src="stringimg.jpg"...
效果图选择后 js代码 <script language="javascript" type="text/javascript">//定义 费用科目 数据数组fylxArray = new Array();fylxArray[0] = new Array("","");fylxArray[1] = new Array("汽车费用","汽油费|过路费|修理费");fylxArray[2] = new Array("房屋租赁费","分公司及办事处房租|宿舍房租|项目房租");fylxArray[3] = new Array("差旅费用","餐费|住宿费|交通费");fylxArray[4] = new Array("招待费","招待费");fylxArr...
print() 方法用于打印当前窗口的内容，支持部分或者整个网页打印。 调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。 win10下测试ie11、chrome、firefox、360、edge 都可以成功去掉页眉页脚；<!DOCTYPE html> <html> <head><title>打印</title><meta charset="utf-8"><style>.printBox {width: 300px;height: 300px;border: 1px solid blue;}</style><!-- 打...
实现效果演示：实现代码及注释： <!DOCTYPE html> <html> <head><title>楼层跳跃式的页面布局</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;}body, html{height: 100%;}ul{list-style: none;height: 100%;}ul li{height: 100%;}ol{list-style: none;position: fixed;top:200px;left: 50px;}ol li{width: 50px;height: 50px;border: 1px solid #000;text-align: center;line-height: 50px;margin-t...
最近用js和html5写出的弹出多个对话框，并且可以自动排列，占满屏幕时会自动从新开始，话不多说直接上图： 用起来还是十分方便的，如果你感兴趣，代码在后面首先是Html页面<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body style="width: 100vw;height: 100vh;padding: 0;margin: 0"> <input type="button" value="生成div" onclick="creatDialog()" style="position: ab...