文章首发于跳跳糖社区https://tttang.com/archive/1716/
最近我们有几个H5小游戏的需求,一个是人物换装,一个是红包雨,我们都是用pixijs来做的
对任何一个机器学习问题而言,数据处理都是很重要的一步。本文将采用 Tensorflow.js(0.11.1)的 MNIST 样例(https://github.com/tensorflow/tfjs-examples/blob/master/mnist/data.js),逐行运行数据处理的代码。
jQuery大部分功能需要根据文档的DOM模型来工作,首先需要正确地解析到整个文档的DOM模型结构。使用jQuery需要在整个文档被浏览器完全加载后才开始进行。
XSS 是目前最普遍的 Web 应用安全漏洞,它带来的危害是巨大的,是 Web 安全的头号大敌。
Array:例如title: [‘文本’, ‘font-size:18px;’],数组第二项可以写任意CSS样式
大家好,我是Leon-pi,可以叫我pipi,新人报道,是个菜鸟,由于个人也是在学习过程中,文章写的也不是面面俱到,尽善尽美,请见谅。
今天,我们想向您展示如何使用CSS Masks创建一个有趣而简单却引人注目的过渡效果。与裁剪一起,遮罩是定义可见性和与元素合成的另一种方式。在下面的教程中,我们将向您展示如何在简单的幻灯片上应用现代过渡效果的新属性。我们将使用步骤()计时功能应用动画,并将掩模PNG移动到图像上以实现有趣的过渡效果。 注意:请记住,这种效果是高度实验性的,只有一些现代浏览器(现在的Chrome,Safari和Opera)才支持。 CSS面具 显示部分元素的方法,使用选定的图像作为蒙版 W3C候选推荐 来自caniuse.co
v-html 将 html 的代码输出 <script> new Vue({ el: '#app', data: { message: 'Hello World' } }) </script> v-bind 使用 v-bind 指令赋值给 HTML
注意:当前员工的职务所属的部门,此部门下的所有职务。代码表示:post.department.postSet editStaff.jsp
实体引用,在标签属性,以及对应的位置值可能会出现<>符号,但是这些符号在对应的XML中都是有特殊含义的,这时候我们必须使用对应html的实体对应的表示,比如<对应的实体就是<,>符号对应的实体就是>
Web components是一组Web平台API和用于创建和使用可重复使用的自定义HTML元素的规范,旨在帮助我们封装和打包其UI元素和功能,从而更容易构建模块化、可维护和可重用的Web应用程序组件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>打飞机</title> <style> #gamePanel{width:900px;height:500px;background:Black;position:absolute;left:100px;top:100px;} #gamePanel .score{font-size:12px;color:White;position:absolute;left:0;top:0;z-index:9999;} #gamePanel .bullet{width:5px;height:15px;position:absolute;background:url(img/bullet.png);overflow:hidden; _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bullet.png");} #gamePanel .flyer{width:48px;height:54px;position:absolute;background:url(img/flyer1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/flyer1.png");} #gamePanel .enemy1{width:29px;height:32px;position:absolute;background:url(img/enemy1.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy1.png");} #gamePanel .enemy2{width:26px;height:26px;position:absolute;background:url(img/enemy2.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy2.png");} #gamePanel .enemy3{width:48px;height:48px;position:absolute;background:url(img/enemy3.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy3.png");} #gamePanel .enemy4{width:48px;height:48px;position:absolute;background:url(img/enemy4.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/enemy4.png");} #gamePanel .bingo{width:18px;height:18px;position:absolute;background:url(img/bingo.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/bingo.png");} #gamePanel .change{width:40px;height:40px;position:absolute;background:url(img/change.png); _background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="img/change.png");} #startBtn{border-width:20px;border-style:solid;border-color:Black Black Black Green; po
使用 CSS 让元素不可见的方法很多,剪裁、定位到屏幕外、明度变化等都是可以的。虽然它们都是肉眼不可见,但背后却在多个维度上都有差别。
今天要介绍一种我们H5用的 自动计算首屏的方法,只需要引入 js,就可以自动计算得出首屏时间
要说React有什么其他框架没有的、独一无二的特性,那一定是「并发更新」。围绕并发更新,存在两个很有意思的现象:
当你想在 constructor() 中访问 this.props 时,你应该把 props 传给 super() 方法。
Lazyload 可以加快网页访问速度,减少请求,实现思路就是判断图片元素是否可见来决定是否加载图片。当图片位于浏览器视口 (viewport) 中时,动态设置 标签的 src 属性,浏览器会根据 src 属性发送请求加载图片。
动画可以使您的网站更具现代感,而且还能为网站带来更好的用户体验。幸运的是,对于开发人员来说,VueJS动画只需几分钟即可完成设置。
TOAST Tui Editor是一款富文本Markdown编辑器,用于给HTML表单提供Markdown和富文本编写支持。最近我们在工作中需要使用到它,相比于其他一些Markdown编辑器,它更新迭代较快,功能也比较强大。另外,它不但提供编辑器功能,也提供了渲染功能(Viewer),也就是说编辑和显示都可以使用Tui Editor搞定。
Web components的一个重要特性是封装——可以将html标签结构、css样式和行为隐藏起来,并从页面上的其他代码中分离开来,这样不同的功能不会混在一起,代码看起来也会更加干净整洁。其中,Shadow DOM接口是关键所在,它可以将一个隐藏的、独立的DOM添加到一个元素上。本篇文章将会介绍 Shadow DOM的基础部分。
最近看项目视频的时候对里面使用 svg 的方式感到很好奇,于是去网上查了一下,发现 svg 竟然也有类似于 css 雪碧图一样的用法,也就是 svg-sprite(孤陋寡闻了),而且配合插件后能够以组件化的方式使用 svg,非常方便。这里记录下一些相关用法。
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。
前端一般会面临 XSS 这样的安全风险,但随着 React 等现代前端框架的流行,使我们在平时开发时不用太关注安全问题。以 React 为例,React 从设计层面上就具备了很好的防御 XSS 的能力。本文将以源码角度,看看 React 做了哪些事情来实现这种安全性的。
因为css里的只是展示画布显示的大小,不像这样是canvas真正的内里图画分辨率的大小。
当我们点击文字的时候会添加一个【p_text】class,对应的style就会生效。
前端监控系列,SDK,服务、存储 ,会全部总结一遍,写文不易,希望给最后点个赞鼓励鼓励
AngularJS 是一个 JavaScript框架。它是一个以 JavaScript 编写的库。它可通过 <script> 标签添加到HTML 页面。
此文章是我最近在看的【WebKit 技术内幕】一书的一些理解和做的笔记。 而【WebKit 技术内幕】是基于 WebKit 的 Chromium 项目的讲解。
XSS攻击是指在网页中嵌入一段恶意的客户端Js脚本代码片段,JS脚本恶意代码可以获取用户的Cookie、URL跳转、内容篡改、会话劫持……等。
闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): 一、定义需求 可输入文本,以及插入表情。 兼容性:IE与标准浏览器 二、详细设计 根据
想象有这样的一个场景,类似资料卡的东东,需要在页面中展示头像和用户的名称。 头像在左,宽高100px,圆形; 姓名在右,字号16px,垂直居中。
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索。目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery
XXE漏洞触发点往往是可以上传xml文件的位置,没有对xml文件进行过滤,导致可加载恶意外部文件和代码,造成任意文件读取,命令执行、内网端口扫描、攻击内网网站、发起Dos攻击等危害 要了解xxe漏洞,那么一定得先明白基础知识,了解xml文档的基础组成。
DOM中有很多方式获取元素,比如通过id,通过标签名,通过类名,通过name的值,通过选择器等方式。
懒加载也叫延迟加载、按需加载,指在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或者应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可是窗口的哪一部分图片数据,对性能有浪费。
本来想写一篇实用而又全面的性能优化文章,很多大佬已经写了非常好,我就不再造轮子了。我这篇文章就归纳整理一下吧,方便后续我或他人学习使用。
菜鸟教程 — jQuery 教程:https://www.runoob.com/jquery/jquery-tutorial.html
乍一看,让我们手写出这个逻辑应该是非常复杂的,先看看本文最后要实现的效果吧,和这个案例是非常类似的。
在前端页面的实现过程中,我们经常会遇到这个情况:有一个盒子,盒子里面需要放一张图片。这个时候,我们既可以通过添加image标签来实现,也可以通过设置背景图的形式实现,哪种更好呢? 一般情况下,可能就是哪种顺手用哪个,因为都能实现需要的功能,但如果都是这样的话,html也就没必要做两个标签了。下面就来看一下两者的区别:
文档对象模型(Document Object Model),简称DOM,是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准接口。
目前业界常用的指标就是:白屏、首屏、domready和pageloaded四个指标,在usual-index.html中, 我们通过performance API获取到响应的指标值。
在python语言中,通过文件、摄像头获取数据,并不是什么难事。但对于浏览器来说,出于安全的考虑,并不能直接访问本地文件,至于访问摄像头、麦克风这样的硬件设备,只是从HTML5才开始得到支持。本文就如果获取数据展开讨论,看看在浏览器中提取数据有哪些方法。
• 说明文档: https://www.npmjs.com/package/node-pngquant-native
使用 Object.prototype.toString 配合闭包,通过传入不同的判断类型来返回不同的判断函数,一行代码,简洁优雅灵活(注意传入 type 参数时首字母大写)
BOM全称Browser Object Model浏览器对象模型,将浏览器的各个组成部分封装成对象。
根据文章内容总结摘要。
2019年实习时的 BootStrap(4.x)基础知识 备份 BootStrap5六角学院文档: HexSchool 顺便推荐一个程序员段子网站 techug.com
领取专属 10元无门槛券
手把手带您无忧上云