前端集结号
专注前端技术,追逐代码人生。
陈田田
专注前端
展开
-
一篇文章弄懂 JavaScript 中的 import
import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode,导入的模块都运行在严格模式下。import语句不能在嵌入式脚本中使用。语法import defaultExport from “module-name”;import * as name from “module-name”;import { export } from “module-name”;...翻译 2018-12-07 15:35:31 · 3319 阅读 · 0 评论 -
CSS设置选中网页文字时的背景和颜色
CSS设置选中网页文字时的背景和颜色在网页中,选中某段文字,默认的显示效果为:可以看到,选中后文字颜色为白色,背景为蓝色。现我们想设置,选中后文字为红色,背景为黄色。需要用到CSS伪类 ::selection。IE9+、Opera、Google、Chrome、Safari都支持 ::selection 选择器。Firefox 通过其私有属性 :: moz-selection 支持。设...原创 2018-12-06 14:38:35 · 4490 阅读 · 0 评论 -
微信小程序教程:文字超出显示区域后隐藏并显示省略号
单行文字超出后隐藏首先容器需要有固定的宽高,其次加入以下代码即可。view { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}多行文字超出后隐藏容器不需要有固定的宽高,只需加入以下代码即可。无需指定高度,只需指定最多显示几行,属性 -webkit-line-clamp。本示例中最多显示3行...原创 2018-11-27 12:46:00 · 1726 阅读 · 0 评论 -
CSS和网络性能
CSS和网络性能CSS对于呈现页面至关重要 - 在找到、下载和解析所有CSS之前,浏览器不会开始呈现 - 因此我们必须尽可能快地将其放到用户的设备上。关键路径上的任何延迟都会影响我们的“开始渲染”,并让用户看到空白屏幕。什么是大问题?从广义上讲,这就是CSS对性能至关重要的原因:浏览器在构建渲染树之前无法渲染页面;渲染树是DOM和CSS组合结果;DOM是HTML加上需要对其进行操作的...原创 2018-11-23 15:38:29 · 380 阅读 · 0 评论 -
微信小游戏开发(9)- 分包加载
随着小游戏的玩法越来越丰富,开发者对于扩大包大小的需求越来越强烈,所以微信推出了小游戏分包加载这一个功能。 所谓的分包加载,即把游戏内容按照一定的规则拆分成几个包,在首次启动时先下载必要的包,这个必要的包我们称为【主包】,开发者可以在主包内触发其他分包的下载,从而把首次下载的耗时分散到游戏运行中。分包加载包大小限制目前小游戏分包大小有如下限制: 整个小游戏所有包大小不超过8M ...原创 2018-08-31 09:47:16 · 4362 阅读 · 1 评论 -
微信小游戏开发(8)-模块化
模块化小程序提供了CommonJS风格的模块API,可以通过module.expotrs和exports导出模块,通过require引入模块。 我们在根目录下新建文件夹src,再在src中新建文件夹util,在util中新建module.js。|----src| |----util| |----module.js在module.js中编写一个方法,将hero.pn...原创 2018-08-30 15:07:12 · 571 阅读 · 0 评论 -
微信小游戏开发(7)-支持情况和运行环境
一、支持情况基本上所有基于HTML5的游戏引擎都是依赖于浏览器环境提供的BOM和DOM API,但是小程序是一个不同于浏览器的JavaScript运行环境,没有BOM和DOM API。因此如果要在小游戏中使用引擎,需要对引擎进行改造。 目前,Cocos,Egret,Laya 已经完成了自身引擎及其工具对小游戏的适配和支持,对应的官方文档也对接入小游戏的开发做了介绍,具体可查阅官方文档。 U...原创 2018-08-29 13:38:26 · 1100 阅读 · 0 评论 -
微信小游戏开发(6)-Adapter
Adapter 小游戏的运行环境在IOS上是JavaScriptCore,在Android上是V8,都是没有BOM和DOM的运行环境,没有全局的document和window对象。 但通过调用微信官方提供的Adapter后,就可以调用BOM和DOM的方法了。 所谓的Adapter是一个抽象的代码层,并不特指某一个适配小游戏的第三方的库。它是使用wx API 模拟BOM和DOM的代码组成的库,...原创 2018-08-27 17:23:00 · 1248 阅读 · 0 评论 -
微信小游戏开发(5)-全局对象和文件限制类型
一、全局对象window对象是浏览器环境下的全局对象。 小游戏运行环境中没有BOM API,因此没有window对象。 但是小游戏提供了全局对象GameGlobal,所有全局定义的变量都是GameGlobal的属性。console.log(GameGlobal.setTimeout === setTimeout);console.log(GameGlobal.requestAni...原创 2018-08-24 09:27:02 · 1686 阅读 · 0 评论 -
微信小游戏开发(4)-动画和触摸事件
一、动画在JavaScript中,一般通过setInterval、setTimeout、requestAnimationFrame来实现动画效果。 微信小游戏对这些API提供了支持:setInterval()setTimeout()requestAnimationFrame()clearInterval()clearTImeout()cancelAnimationF...原创 2018-08-23 09:16:44 · 2879 阅读 · 0 评论 -
微信小游戏开发(3)
一、wx API 我们只能用JavaScript来编写小游戏。 小游戏的运行环境是一个绑定了一些方法的JavaScript VM。不同于浏览器,这个运行环境没有BOM和DOM API,只有wx API。 接下来我们将介绍如何用wx API 来完成创建画布、绘制图形、显示图片的基础功能。 二、创建Canvas 调用wx.createCanvas() 接口,可以创建一个Canvas对象。 ...原创 2018-08-22 09:45:02 · 2556 阅读 · 1 评论 -
微信小游戏开发(2)
一、文件结构 在上一节中,我们已经看到了小程序开发的界面。在界面中的中间部分,为文件结构区域: 可以看到该项目中有: audio文件夹:用来存放音频文件; images文件夹:用来存放图片文件; js文件夹:用来存放脚本文件; .game.js文件; .game.json文件; .project.config.json文件。 其中,只有两个是小程序的必要文件: ① game...原创 2018-08-21 10:13:00 · 2422 阅读 · 0 评论 -
微信小游戏开发(1)
一、安装开发工具 前往开发者工具下载页面,网址:https://developers.weixin.qq.com/minigame/dev/devtools/download.html,根据自己的操作系统下载对应的安装包进行安装。 二、创建小游戏项目 1、打开微信开发者工具,选择小程序项目。 2、此时需要输入三项内容:项目目录、APPID、项目名称。 其中,项目目录是你在本地存放...原创 2018-08-20 15:33:51 · 8549 阅读 · 0 评论 -
CSS清除浮动方法大全
一、浮动产生的原因 子元素使用了 CSS 的 float 属性后,脱离了文档流,导致其父元素高度无法被撑开,从而引起父元素的某些 CSS 属性无法正常显示,同时导致后续元素的显示位置出现错位。示例代码:页面效果:我们可以看到:①父元素 out-box 没有被撑开;②父元素 out-box 后面的 p 元素也收到了影响。二、解决方法 方法1:为父元素设置高度 .out-box { height原创 2017-11-23 18:35:39 · 331 阅读 · 0 评论 -
前端面试题-20170802
**诚邀您加入前端交流群580256837进行学习交流或获取本面试题答案! 另外群中会定期分享前端面试题、前端书籍、前端特效等前端领域知识! 让我们一起努力,成就更好的自己!**1.JS类 执行以下代码会报什么错误?如何纠正? 2.JS类 执行如下代码,会得到什么结果?如何纠正?原创 2017-08-02 12:33:45 · 710 阅读 · 0 评论 -
JSON格式-给后台传递数据时需要注意的地方
1.在前端 2.在后台原创 2017-07-06 16:18:21 · 635 阅读 · 0 评论 -
使用CSS3实现加载中动画
在以往的网页制作中,通常会使用一个GIF图片来表达loading效果。但随着CSS3的兴起与发展,越来越多的加载中特效可以通过动画效果来实现。这样做得好处是: 1.较少http请求, 2.解决GIF图片失真的问题, 3.便于大小以及颜色的调整。以下为博主新制作的一个loading效果图: 部分代码截图如下: 下载源文件,可进入 QQ 前端交流群 580256837,下载【CSS3实原创 2017-07-04 15:20:18 · 1257 阅读 · 0 评论 -
js判断是否在微信浏览器中打开
用JS来判断了,经过查找资料终于实现了效果,直接上代码function is_weixn(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=="micromessenger") { return true; } else {原创 2017-04-11 16:34:42 · 808 阅读 · 0 评论 -
兼容问题——间距
【趣皮士】微信公众号,问答详情页 在PC端显示正常,在手机端会有间隙。PC端效果图 手机端效果图 原因: 并不是间距样式的问题,而是因为图片的问题 在PC端图片不存在时,其不占空间,但在手机端它是需要占有空间的。将代码从原来的的: 改为:原创 2017-04-06 16:45:56 · 575 阅读 · 0 评论 -
微信原生alert带有URL的问题
重写alert方法<script> window.alert = function(name){ var iframe = document.createElement("IFRAME"); iframe.style.display="none"; iframe.setAttribute("src", 'data:text/plain,');原创 2017-03-31 17:53:14 · 3320 阅读 · 0 评论 -
前端面试题
1.写一个方法,在一个未知对象中,找出所有的“学习交流”,并 console.log 对象输出它的引用地址,以及对应值以及当前所在对象和当前对象有多少个目标值。 vartarrgetObj = { a:{ b:{ c:{ d:{ e:{ name:”百度”} }, l:{ name:”学习交流–> 群:97345400”} } } }, d:”90”, e:”90”, l:{ a:{ b:{ c:原创 2017-03-21 16:24:27 · 697 阅读 · 0 评论 -
将多个参数拼接到一起,传递给后台
在与后台交互的过程中,会遇到需要将同一类的多个参数传递给后台的情况。这个时候的解决方法是将这些同类的参数拼接为一个参数,传递给后台。代码如下:<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script></head>原创 2017-03-20 11:49:12 · 4723 阅读 · 0 评论 -
动态给select赋值
当点击页面中的一些元素,会改变select的值,这样的情况比较多见。代码如下:<!DOCTYPE html><html><head> <title></title> <script type="text/javascript" src="jquery-1.11.3.min.js"></script> <style type="text/css"> sele原创 2017-03-20 11:27:02 · 8325 阅读 · 2 评论 -
box-sizing属性值和作用
兼容问题 首先,box-sizing属性在FireFox中存在兼容问题,所以需要使用-moz-box-sizing做一下兼容。属性值box-sizing:content-boxbox-sizing:border-boxbox-sizing:inheritcontent-box这是box-sizing的默认属性值是CSS2.1中规定的宽度高度的显示行为在CSS中定义的宽度和高度就对应到原创 2017-01-20 17:45:18 · 11483 阅读 · 0 评论 -
清除浮动常用方法
为什么要清除浮动 浮动会使当前标签产生向上浮的效果,导致不同浏览器在计算父级元素高度,或者显示前后标签位置的时候产生意想不到的问题。清除浮动的方法为父元素定义height设置父元素浮动,同时为其设置高度在浮动元素的后面添加一个空的div标签,并为新添加的标签设置clear:both在浮动元素的后面添加一个空的br标签,并为新添加的标签设置clear:both为父元素设置overflow:原创 2017-01-20 12:47:31 · 553 阅读 · 0 评论 -
行内元素与块级元素的区别,行内块级元素在IE8-的兼容性
行内元素与块级元素的区别行内元素最好不要包裹块级元素,但是块级元素可以任意的包裹行内元素行内元素如果其上一个元素也是行内元素,则他们会分布在统一水平线上,即在一行上排列,块级元素不论上一个元素是行内元素还是块级元素都要另起一行,单独占一行。对于行内元素设置with、height、margin值无效,但对于块级元素,设置这些值是有效的。行内块级元素在IE8以下的兼容性div { dis原创 2017-01-19 17:10:18 · 3582 阅读 · 0 评论 -
浏览器与内核
在前端的开发工作或是面试过程中,经常会用到关于浏览器及其内核的知识。tt在这里给大家总结一下。- 浏览器 —— 内核 - 谷歌浏览器 Chrome —— Webkit - 火狐浏览器 FIreFox —— Gecko - 微软浏览器 IE —— Trident - 苹果浏览器 Safari —— Webkit原创 2017-01-19 16:01:15 · 629 阅读 · 0 评论 -
鼠标划上之cursor
用户在使用浏览器查看页面时,许多鼠标划上的操作可以提升用户体验度。 比如在默认的文字上显示的是光标,在可点击的链接处显示的是手型,可以说这两种使我们最为常用的显示方式。但除了这些之外,还有许多的鼠标划上显示方式,如下如: 对应于cursor可以使用的值都在上面的表格中,这里是一段示例代码,大家可以复制感受一下。<!DOCTYPE html><html><head> <title>c原创 2017-01-18 19:00:16 · 488 阅读 · 0 评论 -
button按钮
button按钮的type属性有: ①type=“button” ②type=“submit” ③type=“reset”对应的每一种的作用分别为: ①type=“button”,表示为一个普通的按钮 ②type=“submit”,表示提交,作用是提交其所关联的表单 ③type=“reset”,表示重置,作用是将其所关联的表单中的输入值重置。引申: button和input type=原创 2017-01-18 18:48:56 · 651 阅读 · 0 评论 -
JavaScript函数基本概念
1.函数是一段只定义一次,但可能被执行或调用任意次的JavaScript代码。 2.JavaScript函数是参数化的:函数的定义会包括一个称为形参的标识符列表,这些参数在函数体中像局部变量一样工作。 3.函数调用会为形参提供实参的值。 4.函数使用它们实参的值来计算返回值成为函数调用表达式的值。 5.除了实参之外,每次调用还会拥有另一个值——本次调用的上下文——这就是this关键字的值。6原创 2017-01-16 14:11:31 · 712 阅读 · 0 评论 -
JavaScript之函数入门详解
函数是一段只定义一次,但可能被执行或调用任意多次的JavaScript代码。JavaScript中对的函数是参数化的:函数的定义会包括一个称为形参的标识符列表,这些参数在函数体中像局部变量一样工作。函数调用会为形参提供实参的值。函数使用它们实参的值来计算返回值,成为该函数调用表达式的值。除了实参之外,每次调用还会拥有另一个值——本次调用的上下文——这就是this关键字的值。如果函数挂载在一个对象上,原创 2016-12-08 17:21:36 · 731 阅读 · 0 评论 -
阻止默认行为(二)
之前tity发表了一篇【 阻止默认行为】的文章。在那篇文章中,给大家讲解了基于jQuery的event.preventDefault()方法,今天给大家介绍通过return false来阻止默认行为的方法。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>阻止默认行为</title> <script typ原创 2016-12-08 12:30:36 · 509 阅读 · 0 评论 -
解决 jQuery Validate 在IE8中不兼容的问题
表单在HTML中占据着重要的地位,在客户端对表单进行验证也是前端工作中非常重要的一个环节,在这种形势下表单验证插件也应用而生,其中最为杰出的要数 jQuery Validate。但是与很多常见的插件一样,对于IE9之下的浏览器支持度并不好。今天tity在这里给大家提供一种使得jQuery兼容IE8的方法: 在未压缩的validate.js文件中找到如下代码(446行附近):return $([])原创 2016-12-08 12:21:19 · 4274 阅读 · 0 评论 -
使用jQuery实现鼠标滑过图片移动特效
在网页应用中,鼠标操作是最为常见和频繁的操作,在用户移动鼠标浏览页面的时候,一些交互特效的提醒会增强用户体验度,也可让用户感觉页面在和他“交流”,从而增加用户在页面的逗留时间,以及增加深层次访问的可能性。今天tity带大家做一个简单的示例,当鼠标移动到图片上的时候图片会向上动一下,等到鼠标离开后,图片又返回到原来的位置。首先,我们先来做如下图所示的页面布局: 页面布局部分:<ul> <li原创 2016-12-08 12:06:06 · 3067 阅读 · 0 评论 -
使用原生JavaScript获取单选按钮radio的选中值
主要原理就是遍历所有的单选按钮,当某个单选按钮选中的时候,将它对应的值传递给我们赋值的参数,并且跳出遍历循环。如果想知道如何使用jQuery来获取单选按钮的值,请点击这里。示例代码:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>获取单选按钮选中的值</title></head><b原创 2016-12-01 16:53:20 · 7880 阅读 · 0 评论 -
使用jQuery获取单选按钮radio的选中值
简单来说:var val = $('input[name="sex"]:checked').val();整体代码:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <title>获取单选按钮选中的值</title></head><body><label><input type="radio" na原创 2016-12-01 16:39:41 · 36176 阅读 · 1 评论 -
使用HTML5实现本地数据存储(一)
从大方向上来分,HTML5提供两种本地数据存储的功能: ①Web Storage:在客户端以key-value的形式保存数据; ②Web SQL Database:可以使用户在客户端使用关系数据库。今天tity先带大家了解Web Storage。 Web Storage这种以key-value形式保存数据的功能,可以允许用户保存在应用程序上的各种设置。它类似于HTML4中的Cookie功能,但原创 2016-11-29 18:45:17 · 1708 阅读 · 0 评论 -
关于使用HTML或JS实现页面重定向的方法
所谓页面重定向就是在用户打开某个页面的时候,我们期望页面跳转到另一个指定的页面。在前端实现的过程中,可以通过HTML方式来实现,也可以通过JS方式来实现。HTML方式: 通过meta标签来实现。 示例代码:<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8"> <meta http-equiv="refr原创 2016-11-29 11:15:34 · 19917 阅读 · 0 评论 -
通过ajax请求实现加载更多——常见的问题
这里tity主要给大家讲两个问题: 一是加载中动画,二是关于“没有更多了”的判断。一、加载中动画,可以增强用户体验度,给用户一种当前页面正在处理的感觉,而不是没有任何反应,让用户感觉摸不着头脑。 实现方法:在ajax请求中添加beforeSend方法。 示例代码:<script type="text/javascript"> $('#getMore').click(function()原创 2016-11-25 16:21:12 · 6443 阅读 · 1 评论 -
使用CSS3实现加载中动画
在用户访问页面的过程中,可能需要请求数据,进行响应。 但是如果在等待数据的过程中不给用户任何提示,用户的感觉是迷茫的,所以我们经常会看到在请求数据的过程中添加一个loading的gif图片。随着技术的发展,我们希望用简单的代码就能实现这个功能,同时解决由于GIF图片带来的锯齿的问题。最近tity在做日本换乘APP内嵌h5页面的时候就遇到了这样的问题。 最终实现在请求数据时的效果:<!DOCTYP原创 2016-11-25 12:16:22 · 2697 阅读 · 0 评论