H5进阶
文章平均质量分 73
19年,重新开始写
求学之路,泛结良师,广交益友
展开
-
H5 WebSocket实现简单的实时通信
1.界面开发:index.jsp<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>websocket web</title>原创 2017-04-30 16:14:32 · 15203 阅读 · 2 评论 -
Web前端高效开发总结二:HTML最佳实践
标准HTML代码的重要性标准的HTML代码指的是HTML代码符合W3C的最新标准,对于一个标准的页面来说,具有的优点有:1.标准的页面能保证浏览器正确的渲染2.网页能更容易被搜索引擎搜寻,提高网站的搜索排名,爬虫的目的是读懂网站的内容,并找出网站中的关键字3.提高网站的易用性,让网站能被更多的用户访问,尤其是那些视力或者肢体障碍者4.网站能更好的被维护和扩展在W3C上提供了一项免费的代码验证服务W3原创 2017-10-30 16:45:34 · 620 阅读 · 0 评论 -
牛客网前端工程师评估笔试题总结
1.css的overflow属性,如果为scroll值时,不管是否需要,用户代理都会提供一种滚动机制,也就是说,不管是否溢出,都会显示滚动条,而使用auto则会自动进行判断是否需要滚动条2.falsh和js之间的交互通过ExternalInterface接口进行交互,ExternalInterface接口有两个方法:call和addCallBack,其中call的作用是让Flash调用js里面的方法原创 2017-07-29 13:33:20 · 1862 阅读 · 0 评论 -
搜狗2015前端工程师笔试题总结
1.下列描述错误的是(): A.HTTP状态码302表示暂时性转移 B.domContentLoaded事件早于onload事件 C.IE6/7/8不支持事件捕获 D.localStorage存储的数据,在刷新页面后会消失正确答案为D。B选项:domContentLoaded事件仅当Dom加载完成时就触发,不包括样式表、图片、flush之类的数据的加载2.以下js程序输出的内容为:<SC转载 2017-07-28 23:39:47 · 662 阅读 · 0 评论 -
牛客网HTML/CSS专项练习错题汇总
有关浏览器的内核判断主要分为四类:-o-/-ms-/-moz-/-webkit-通过js的dom.style.XxxTransition进行相应的校验判断: var div = document.createElement('div'); var style = div.style; if (style.webkitTransition) { return '-原创 2017-08-12 21:34:34 · 872 阅读 · 1 评论 -
FormData实现文件的异步上传
为什么要使用FormData?在进行文件上传的操作时,我们通常使用post方式提交至服务器,然后服务器对请求数据进行处理;而有时候我们也需要进行异步上传文件,这个时候,就需要用到了FormDataFormData简单介绍XMLHttpRequest Level 2添加了一个新的接口FormData.利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以原创 2017-08-03 18:33:36 · 557 阅读 · 0 评论 -
FileReader实现上传图片时的图片预览
为什么要使用FileReader?在html静态文件中,当我们在input文件选择框中选择一个文件时,该input框的值为文件的绝对路径,这个时候我们可以直接将该路径复制给我们需要预览的图片的src即可可是在jsp这些服务器的脚本文件中,我们打开一个文件时,会发现文件选择框的值不是文件的绝对路径,而是c://fackpath之类的路径,这是服务器的临时文件存放路径,因此,我们直接将该路径复制给src原创 2017-08-03 18:16:58 · 696 阅读 · 0 评论 -
CSS3新特性之box-reflect倒影
使用背景有时候,我们需要实现如图一样的倒影图片,在css3的box-reflect属性出来之前,我们需要借助于第三方工具比如photoshop来实现这样的图片效果,可现在,box-flect的出现使我们能很方便的就实现这种图片效果box-reflect属性的浏览器兼容性box-reflect属性虽然能够很方便的实现图片、文字倒影的效果,但是到目前为止,浏览器对它的支持性还不是很完美;目前仅仅在chr转载 2017-08-08 09:43:45 · 725 阅读 · 0 评论 -
纯css实现图片翻转效果
所要掌握知识点CSS样式1.backface-visibility; visible/hidden: 设置当所指定的元素被进行翻转等操作而使背面显示时,是否进行显示还是隐藏2.transform: rotateX(n deg):设置当朝X轴方向旋转的角度3.transition: css duration style; 实现代码前端布局实现代码<div class="jskc">原创 2017-06-21 19:12:26 · 5191 阅读 · 0 评论 -
js制作简单的轮播图
实现原理首先定义一个div,设置width和height,然后在这个div里面再定义一个div2,该div的宽度为父div的宽度的n倍,其中n表示图片的张数,在这个div2里面放置需要进行轮播的所有图片,设置每张图片的宽度为一个最外层父类div的宽度,高度都是相同的然后使用js定义一个轮播的函数,每指定时间执行一次轮播函数,通过使用js提供的时间片来实现。轮播函数的思路为:在js外部定义一个全局变量原创 2017-06-21 09:30:12 · 837 阅读 · 0 评论 -
JS实现无延迟级联菜单
1.一般的级联菜单,当我们鼠标滑动到一级菜单上的每一个li上时显示对应的二级菜单。可是这种传统的级联菜单有一个很差的用户体验:我们必须在这个li元素上平行的移动鼠标,才能将鼠标移动到对应的二级菜单中。如果在移动过程中移动到了其他的li元素下,将会显示其他的二级菜单了2.改善这个用户体验的原理在于设置鼠标经过li元素时的时间片3.实现代码://前端页面<!DOCTYPE html PUBLIC "-原创 2017-05-07 21:24:15 · 842 阅读 · 0 评论 -
从web实时通信讲H5 WebSocket
传统的B/S通信通常我们打开一个浏览器访问网页时,都会向页面所在的服务器发送一个HTTP请求,然后web服务器确认请求并向浏览器做出响应。简单的说,就是一个请求对应的一个响应。然而这种方法对许多的应用场景都会使服务器的HTTP请求变得臃肿,甚至崩溃。比如:对于股价、新闻每日推送、好友聊天信息收发等情况,如果每次都是客户端发送HTTP请求给服务器来获取相应数据,那么用户就需要每次都对页面进行刷新从而来原创 2017-04-25 13:03:03 · 4572 阅读 · 0 评论 -
H5本地存储之存储JSON格式数据
1.通常在页面中存储用户信息包含很多数据,比如:账号、昵称、年龄等,可以将每个数据进行单独存储sessionStorage.setItem(paramname,paramvalue);2.不过这样保存起来太麻烦,我们可以直接将其封装成一个对象来保存,使用JSON类的stringify()和parse()<script> var username = "chengxi"; var pa原创 2017-05-02 23:35:29 · 1909 阅读 · 0 评论 -
vue.js使用总结
Vue.js简介:Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件Vue.js的核心库只关注视图层vue.js的实例化实例化vue.js对象的方式:通过vue的构造器new Vue({options})获取对象的相关数据可以通过.来实现,如果想要获取options的数据比如el,data,methods,f原创 2017-07-19 19:50:10 · 976 阅读 · 0 评论