html5
文章平均质量分 59
普通网友
这个作者很懒,什么都没留下…
展开
-
javascript数据类型转换
parseInt(“09”)输出为0,因为用0开头就会认为是8进制啊,果然改了一下parseInt(“09”,10)之后就输出9了。JS中基本类型数据只有整型,浮点型,字符型和布尔型。将字符串转化成整型,只能用parseInt(str)把字符串解析成整数,默认按照十进制,但若是0开头则按八进制,若是0x开头则按十六进制;或者parseInt(str,radix)按指定进制,把字符串解析原创 2013-12-30 20:34:57 · 405 阅读 · 0 评论 -
html5实现跳动的小球的功能
该功能实现小球跳动的效果,遇到墙壁就反弹回去,代码很简单。 <!DOCTYPEhtml> <metacharset="utf-8"> 模拟动态的跳动的小球的效果 <canvas id="can1" width="400" height="300"style="border: 1px solid red"> <scr原创 2013-12-30 20:35:05 · 5369 阅读 · 1 评论 -
CSS3-阴影 效果
效果" TITLE="CSS3-阴影 效果" />文字阴影图片阴影 以及区域阴影效果的css3实现<!DOCTYPEhtml> <metacharset="utf-8"> CSS3阴影效果 .sbox{ width: 200px; padding: 32px;原创 2013-12-30 20:35:21 · 521 阅读 · 0 评论 -
CSS-动画效果
采用CSS3实现的简易的动画效果-图片旋转 <metacharset="utf-8"> CSS3动画 .amime1{ text-align: center; font-size:64px; -webkit-animation-name:"anime1";指定动画的名原创 2013-12-30 20:35:27 · 490 阅读 · 0 评论 -
SVG的特征
SVG是由XML语言记录的,因此,SVG可以通过文本编辑器编辑,比较文件差异等,可以充分发挥文本文件的便利性。另一方面,当绘制复杂图像或者图形的时候,文件将变得很大,这往往会成为问题所在,此时使用gzip工具进行压缩,文件的后缀名将变成.svgz。SVG作为图像的格式,已经有多个图像处理软件支持SVG形式的图像,专业性图像处理软件如Adobe公司的I了路上突然投入,微软公司的Office原创 2013-12-30 20:35:42 · 606 阅读 · 0 评论 -
SVG Dom绘制矩形
Dom绘制矩形" TITLE="SVG Dom绘制矩形" /><!DOCTYPEhtml> 使用svgdom的形式来创建svg #svg-samples{ width: 500px; height: 500px; border: 1px solid red;原创 2013-12-30 20:36:02 · 537 阅读 · 0 评论 -
SVG Dom绘制圆形
Dom绘制圆形" TITLE="SVG Dom绘制圆形" /> <!DOCTYPEhtml> <metacharset="utf-8"> SVGdom绘制圆形 #circle{ width:100px; height:100px; border:1px solid red; }原创 2013-12-30 20:36:17 · 626 阅读 · 0 评论 -
svg dom绘制五角星
dom绘制五角星" TITLE="svg dom绘制五角星" /><!DOCTYPEhtml> <metacharset="utf-8"> svgdom绘制五角星 #mystar{ border: 1px solid red; width: 100px; height:原创 2013-12-30 20:37:35 · 1408 阅读 · 1 评论 -
svg使用path绘制路径
path通过将命令与坐标进行组合绘制图形。命令有M(moveTo):移动位置、L(lineTo):描绘直线、C(curveTo):描绘曲线、A(arcTo):描绘圆弧、Z:封闭路径<?xmlversion="1.0" standalone="no"?><!DOCTYPE svgPUBLIC "-//W3C//DTD SVG 1.1//EN""http://www.w3.org/原创 2013-12-30 20:37:39 · 2567 阅读 · 0 评论 -
SVG DOM通过path绘制五角星
DOM通过path绘制五角星" TITLE="SVG DOM通过path绘制五角星" /><!DOCTYPEhtml> <metacharset="utf-8"> SVGDOM通过path绘制五角星 #myline{ border: 1px solid red; width: 100px;原创 2013-12-30 20:37:42 · 2235 阅读 · 0 评论 -
svg当中g元素的使用g.svg
在svg中提供了如g元素这样的将多个元素组织在一起的元素。由g元素编组在一起的可以设置相同的颜色,可以进行坐标变换<?xmlversion="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">原创 2013-12-30 20:37:54 · 6569 阅读 · 0 评论 -
Raphael使用g元素绘制多个矩形
<!DOCTYPEhtml> <metacharset="utf-8"> svgdom实现g元素 #myg{ border: 1px solid red; width: 200px; height: 200px; } <scriptsrc="原创 2013-12-30 20:37:58 · 902 阅读 · 0 评论 -
Raphael绘制文本
<metacharset="utf-8"> Raphael绘制文本 <scriptsrc="js/raphael.js"> #text{ border: 1px solidred; width: 200px; height: 200px; }原创 2013-12-30 20:38:31 · 1922 阅读 · 0 评论 -
SVG样式表
<?xml version="1.0"standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTDSVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%"version="1.1" xmlns="http:/原创 2013-12-30 20:38:46 · 647 阅读 · 0 评论 -
html5之<video>开发实现音乐播放控…
<!DOCTYPEhtml> 控制音乐播放的html5程序 #mymusic{ border: 1px solid red; width: 600px; height: 400px; } functionaudioPlay(原创 2013-12-30 20:39:15 · 825 阅读 · 0 评论 -
制作可以变速播放的视频
<!DOCTYPEhtml> 制作可以变速播放的视屏 #main{ width: 400px; height: 375px; } #videoContainer{ width: 400px; } #videoCon原创 2013-12-30 20:40:15 · 831 阅读 · 0 评论 -
html5拖拽(非IE方式)
Html5的拖放功能是在原先InternetExploer5中实现的功能基础上重新制定的标准,但是新的HTML5的拖放功能与原IE中实现的方式有所差别,不具有完全的互换性,这里首先制作可在Firefox、Safari、Chrom中运行的实例,然后再制作可以在IE中运行的实例。 <!DOCTYPEhtml> <metacharset="utf-8"> html5文原创 2013-12-30 20:41:40 · 589 阅读 · 0 评论 -
HTML5文件上传进度条Progress&nbsp…
var reader=null; //FileReader接口对象 reader=newFileReader(); //文件导入进度的显示 reader.onprogress=function(evt){ if(evt.lengthCo原创 2013-12-30 20:42:06 · 816 阅读 · 0 评论 -
html5脱机web程序实例
html文件<!DOCTYPEhtml><htmlmanifest="site.mainfest"> <metacharset="utf-8"> 脱机web应用程序实例 <link href="css/tuoji.css"rel="stylesheet" type="text/css"> <divid="container">原创 2013-12-30 20:42:29 · 1123 阅读 · 0 评论 -
html5脱机web应用程序之FALLBACK段…
访问不能使用的资源文件时,在FALLBACK段落指定用于替代显示的资源文件。想博客以及SNS网站上的信息不可能全部下载下来,这些实时性很强的内容就算缓存起来也没用,因此针对这些没有在本地缓存的内容,当用户脱机访问时,可以显示替代资源文件(通常为“所访问内容不存在”)FALLBACK段落的语法格式资源的URL(前方一致)替代资源例如,当URL以"online/"为开头的资源文件不能访问时,显原创 2013-12-30 20:42:38 · 1191 阅读 · 0 评论 -
html5脱机应用程序之NETWORK段落
NETWORK段落为指定不在本地进行缓存,必须在在线的状态下才能够访问的URL。在脱机web应用程序中,就算是在线的状态下,也不能够从外部主机读取资源,必须在NETWORK段落中指定这些资源的URL. <!DOCTYPEhtml><htmlmanifest="network.manifest"> 脱机web应用程序之NETWORK段落的使用 <script原创 2013-12-30 20:42:40 · 603 阅读 · 0 评论 -
html5开发之WebSocket简介
WebSocket是基于HTTP协议的,实现客户端与服务器间端的双向通信技术。以前的HTTP协议中,客户端向服务器送出请求,服务器响应请求,处理后返回应答。但是使用WebSocket后可以实现客户端与服务器完全的双向通信,注意:WebSocket协议是基于HTTP协议的,使用80端口(安全连接时使用443端口)建立连接时,客户端首先发出HTTP的GET请求,进行握手处理WebSoc原创 2013-12-30 20:42:44 · 494 阅读 · 0 评论 -
用myeclipse开发websocket
http://blog.sina.com.cn/s/blog_5f2fecd9010117wv.html用myeclipse开发websocket下载 jetty7.6 http://dist.codehaus.org/jetty/jetty-hightide-7.6.0/jetty-hightide-7.6.0.v20120127.zip在myeclipse中配置jetty原创 2013-12-30 20:43:10 · 2538 阅读 · 0 评论 -
HTML 5 Audio/Video&nbs…
http://www.w3school.com.cn/html5/av_prop_ended.asp实例检查视频播放是否已结束:myVid=document.getElementByIdx_x("video1");alert(myVid.ended);亲自试一试定义和用法ended属性返回音频/视频是否已结束。如果播放位置位于音频/视频的结尾时,则音频/视频已原创 2013-12-30 20:43:31 · 558 阅读 · 0 评论 -
html5开发之websocket乱码
今天通过myeclipse写了一个websockt程序,但是html5界面始终出现乱发,编码方式明明是utf-8啊.研究了大半天才找到原因。因为在myeclipse新建的是html文件,如果新建jsp文件,然后将该jsp文件再重写为html5文件,就没有这种问题了,不知道什么原因,可能是编码不统一的问题吧,各位高手有没有出现这种情况的,求指导原创 2013-12-30 20:43:40 · 4950 阅读 · 0 评论 -
Html5开发之Web Workers概要
首先什么是Web WorkersWebWorkers是将JavaScript程序放在后台运行的机制。原来的HTML的js都是单线程的方式。通常都是单线程方式。通常将js程序与用户界面处于同一线程时运行时,如果此时可处理需要很长时间,那么用户界面将一直停止不动,用户将不能在用户界面上做任何操作。为了解决上述问题,因此出现了WebWorker这种机制,将需要耗费很长时间的js放在后台作为另一个原创 2013-12-30 20:43:53 · 431 阅读 · 0 评论 -
HTML5开发之web workers--简…
workers--简单的Hello程序" TITLE="HTML5开发之web workers--简单的Hello程序" />新建一个html5文件<!DOCTYPEhtml> <metacharset="utf-8"> 简单的webworkers实例 <script type="text/javascript"src="js/hellowebwor原创 2013-12-30 20:43:55 · 505 阅读 · 0 评论 -
Html5之web workers后台计算…
workers后台计算素数问题" TITLE="Html5之web workers后台计算素数问题" />index.html <metacharset="utf-8"> 通过webworks计算素数 varworker=new Worker("js/sushu.js"); //接受从worker传来的信息 wor原创 2013-12-30 20:43:57 · 810 阅读 · 0 评论 -
常见的html5表单元素
<!DOCTYPEhtml> html5表单元素 <!--我们这里引用了四种移动浏览器ios safari、androidbrowser、backgberry webkit,operamoblie--> <!--不支持operamoblie--> 文本框尚未输入并且内容为空的时候,给出文本框的提示原创 2013-12-30 20:45:27 · 765 阅读 · 0 评论 -
使用html5画简单的折线图
//得到画布 varcan1=document.getElementByIdx_x_x_x("can"); //得到画笔 varcxt=can1.getContext("2d"); //定义图表的数据,该方式为创建数组直接量的方式 varsale_data=[80,92,104,110,68,50,45,90,74,68,98,103];原创 2013-12-30 20:34:41 · 2647 阅读 · 0 评论 -
html5实现旋转的浏览器的代码
varcan1=document.getElementByIdx_x_x("can1"); varcxt1=can1.getContext("2d"); vardeg=0; varfps=60; //首先绘制图片 varimage=new Image(); image.src="images原创 2013-12-30 20:34:50 · 1383 阅读 · 0 评论 -
使用html画简单的柱状图
由于本人写完之后没有进行整理,所以里边代码结构不是很合理,请大家见谅,另外里边的画图的坐标,也是一边画一边调整的,仅供大家参考<!DOCTYPEhtml> <metacharset="utf-8"> 绘制柱状图<divstyle="margin: 0 auto; width:800px;height:400px"> <canvas id="can1"原创 2013-12-30 20:34:59 · 2766 阅读 · 0 评论 -
CSS3-阴影 效果做成的立体图片效果
效果做成的立体图片效果" TITLE="CSS3-阴影 效果做成的立体图片效果" /> <!DOCTYPEhtml> 图片阴影效果 <scriptsrc="js/jquery.js"> #mypanel{ width: 537px; height: 430p原创 2013-12-30 20:35:25 · 1242 阅读 · 0 评论 -
CSS-渐变效果
<!DOCTYPEhtml> css3渐变的效果 div{ text-align: center; width:230px; height: 60px; -webkit-border-radius:15px; -moz-borde原创 2013-12-30 20:35:31 · 452 阅读 · 0 评论 -
CSS-实现的倒影的效果
<!DOCTYPEhtml> css的倒影的效果 -webkit-box-reflect:位置 距离px -webkit-gradient() 位置选项:above,below,left,right .box{ font-size: 72px;原创 2013-12-30 20:35:33 · 735 阅读 · 0 评论 -
矢量图像格式和位图图像格式的区别
矢量图像用点和线来描述物体,所以文件会比较小,同时也能提供高清晰的画面,适合于直接打印或输出。而位图图像的存储单位是图像上每一点的像素值,因此一般的图像文件都很大,会占用大量的网络带宽。原创 2013-12-30 20:35:38 · 2546 阅读 · 0 评论 -
SVG和Canval的比较
SVG是矢量形式,Canvas是位图形式。SVG描绘的线无论扩大多少倍其清晰度不变,而Canvas当中描绘的线扩大到一定程度之后就变得模糊。Canvas形式不仅图形扩大后会效果不佳,而且在描绘巨大的图形的时候,处理速度以及内存效率都会降低,但是位图形式的Canvas可以进行针对像素的操作。原创 2013-12-30 20:35:44 · 727 阅读 · 0 评论 -
SVG绘制矩形
<?xml version="1.0"standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTDSVG 1.1//EN""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="400" height="400"version="1.1"xmlns="http://www原创 2013-12-30 20:36:00 · 906 阅读 · 0 评论 -
Raphael绘制矩形
首先得去下载js文件 http://raphaeljs.com/ <!DOCTYPEhtml> <metacharset="utf-8"> 使用svgdom的形式来创建svg #svg-samples{ width:500px; height:500px; border: 1pxsolid red; }原创 2013-12-30 20:36:04 · 1150 阅读 · 0 评论 -
SVG Dom绘制椭圆
Dom绘制椭圆" TITLE="SVG Dom绘制椭圆" /> <!DOCTYPEhtml> SVGDOM绘制椭圆 #myellipse{ width: 200px; height: 200px; border: 1px solid red;原创 2013-12-30 20:36:32 · 582 阅读 · 0 评论