html5 | 易学教程

地图热点 jquery.image-maps.js 的使用

阅读更多关于地图热点 jquery.image-maps.js 的使用

在我悠闲了几天之后，我们后端给了我个任务，地图热点问题。简单来说，就是后台划出热点区域，设置链接，前端拿到数据渲染页面，显示热点区域。我主要使用了jquery.image-maps.js,并且添加了一些我所需要的功能。前端是很好显示的，获取到数据后直接渲染页面。　　主要是后端热点区域位置坐标的确定。先看一下整体样式功能图，主要有添加热点区域，单个删除热点区域，和全部删除热点区域，以及保存划出的热点区域，还有拖拽上传img图片功能。以及双击热点区域可填写对应的链接。上图一观，有点简陋，相信各位小哥哥小姐姐能做的更好，勉强瞅瞅吧。首先呢，来看这个图片，可爱的巴卫，如果不喜欢，可以把自己桌面上的图片拖拽进选区，也可以点击选择图片，进行上传，反正大家怎末喜欢怎末来。这个选区呢，我设置了400×400，但是图片宽度400，高度自适应的，放心的，图片不会变形的。相关代码如下： // 上传图片事件 var dropBox window.onload = function () { dropBox = document.getElementById("imgMap"); dropBox.ondragenter = ignoreDrag; dropBox.ondragover = ignoreDrag; dropBox.ondrop = drop; } function

在HTML5 localStorage中存储对象

阅读更多关于在HTML5 localStorage中存储对象

问题： I'd like to store a JavaScript object in HTML5 localStorage , but my object is apparently being converted to a string. 我想将JavaScript对象存储在HTML5 localStorage ，但是我的对象显然正在转换为字符串。 I can store and retrieve primitive JavaScript types and arrays using localStorage , but objects don't seem to work. 我可以使用 localStorage 存储和检索原始JavaScript类型和数组，但是对象似乎无法正常工作。 Should they? 应该吗 Here's my code: 这是我的代码： var testObject = { 'one': 1, 'two': 2, 'three': 3 }; console.log('typeof testObject: ' + typeof testObject); console.log('testObject properties:'); for (var prop in testObject) { console.log(' ' + prop + ': '

【融职培训】Web前端学习第9章教务管理系统开发5 前端代码讲解

阅读更多关于【融职培训】Web前端学习第9章教务管理系统开发5 前端代码讲解

