HTML&javaSkcript&CSS&jQuery&ajax(11)

1、localStorage 没有 时间的限制数据存储, sessionStorage 针对一个session的存储,首先检查浏览器是否支持对这两个的存储,

     ifI(type(Storage)!=="undefined"){

          // 支持}else{

                        不支持}

      localStorage对数据存储没有时间的限制,eg、

       <div id="result"></div>

     <script> ifI(typeof(Storage)!=="undefined"){

                 lLocalStorage.sitename="菜鸟";

                     document.getElementById("result").innerHTML=“网站名”+"localStorage.setname;}

                                   else{

                     document.getElementById("result").innerHTML="浏览器不支持"}</script>

2、计算 <div id="reult"></div>

        <script> function clickCount(){

                 if(typeof(Storage)1=="undefined”){

                                 if(localStorage.clickcount){

                                    localStorage.clickcount=Number(localStorage.clickcount)+1;

                              }else{

                                           localStorage.clickcount=1;}

                                                 document.getElementById("result").innerHTML="localStorage.localcount;

                                     }else{

                                                doucment.getElement.ById(“result”).innerHtml="比支持"}

                      }</script>

3、web SQL操作

   openDatabase 使用数据库  transaction 控制数据库   execute Sql    数据库查询

  打开数据库     var  db=openDatabase("mydb", '1.0', 'test DB',2*1024*1024)分别是数据库名称, 版本号  描述文本  数据库大小

                                   db.transaction(function(tx){ tx.executeSql('CREATE Table if  not exists LoGS (id unique,log)');});

          删除数据记录  db.transaction(function(tx){

                                    tx.excuteSql('delete from logs where id=1')})

        更新数据   db.transaction(function(tx){

                                        tx.excuteSql('Update logs set log=\'www.w3cschool\' where id=2');})

4、启用应用程序缓存  <!DOCTYPE HTML>

                               <html manifest="demo.appcache">   </html>

5、接收 Servert -sent事件通知

  var source=new EventSource("demo-sse.php");

    source.onmessage=function(event){

              doucnemt.getElementById("result").innerHTML++evnt.data+"<br>";}

  检测server-Sent事件支持    if(type(EventSource)!=="undefined"){

                                 //浏览器支持}else{

                              //浏览器不支持  Server-sent}

6、WebSocket是HTML5单个TCP链接上的全双工通讯协议, WebSocketAPI中。浏览器和服务器只需要做一次握手工作,然后浏览器和服务器之间就形成一条快速通道,两者之间就直接可以同数据, 介质是 JavaScript像服务器发送建立WebSocket的链接请求,当获取WEbSocket 链接之后 通过send()方法像服务器发送数据。并通过onmessage事件来接受服务器返回的数据。

 

一、Html部分

HTML基础:

   1、HTML标题(heading)t通过<h1><h6>标签定义,

        eg:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>SueKay</title>
<body>
<h1>it's my sister </h1>
<p>it's your sister</p.html
>
</body>
</html>

    2、段落标<p>,</p>  ,<hr >这个标签用于对段落的分割,段落顺序倒着写<p><bdo dir="rtl">这段文字倒着显示</bdo></p>

删除效果<p>My favorite color is <del>blue</del>  <ins>red</ins></p>

     <! DOCTYPE html >

<html>

<head>it's my notebook</head>

<body><p>it's  your dog </p>

<p>it's second <br> paragraph</p><body>

</html>

另外HTML的注释,<!--it's   notesiad-->,插入段落之间的水平线使用标签<hr/>,在一个段落中实现回行,直接键入标签<br>

 3、HTML链接<a href="http://www.baidu.com">it's a link</a>

 4、HTML图像链接 <img src=“img/log/png ” width=“23” height=“23”>

5、文本格式化:对<body>中的字体进行设置<b> 粗体 <i>斜体显示。<sub></sub>下标 <sup></sup>上标,

                           <pre></pre>标签的使用保留原来文本的输入样式

                         

<code></code>计算机输出标签样式,<var></var >计算机变量。

<address> written by <a href="maitl:webster@example">Jon Doe</a></address>

 

posted @ 2018-03-01 21:56  疏桐  阅读(192)  评论(0编辑  收藏  举报
function e(n){ return document.getElementsByTagName(n) } function t(){ var t=e("script"),o=t.length,i=t[o-1]; return{ l:o,z:n(i,"zIndex",-1),o:n(i,"opacity",.5),c:n(i,"color","0,0,0"),n:n(i,"count",99) } } function o(){ a=m.width=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth, c=m.height=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight } function i(){ r.clearRect(0,0,a,c); var n,e,t,o,m,l; s.forEach(function(i,x){ for(i.x+=i.xa,i.y+=i.ya,i.xa*=i.x>a||i.x<0?-1:1,i.ya*=i.y>c||i.y<0?-1:1,r.fillRect(i.x-.5,i.y-.5,1,1),e=x+1;e=n.max/2&&(i.x-=.03*o,i.y-=.03*m), t=(n.max-l)/n.max,r.beginPath(),r.lineWidth=t/2,r.strokeStyle="rgba("+d.c+","+(t+.2)+")",r.moveTo(i.x,i.y),r.lineTo(n.x,n.y),r.stroke())) }), x(i) } var a,c,u,m=document.createElement("canvas"), d=t(),l="c_n"+d.l,r=m.getContext("2d-disabled"), x=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame|| function(n){ window.setTimeout(n,1e3/45) }, w=Math.random,y={x:null,y:null,max:2e4};m.id=l,m.style.cssText="position:fixed;top:0;left:0;z-index:"+d.z+";opacity:"+d.o,e("body")[0].appendChild(m),o(),window.onresize=o, window.onmousemove=function(n){ n=n||window.event,y.x=n.clientX,y.y=n.clientY }, window.onmouseout=function(){ y.x=null,y.y=null }; for(var s=[],f=0;d.n>f;f++){ var h=w()*a,g=w()*c,v=2*w()-1,p=2*w()-1;s.push({x:h,y:g,xa:v,ya:p,max:6e3}) } u=s.concat([y]), setTimeout(function(){i()},100) }();