笔记之_java整理html5

查看手机唯一标识:http://html5plus.org/doc/zh_cn/device.html#plus.device.uuid
html和html5的区别?
html5+css3也逐渐的成为新一代web前端技术,最要用处在开发手机网站.
文档网站:http://www.w3school.com.cn/html5/index.asp
HTML5的新功能
(1)、强大的绘图功能
(2)、新增音频/视频标签
(3)、浏览器离线存储
(4)、通过浏览器进行定位
外网连接局域网的项目:花生壳?内网穿透?
页面中自适应手机:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
高德开放平台:高德程序员、创建应用、添加新key
Html5标签
HTML5 视频
      <video src="movie.ogg" controls="controls">
       </video>
HTML5 音频
       <audio src="song.ogg" controls="controls">
       </audio>
HTML5 拖放
HTML5 画布:Canvas
      定义画布,宽200.  高 100
       <canvas id="myCanvas" width="200" height="100"></canvas>
      Javascript对画布进行处理
       <script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");  //创建2d画布
cxt.fillStyle="#FF0000";     //画布填充色
cxt.fillRect(0,0,150,75);   //填充矩形 (x,y ,width,hegiht)
</script>
HTML5 SVG
HTML5 画布 vs SVG
HTML5 地理定位
单独没有意义,你要取得座标(经度和纬度) 与 地图合起来用
    <script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.watchPosition(showPosition);
    }
              else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>
HTML5 Web 存储
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储
它们的语法都是     xxxx.变量名=”值“;
HTML5 应用缓存
HTML5 Web Workers
HTML5 服务器发送事件
 都是移动app用的
    数字:<input type="number" placeholder="请输入数字" />
        <hr/>
        邮箱:<input type="email" placeholder="请输入邮箱"/>
        <hr/>
        电话:<input type="number" />
        <hr/>
        日期:<input type="date" />
        <hr/>
        范围:<input type="range" name="points"   min="1" max="10" />

    1、创建一个画布
            var circlePoint={"context":null,"timer":null,  "x":20,  "y":10};
            window.onload=function(){
                fillColor();
            };
            function $(id){
                return document.getElementById(id);
            }
            function fillColor(){
                var obj=$("can");
                //得到2d画布
                circlePoint.context=obj.getContext("2d");
                //填充 蓝色的背景
                circlePoint.context.fillStyle="#FFCC99";
                circlePoint.context.fillRect(0,0,500,500);
                //画笔的颜色 是红色,粗40px,字体黑体
                circlePoint.context.fillStyle="red";
                circlePoint.context.font="40px 黑体";
                circlePoint.context.fillText("Hello  Html5!",150,200,500);
                //画一个圆
                 drawCircle();
                //制作一个定时器
                circlePoint.timer=setInterval(drawCircle,20);
            }
            //画一个圆
            function drawCircle(){
                //清空
                circlePoint.context.clearRect(0,0,500,500);
                //填充 蓝色的背景
                circlePoint.context.fillStyle="#FFCC99";
                circlePoint.context.fillRect(0,0,500,500);
                circlePoint.context.fillStyle="blue";
                //定义开始画圆的路径
                circlePoint.context.beginPath();
                circlePoint.context.arc(circlePoint.x,circlePoint.y,10,0,Math.PI*2,true);
                circlePoint.context.closePath(); //结束
                circlePoint.context.fill(); //填充
                //坐标要变
                circlePoint.x+=2;
                circlePoint.y+=2;
                if(circlePoint.x>=500){
                    clearInterval(circlePoint.timer);
                }
            }

<canvas id="can" width="500" height="500"></canvas>

        <script>
        2、画图片
            //一个对象的方法
            function pai(){
               var  o=new Object();
               o.index=0; //下标,为了解决图片 异步加载渲染问题
               o.num=0;
               o.src="";
               return o;
            }
            var can = {
                "context": null,
                "pkLen": 4,
                "margin": 10,
                "pk": []
            };
            function $(id) {
                return document.getElementById(id);
            }
            window.onload = function() {
                loadCanvas();
                loadPk();
            };
            //1、加载数据
            function loadCanvas() {
                var a = $("can");
                can.context = a.getContext("2d");
                //填充 蓝色的背景
                can.context.fillStyle = "#FFCC99";
                can.context.fillRect(0, 0, 470, 180);
            }
            //2、随机生产PK牌
            function loadPk() {
                //要生成几张
                var pkArr = randomNumPK();
                console.log(pkArr);
                //填充PK到画布上面
                for(var i=0;i<pkArr.length;i++){
                    var pk=pkArr[i];
                    var img=new Image();
                    img.src=pk.src;
                    img.id=pk.num;  //牌号
                    img.index=pk.index;
                     //图片本身渲染异步完成后才能加载。否则空白
                     img.onload=function(){
                           console.log(this);
                            var x=10+this.index*105;
                           can.context.drawImage(this,x,10);
                     };
                }
            }
            //随机生成指定个数的不重复的1-54的打扑克对象
            function randomNumPK() {
                var rd = Math.floor(Math.random() * 100);
                //定义一个数来存储4个数字
                var nums = [];
                do {
                    if(rd >= 1 && rd <= 54) {
                        //true代表已经存了
                        var result = nums.some(function(item, index, array) {
                            return(item == rd);
                        });
                        //不存在
                        if(!result) {
                            var pkn = new pai(); //工厂方法,每一次都会被实例化一个对象
                            pkn.num = rd;
                            pkn.src = "img/" + rd + ".jpg";
                            pkn.index=nums.length;
                            nums.push(pkn);
                        }
                    }
                    //重新生成
                    rd = Math.floor(Math.random() * 100);
                } while (nums.length != can.pkLen);
                return nums;
            }
        </script>
    </head>
    <body>
        <!-- 画4 张片    105-180   =  470   -->
        <canvas id="can" width="470" height="180"> </canvas>
    </body>