一、导航守卫导航守卫主要用于实现在页面发生跳转时，检测token的存在，如果token没有或失效，网页则回到登录页面，代码如下。 1 router.beforeEach((to, from, next) => { 2 let token = localStorage.getItem("token" ); 3 console.log(token) 4 if (token || to.path === "/" ) { 5 next(); 6 } else { 7 next({ 8 path:"/" 9 }); 10 } 11 }) 二、封装请求方法在教务管理系统中，我们需要自己封装请求方法，以完成一些麻烦的任务，封装的代码如下。 1 import axios from "axios" 2 3 const service = axios.create({ 4 baseURL: "http://127.0.0.1:7001/" 5 }) 6 export default service 三、登录请求功能在登录的过程中，我们需要向后台发送数据，并对后台传的数据，进行判断，以做出各种网页的效果，代码如下所示。 1 login() { 2 request({ 3 url:"/login" , 4 method:'post' , 5 data: this .dataQ 6 }).then

HTML表单4（form的action、method属性）

阅读更多关于 HTML表单4（form的action、method属性）

表单的工作过程表单的信息发送与处理过程可以简单的进行图示，如下图。以注册会员为例，用户在自己的电脑上打开相应的注册表单页面填写信息，完成填写后点击提交按钮，也就是图中1所示过程。这时浏览器会将这些信息发送给处理这些信息的服务器，服务器上有使用类似asp或php写成的相应的处理程序，处理完成后，生成一个反馈信息，也就是2到3的过程。然后服务器将处理后的信息发送给个人电脑，个人电脑在浏览器上通过一个新页面来提示用户处理结果。这里就涉及到一个问题，一个网站会有针对不同用户的信息注册表单以及相应的信息处理程序，比如我们注册头条号就有"个人"、"企业"、"媒体"和"国家机构"的区分。**如何使不同的表单找到相应的处理程序呢？**在 <form> 标签中，有一个action属性就是为这个表单信息指定处理程序的。 <form> 中的action属性调用程序 <form> 的action属性实际上就是为表单提示处理程序所在的路径，如果程序和页面在一个服务器中存储，那使用相对路径即可，如果在其他服务器，则要使用绝对路径。示例代码如下： <form action="form_action.asp" method="get"> <p>First name: <input type="text" name="fname" /></p> <p>Last name: <input type

音视频格式转换神器与html视频元素加字幕

阅读更多关于音视频格式转换神器与html视频元素加字幕

音视频格式转换神器——格式工厂如果您下载了上一篇《为HTML页面添加音频、视频的方法——零基础自学网页制作》（目录在结尾）中的素材，您会看到有这样一个文件，如图因为格式工厂是免费软件，所以大家直接安装就可以了，不需要序列号，安装过程如下： 1.双击安装程序 2.选择安装盘符 3.等待进度条跑完就好了。大家注意，安装时一定要阅读提示，一些没必要的捆绑软件记得不要安装！完成安装后，点击"开始"菜单，如图：这样我们就可以打开格式工厂了，打开后如图：通过这个菜单我们可知，这个软件不仅可以为音频、视频转换格式，还可以给图片转换格式。如图：下面我们就来操作一下如何为视频转换格式。 step1.点击"视频" 点击后是这样的，点击"AVI FLV MOVE"这个区域。效果如下，出现了一个新的菜单。 step2.选择要转换的格式，如图，我们先选择ogg，点击！点击"确定" 弹出这样一个菜单： step3.选择文件，如图，点击"添加文件" 我们使用"利维坦.mp4"这个文件进行转换，如图：点击"打开"后，跳到这个界面，如下图，然后点击确定。这时界面就跳回最初的界面上，如下图，点击开始，如红框中。 step4.等待转换完成，如图所示：然后点击"输出文件夹"按钮找到转换好的文件，如图：这时，我们可以把这个转换好的文件拷走。完成之后，大家可以按照上述步骤继续转换出swf

css如何设置透明度？设置透明度的两种方法（代码实例）

阅读更多关于 css如何设置透明度？设置透明度的两种方法（代码实例）

在前端页面开发布局的时候，为了给用户呈现不同的效果，经常需要设置透明度，那么css是怎样设置透明度的？本章给大家介绍用css设置透明度的两种方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css rgba()设置颜色透明度语法： 1rgba（R,G,B,A）; RGBA 是代表Red（红色） Green（绿色） Blue（蓝色）和 Alpha（不透明度）三个单词的缩写。RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。 rgba（)里的值的介绍： R：红色值。正整数（0~255） G：绿色值。正整数（0~255） B：蓝色值。正整数（0~255） A：透明度。取值0~1之间 rgba()只是单纯的可以设置颜色透明度，这样在页面的布局中有很多应用。比如说：让背景出现透明效果，但上面的文字不透明。代码实例： > <!DOCTYPE html> > > <html> > > <head> > > <meta charset="UTF-8"> > > <title>rgba()</title> > > <style> > > .demo{ > > width: 350px; > > height: 300px; > > margin: 50pxauto; > > } > > .demo *{ >

标记当次浏览的第一个页面

阅读更多关于标记当次浏览的第一个页面

概述标记当次浏览为第一个访问页面的方法。内容方法当页面第一次载入时，查询sessionStorage中的firstPageKey。如果有则保存到变量中；如果没有则保存当前时间戳到内存，并记录在sessionStorage中，同时使用history.replaceState保存状态到历史记录中。在路由跳转的过程中，可以通过比较变量中的firstPageKey与history.state.firstPageKey是否一致来判断是否是浏览的第一个页面。页面的刷新不会影响除了当前页面的历史记录，所以在非第一个页面的刷新不会影响保存的历史状态，同时由于firstPageKey保存到了sessionStorage中，比较功能也不受影响。但需要注意的是，如果是刷新第一个页面，那么历史状态也会被替换。这时需要监听刷新来清除sessionStorage中的firstPageKey，让上述过程得已重复。 Vue示例 const state = { // vuex firstPageKey: +sessionStorage.getItem('firstPageKey') || 0 // 第一个页面的key，优先从sessionStorage中取 } const mutations = { setFirstPageKey(state, { key = Date.now() } = {}) {

超大文件上传和断点续传的代码

阅读更多关于超大文件上传和断点续传的代码

文件上传是最古老的互联网操作之一，20多年来几乎没有怎么变化，还是操作麻烦、缺乏交互、用户体验差。一、前端代码英国程序员 Remy Sharp 总结了这些新的接口，本文在他的基础之上，讨论在前端采用HTML5的API，对文件上传进行渐进式增强： * iframe上传　　 * ajax上传　　 * 进度条　　 * 文件预览　　 * 拖放上传 1.1 传统形式　　文件上传的传统形式，是使用表单元素file，参考 http://www.ruanyifeng.com/blog/2012/08/file_upload.html ： <form id="upload-form" action="upload.php" method="post" enctype="multipart/form-data" > 　　　　<input type="file" id="upload" name="upload" /> <br /> 　　　　<input type="submit" value="Upload" /> </form> 所有浏览器都支持上面的代码，点击上传按钮后，网页"锁死"，用户只能等待上传结束，然后浏览器刷新，跳到表单的action属性指定的网址。 1.2 iframe上传　　用户点击submit时，动态插入一个iframe元素 var form = $("

零基础小白如何学习web前端?

阅读更多关于零基础小白如何学习web前端?

　　很多刚接触web前端的开发的新手小白，都会有这样的疑问，“零基础小白如何学习web前端?学习web前端的学习路线是什么?”。接下来，小编就带大家来了解一下这些问题，助力新手小白快速转变成为合格的web前端开发工程师。　　随着互联网技术的发展和进步，前端开发工作已经变的越来越复杂，仅仅是罗列一份前端开发的学习列表就已经是一件艰巨的工作。　　曾经只要会编写HTML、CSS和Javascript就能够找到一份前端开发的工作。而现在，web前端开发远远不止是简单编码。因为我们的互联网技术的不断发展，技术更新迭代迅速，企业也对web前端开发人员有了更多的要求。　　结合一些新手小白的情况和目前市面上企业对于web前端开发人员的需求，千锋上海为大家分享一份web前端开发的学习路线。　　1、前端页面重构。主要内容为PC端网站布局、HTML5+CSS3基础、webApp页面布局。学习目标是完成PC端网站布局，webApp页面布局，还要可以通过HTML5+CSS3的2D、3D等属性实现一些精美的动画效果。　　2、JavaScript高级课程、PC端全栈项目开发。主要内容为原生JavaScript、面向对象进阶与ES5/ES6应用、JavaScript工具库自主研发、JQuery经典交互特效开发、HTTP协议、Ajax进阶与后端开发、前端工程化与模块化应用以及AngularJS等

给你一套完整的学习web前端线路图

阅读更多关于给你一套完整的学习web前端线路图

随着网络时代的壮大，前端也成为了很多企业不可缺少的一部分。前端的人才也日益扩大，前端的技术也在日益更新，如何成为一名合格的前端工程师，应该怎么学习才有效果呢？首先、前端工程师学习分为几种：自学、系统培训班、线上教学等。其次、学习前端几种方法的利弊： 1.自学，自学相对于很多学生来说是特别难的，自学要有足够的韧劲和坚持，自学过程中会遇到很多难点，需要自己去逐步查资料等解决，而且自学最后要走向工作时，没有一个实战经验，对以后参加工作来说是一个很大的问题。 2.系统培训班，最快也是最有效的方法就是去培训班学习了，爱创课堂培训班教学思路都是比较清晰的，给学生的知识传递也非常明确，而且爱创培训班有实战教学，在参加工作的时候帮助很大。 3.线上教学，像今年线上教学是非常重要的，很多学生迫于无奈只能线上学习。线上教学也是一个不错的方法，线上老师讲解也特别清楚，与培训班线下教学的差别就是不能面对面，但知识点都是一样的。爱创也有线上教学，老师讲解特别清楚。最后、哪家培训班教学好？爱创课堂是由前百度前端架构师，张容铭老师亲自带队授课全程面授、爱创是崇尚实战化教学，通过实战经验让更多前端学员思维变通，而不是一贯的学习死知识，不懂得变换，爱创课堂目前开设小班教学，一个班20-30人左右，老师针对全班每位学生，手把手教学，确保每位学员都能学会在爱创培训的所有知识。并且爱创对学员是非常负责任的

订阅 html5