HTML4/HTML5
关注
分享
扫一扫
文章平均质量分 79
sensus森森
强大自己是解决问题的最佳途径
展开
-
html5＜canvas模拟三维图形＞（旋转的正方体）
canvas{ background:#eee; } noTitle window.onload=function () { var canvas=document原创 2017-05-25 14:25:46 · 7215 阅读 · 0 评论 -
web前端开发，常用的在线占位图网址总结
简介：亲测可用且访问不慢的占位图网址^_^。http://lorempixel.com/http://placehold.it/http://placeholder.cn/http://dummyimage.com/http://fakeimg.pl/原创 2017-07-13 15:42:16 · 2146 阅读 · 0 评论 -
html5＜canvas在画布上画视频和图片>
canvas{ background:#ccc; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj =原创 2017-05-27 10:38:49 · 9362 阅读 · 0 评论 -
HTML中的常用的空格总结
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ）在不同浏览器中宽度各异。 11它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键转载 2017-07-07 14:31:02 · 439 阅读 · 0 评论 -
html5表单新特性
--> + = -->原创 2017-05-27 10:57:38 · 363 阅读 · 0 评论 -
HTML5之XMLHttpRequest Level 2 API跨源运用案例
前提条件:首先，页面需要部署在web服务器上；其次，两个页面必须来自不同的域。127.0.0.1文件crossOriginUpload.html上传数据function loadDemo() { var dataElement = document.getElementById("geodata"); dataElement.textContent = J原创 2017-07-20 00:53:14 · 1225 阅读 · 0 评论 -
HTML5跨文档消息通信之postMessage API的探索案例
127.0.0.1文件postMessagePortal.html门户页面标题var trustedOrigin = "http://www.vserve365.com";var defaultTitle = "门户页面标题";var notificationTimer = null;/** * 消息事件是一个拥有data(数据)和origin(源)属性的DOM事件。dat原创 2017-07-19 00:52:27 · 1394 阅读 · 0 评论 -
基于 HTML5 的 JavaScript 图表库——chart.js
Chart.js是一个HTML5图表库，使用canvas元素来展示各式各样的客户端图表，支持折线图、柱形图、雷达图、饼图、环形图等。在每种图表中，还包含了大量的自定义选项，包括动画展示形式。 Chart.js比较轻量（gzip版本仅4.5k），且不依赖其他库。项目官网：http://www.chartjs.org/曲线图（Line chart）doctype htm转载 2017-08-29 15:17:30 · 1394 阅读 · 0 评论 -
如何实现HTML代码原样输出，不被浏览器解析？
有时我们在做自己的技术博客网站的时候，需要直接贴出源代码，不想被浏览器解析，那么我们如何实现HTML代码原样输出，不被浏览器解析？这里说几种实用方法，供大家参考下：方法一：原创 2017-11-14 15:04:06 · 19827 阅读 · 1 评论 -
带有粒子效果的熊熊大火
熊熊大火燃烧的粒子效果 body{ height:100%; background:#16a085; overflow:hidden; width: 1920原创 2017-07-20 11:33:44 · 830 阅读 · 0 评论 -
html5＜canvas图像合成实例之随机闪烁的星星＞
canvas{ background:#ccc; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj = c原创 2017-05-27 10:45:27 · 1725 阅读 · 0 评论 -
基于Ajax+PHP的单文件、多文件异步上传实例
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>基于Ajax+PHP的单文件、多文件异步上传实例</title> <style> #toUpl...原创 2018-03-09 13:39:49 · 3200 阅读 · 2 评论 -
仿手机9宫格图形解屏效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手机锁屏9宫键解屏效果</title> <style> *{ margin: 0;原创 2018-03-21 15:58:35 · 794 阅读 · 0 评论 -
基于canvas超炫酷的流水灯效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基于canvas超炫酷的流水灯效果</title> <style> *{ margin: 0原创 2018-03-21 17:40:34 · 3246 阅读 · 0 评论 -
html5本地存储之数据库
对于简单的数据，使用sessionStorage和localStorage能够很好地完成存取，但是对于处理复杂的关系型数据，它就力不从心了。这也是 HTML 5 的“Web SQLDatabase”API 接口的应用所在。我把它理解成一个Html5环境下可以用Js执行CRUD的Web数据库三个核心方法①openDatabase：这个方法使用现有数据库或创建新数据库创建数原创 2017-05-27 11:25:55 · 544 阅读 · 0 评论 -
html5桌面提醒功能（浏览器支持的不好）
if(window.webkitNotifications){ window.webkitNotifications.requestPermission(); if(window.webkitNotifications.checkPermission()==0){原创 2017-05-27 11:24:20 · 1373 阅读 · 0 评论 -
运用HTML5本地存储计算两个页面的访问时间
A.html页面 > B.html页面 > A.html页面，计算从B.html页面回到A.html页面的耗时A.html var referrer = document.referrer; //注意:要放在服务器才有效果,在本地无效 if(referrer.indexOf(原创 2017-05-26 08:56:32 · 739 阅读 · 0 评论 -
HTML5仿照百度搜索黑洞效果
仿照百度搜索黑洞效果 @-webkit-keyframes rotates { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); }原创 2017-05-26 09:00:47 · 7045 阅读 · 0 评论 -
带音效的时钟，并有天气的功能，运用天气接口、农历、星期几
canvas{ background:#eee; } window.onload = function(){ var canvas = document.getElementById('canvas');原创 2017-05-26 09:08:02 · 1099 阅读 · 0 评论 -
html5＜canvas操作文字实例之转盘＞
canvas{ background:#ccc; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj =原创 2017-05-27 10:31:09 · 1645 阅读 · 0 评论 -
html5＜canvas基础＞
canvas{ background:#ccc; } noTitle window.onload=function () { var canvas=document.getEl原创 2017-05-27 10:34:04 · 766 阅读 · 0 评论 -
sessionStorage 、localStorage 和 cookie 之间的区别
sessionStorage 、localStorage 和 cookie 之间的区别共同点：都是保存在浏览器端，且同源的。区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递；cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请转载 2017-05-27 10:59:02 · 226 阅读 · 0 评论 -
html5＜canvas操作像素之反相、窗帘、模糊特效＞
canvas{ background:#eee; } window.onload = function(){ var canvas = document.getElementById('canvas');原创 2017-05-27 10:48:44 · 999 阅读 · 0 评论 -
html5＜canvas操作像素实例之渐变＞
canvas{ background:#eee; } window.onload = function(){ var canvas = document.getElementById('canvas');原创 2017-05-27 10:47:13 · 636 阅读 · 0 评论 -
html5＜canvas转换之万花筒＞
canvas{ background: red; } window.onload = function(){ var canvas = document.getElementById('canvas');原创 2017-05-27 10:37:38 · 1228 阅读 · 0 评论 -
html5＜canvas矩阵转换＞
所谓的矩阵转换就是数学线性代数中的一个概念。在线性代数中，线性变换能够用矩阵表示。而在图形图像学中，所谓的矩阵转换，一般是用来表示图形的变换，如：平移，旋转，缩放，斜切。而这些变化全部都是基于矩阵变换计算而出的。但是矩阵运算比较复杂， canvas已经把相应的变换封装成函数，我们可以直接使用从而简化了我们的工作。 canvas里面的变换包括:平移，旋转，缩放.但原创 2017-05-27 10:35:30 · 1674 阅读 · 0 评论 -
html5＜canvas操作图像实例之弹性照片墙＞
html,body{ padding: 0; margin: 0; background:#330; height: 100%; width: 100%; overflow: hidden; }原创 2017-05-27 10:40:23 · 3187 阅读 · 0 评论 -
html5＜canvas操作像素之添加杂色，动态倒影逐行显示＞
canvas{ background:#eee; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj = c原创 2017-05-27 10:52:26 · 564 阅读 · 0 评论 -
html5＜canvas路径和三角函数的故事＞
canvas{ background: red; } window.onload = function(){ var canvas = document.getElementById('canvas'); var cobj = c原创 2017-05-27 10:53:53 · 444 阅读 · 0 评论 -
仿支付宝滑动验证码案例
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <style> .slide-captcha-area{ width: 100%;原创 2018-05-28 15:51:16 · 789 阅读 · 0 评论