时间: 2024-10-07 06:29:38

笔记之_java整理html5的相关文章

笔记之_java整理框架

This依赖于对象,static依赖于类 字符串的模糊查询: instr(empName,?)>0 empName like '%白%' Create view 表名 as 多表连接 视图是临时表 多表连接语句生成,查询工具点开 <T,K>泛型可以用多个 ResultSetMetaData取得列名集合,rst.getMetaData Reflect反射,Field[] 实例化对象方法: New student(); Student.class.newInstance(); Class.f

笔记之_Java整理jquery

$.extend扩展 Jquery的bin绑定事件,unbind取消所有事件 http://jquery.cuishifeng.cn/ Jquery学习地址:http://www.runoob.com/jquery/jquery-plugin-validate.html Jquery学习地址:http://www.haorooms.com/post/jquery_selecter_zj 使用ajax的jsonP跨域请求数据,需要在服务器对数据进行处理 ajax跨域请求会传过来一个参数如callb

笔记之_java整理servlet

Get请求与与post请求: Get不会改变服务器数据,只做查询 Post会对服务器数据做出修改,可评论的网页 火狐的firebug附加组件,可以测试网络 延迟实例化,提供一个set方法,让子类实现赋值 父类引用指向子类实现 Jquery easyUI中文文档 Pojo简单的实体类对象 Json Object和jsonArray不可以直接进行日期转换,List<>可以 Html5删除<!DOCTYPE HTML后的内容> 引入jquery后用$()代替了window.onload.

笔记之_Java整理IO流

线程重复执行: ScheduledExecutorService exec = Executors.newScheduledThreadPool(1); exec.scheduleAtFixedRate(线程名, 1, 1, TimeUnit.SECONDS); 字符输出流writer写完后要执行flush()方法,不然内容不存在 IO流:实时交互 Socket网络交互 多线程和socket合为一体 所有软件几乎都会有多线程,所有跟网络有关的必须要使用socket 大多数的程序只能循环运行单独的

笔记之_java整理hibernate

页面调试数据: <%@taglib uri="/struts-tags" prefix="s" %> <s:debug></s:debug> Js清除缓存 使用hibernate延迟加载时,并且数据库有关联关系,转换成json对象时不能直接转换,要用new JSONObject(),然后put()方法存值 国外框架项目地址:http://websystique.com/springmvc/spring-mvc-4-angularj

笔记之_java整理JavaScript

1.javascript 面向对象这一块 1). javascript的基本数据类型有哪些? Number (数字) 1 1.2 String (字符串) '' "" Boolean 布尔 true false Undefined 未定义 Null 空 2).javascript的引用数据类型有哪些? Object {}. 函数 function . 数组 [] 2.javascript定义对象,动态扩冲里面的变量或者属性 var a =new Object(); //实例化一个对象

笔记之_java整理kindeditor文件上传插件

下载插件压缩包 图片创建虚拟服务器路径: 在Tomcat中,打开Tomcat的系统文件夹servers,打开下面的server.xml, 在<Context docBase="class" path="/class"--/>标签中,修改绝对路径docBase和虚拟路径path ,绝对路径是磁盘上创建的保存图片的文件夹,虚拟路径是网页访问图片的路径, 根据自己要用的上传文件的类型,选择插件的相关案例,引用css.js,修改路径以及页面类型jsp.php,

笔记之_Java整理css3

微传单:http://s.wcd.im/index.jsp?id=9661Zi9&flyerAid=9661&p&loading=0&fromOfficial Friendly同包访问 子类重写方法的修饰符必须大于等于子类定义好的访问修饰符 类是抽象的对象是现实存在的 局部变量必须先赋值才能使用 一个Java文件可以包含n个类智能有一个是public并且与文件名一致 接口继承接口,方法名相同不是重写是覆盖 实现接口的类不是抽象类,则必须实现接口及其父级接口的所有方法 Str

笔记之_Java整理Spring MVC

springMVC原理讲解地址:http://www.cnblogs.com/dragonfei/p/6148625.html Ionic2和angularjs2和angularjs和nosql菜鸟教程一起是做手机的 https://www.bilibili.com/video/av8614724/index_10.html是ionic2公开课地址 FreeCMS DeDeCMS风信网,数据库表结构 DEDECMS简单建站 Filter和Interceptor的区别 Filter是基于函数回调的