常用html、demo代码

发布时间：2015-10-15, 14:45:06 分类：HTML | 编辑 off 网址 | 辅助

图集1/30

正文 9756字数 27,230,044阅读

暗网网址导航hidden wiki

http://zqktlwi4fecvo6ri.onion

Run code

Cut to clipboard

HTML特殊字符编码对照表


console.log(allnum);
javascript:;
vertical-align:middle;
strconv=yes+js
echo str_ireplace("WORLD","Shanghai","Hello world!");//不区分大小写
<a href="javascript:scroll(0,0)">返回顶部</a>
jquery多个节点绑定同一个事件
$('#begin,#end') 用逗号隔开

target="_blank"
index.php?g=Admin&m=Login
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
 location.href = url;

autocomplete="off"
<form name="input" action="html_form_action.asp" method="get">
Username: 
<input type="text" name="user" />
<input type="submit" value="提交" />
<input type="button" value="提交">
</form>

$.ajax({
	type: "POST",
	url:'/index.php?g=User&m=Post&a=Message&ajax=ajax',
	data:$('#myform').serialize(),
	error: function(request) {
		alert("提交失败");
	},
	success: function(data) {
		if(data>0){
			alert('留言提交成功！');
			location.reload();
		}else alert("提交失败");
		
	}
});

function ajaxpost(tel,pass){
    $.ajax( {
        url:"/index.php/Home/Register/is_login.html", 
        type: "post", 
        data:"tel="+tel+"&pass="+pass,
        //dataType: "json",
        //cache: false,
        //async: false,
        beforeSend: function(){
         // Handle the beforeSend event
        },
        success: function(data){
            
        }
    });
}

 <a href="javascript:scroll(0,0)">顶部</a> <a href="#copy">底部</a>

<meta charset="UTF-8" />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

Run code

Cut to clipboard

<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="icon" href="/favicon.ico">
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">
</head>

<body>

</body>

</html>

Run code

Cut to clipboard

$.ajax( {
	url: '/index.php?s=/addon/WeiSite/WeiSite/ForgetPassword/tel/'+shoujihao+'/codeddd/'+codeddd+'.html', //这里是静态页的地址
	type: "GET", //静态页用get方法，否则服务器会抛出405错误
	//dataType: "json",
	//cache: false,
	//async: false,
	beforeSend: function(){
	 // Handle the beforeSend event
	},
	success: function(data){
		//var result = $(data).find("另一个html页面的指定的一部分").html();
	}
});

Run code

Cut to clipboard

<link rel="apple-touch-icon" size="72x72" href="/icon-ipad.png" />
<link rel="apple-touch-icon" size="114x114" href="/icon-iphone4.png" />
<link rel="icon" href="/favicon.ico">
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
<meta name="keywords" content="常用代码">
<meta name="description" content="isWTF's blog!!">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />

Run code

Cut to clipboard

I('post.id',0,'intval'); // 用intval过滤$_POST['id']
I('get.title','','strip_tags'); // 用strip_tags过滤$_GET['title']

Run code

Cut to clipboard

UC 浏览器的部分私有Meta 属性
设置屏幕方向为横屏还是竖屏
<meta name="screen-orientation" content="portrait|landscape">
设置是否全屏，yes表示强制浏览器全屏
<meta name="full-screen" content="yes">
缩放不出滚动条
<meta name="viewport" content="uc-fitscreen=no|yes"/>
设置no后用户缩放与标准浏览器缩放一直，设置为yes后，用户缩放金放到图片和文字，不出现横向滚动条。
排版
<meta name="layoutmode" content="fitscreen|standard" />
  fitscreen模式简化页面处理，适合页面阅读节省流量，standard模式和标准浏览器一致；一旦设置layoutmode meta后，用户使用浏览器提供的的排版模式选项将会无效。
夜间模式
<meta name="nightmode" content="enable|disable"/>
nightmode的值设置为disable后，即使用户使用浏览器的夜间模式，页面的表现也仍然是非夜间模式。
强制图片显示
<meta name="imagemode" content="force"/>
 UC浏览器为了节省流量，为用户提供了无图模式，但是如果页面的图片是必不可少的，如验证码的，需要强制浏览器显示图片，可以设置imagemode， 不影响子页面。通过META设置图片加载方式会作用于整个页面，如果希望对单个图片进行设置，那么可以使用这个
<img src="..." show="force">
应用模式
<meta name="browsermode" content="application"/>
使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。

QQ 浏览器x5内核定制标签说明
设置屏幕方向
<meta name="x5-orientation" content="portrait|landscape" />
设置全屏
<meta name="x5-fullscreen" content="true" />
设置屏幕模式
<meta name="x5-page-mode" content="app" />

对于控制全屏的meta 标签，UC 跟QQ 处理的方式稍有不同：区别在于处理系统状态栏，UC 是直接覆盖系统状态栏，而QQ 仍然保留之。

Run code

Cut to clipboard


$("p").css("color","red");
//同时设置字体大小和背景色   
$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

Run code

Cut to clipboard

header('Content-Type:text/html;charset=utf-8'); //避免输出乱码 

<img  title="点击刷新" src="cache/yzm.php" align="absbottom" onclick="this.src='cache/yzm.php?'+Math.random();" />

Run code

Cut to clipboard

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

<link rel="stylesheet" href="http://lizhenqiu.com/templates/default/style.css" type="text/css" media="screen">

<script type="text/javascript">jQuery(".slideTxtBox").slide(); </script>

Run code

Cut to clipboard

Yourphp手册
简单文本编辑器

data:text/html, <title>Text Editor</title><body contenteditable style="font-size:2rem;font-family:georgia;line-height:1.4;max-width:60rem;margin:0 auto;padding:4rem;"> lizhenqiu.com

Run code

Cut to clipboard

Chrome提供了一个简单的方法。首先，按“F12”打开控制台，然后输入：

document.designMode = "on"

Run code

Cut to clipboard

添加到收藏夹URL填写下面的即可在当前页面点击收藏夹编辑页面

javascript:(function(){document.designMode = "on" })();

Run code

Cut to clipboard

接下来，你就可以编辑屏幕上的文本内容了。

编辑器

data:text/html, <html contenteditable>

Run code

Cut to clipboard

如果你想找回不小心关闭的Tab页面，只需要同时按下“Control"（Mac用户请按“Command”）、“Shift"和“T”。

js随机数

function getRandom(n){
        return Math.floor(Math.random()*n+1)
        }

Run code

Cut to clipboard

top.location.href 和 localtion.href 有什么不同

top.location.href=”url”

Run code

Cut to clipboard

在顶层页面打开url（跳出框架）　　

self.location.href=”url”

Run code

Cut to clipboard

仅在本页面打开url地址　　

parent.location.href=”url”

Run code

Cut to clipboard

　
在父窗口打开Url地址　　

this.location.href=”url”

Run code

Cut to clipboard

　　
用法和self的用法一致
if (top.location == self.location) 判断当前location 是否为顶层来禁止frame引用　如果页面当中有自定义的frame的话，也可以将parent self top换为自定义frame的名称效果就是在自定义frame窗口打开url地址

实际中可能这样使用

if(top !== self){ top.location.href = location.href; }

Run code

Cut to clipboard

禁止frame引用
以下是从网上找到的一个例子，不是很直观，我加了上面那三行代码，可以先去掉，再加上，看一下效果，就很清楚了以下是top.htm 代码

<script language=javascript> function rs(){

        if(top !== self){             top.location.href = location.href;         }   parent.left.location.href="top.htm" parent.bot.location.href="top.htm" } < /script> < input type=button name=name value="ksdj" onclick=rs();>

Run code

Cut to clipboard

以下是一个随意文件名的htm文件:

<FRAMESET COLS="150,*"> < FRAME SRC="left.htm" name=left> < FRAMESET ROWS="150,*"> < FRAME SRC="top.htm" name=top> < FRAME SRC="bot.htm" name=bot> < /FRAMESET> < /FRAMESET>

Run code

Cut to clipboard

你自己试试,我想你要的可能就是这样的效果!

top表示主窗口，location表示当前窗口，如果你的文件只有一个框架，没有iframe和frmaeset，那么是完全一致的，没有区别。

top.location是在顶层frame中打开新页
window.location是在当前frame中打开新页
parent.location 在当前窗口的父窗口打开Url地址

<select id="isAudit" name="isAudit"> 
<option value="2">全部</option> 
<option value="1" selected = "selected">通过</option> 
<option value="0">未通过</option> 
</select>

Run code

Cut to clipboard

修改ID增加ID属性，修改class同理
$('.div').attr('id','newid');

如果是给标签添加class样式可以这样
$('#div').addClass('css类名');

strtotime("-1 week")， strtotime("-n days");可以很方便的获取当前日期的前n天、周、月的时间戳

Run code

Cut to clipboard

舒适网页配色方案
px像素转换rem单位工具

（支付宝）给作者钱财以资鼓励（微信）→

标签: 常用20 html22 demo2 代码58

有过 279 条评论 »

广西南宁市 2016-09-13, 16:31:07

微信中a链接无法进行跳转
【问题】微信页面开发时，各个主页之间的跳转，完全是通过a链接进行的，但是来回跳转几次，再次从其他主页面跳回首页的时候，微信头部出现了跳转加载进度条，但是就是不跳转，也没有任何反应

【范围】只出现在微信内置浏览器上

【解决方法】只要在原本跳转的链接后面带上任意一个参数，即：


<a href="http://www.baidu.com">百度一下</a>

Run code

Cut to clipboard

变成

<a href="http://www.baidu.com?love">百度一下</a>

Run code

Cut to clipboard

【注】参数love可以是任意的，随个人喜好

【原因】正在寻找中...

reply | quote | #⁷³

广西南宁市 2016-09-14, 10:32:57

php下载文件，添加响应头

//下载,添加响应头信息
header('Content-type:application/octet-stream');
header('Content-Disposition:attachment;filename="'.basename($file).'"');
header('Content-Length:'.filesize($file));
readfile($file);

Run code

Cut to clipboard

reply | quote | #⁷⁴

广西南宁市 2016-09-14, 11:06:48

用javascript获取屏幕高度和宽度等信息

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

 

<script language="javascript">
function screenInfo(){
    var  s = "";
   s += "\r\n网页可见区域宽："+ document.body.clientWidth;
   s += "\r\n网页可见区域高："+ document.body.clientHeight;
   s += "\r\n网页可见区域宽："+ document.body.offsetWidth  +" (包括边线的宽)";
   s += "\r\n网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)";
   s += "\r\n网页正文全文宽："+ document.body.scrollWidth;
   s += "\r\n网页正文全文高："+ document.body.scrollHeight;
   s += "\r\n网页被卷去的高："+ document.body.scrollTop;
   s += "\r\n网页被卷去的左："+ document.body.scrollLeft;
   s += "\r\n网页正文部分上："+ window.screenTop;
   s += "\r\n网页正文部分左："+ window.screenLeft;
   s += "\r\n屏幕分辨率的高："+ window.screen.height;
   s += "\r\n屏幕分辨率的宽："+ window.screen.width;
   s += "\r\n屏幕可用工作区高度："+ window.screen.availHeight;
   s += "\r\n屏幕可用工作区宽度："+ window.screen.availWidth;
   alert(s);
}
</script>

Run code

Cut to clipboard

reply | quote | #⁷⁵

广西南宁市 2016-09-14, 11:08:19

js实现文字截断
先前用jq做了一个文字截断功能，但是不用jq的项目要实现此功能还要引如jq显得过于麻烦。这里写了一个js的文字截断功能。直接上代码。

HTML（测试用的）：

<div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div limit="10" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div limit="5" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div limit="2" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div limit="20" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div limit="100" >我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>
         <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div>

Run code

Cut to clipboard

JS：

var limit=[];
             var Text=[];
             var Pox=document.getElementsByTagName('*');
             for(var i=0;i<Pox.length;i++){
                 if(Pox[i].getAttribute("limit")){
                     limit[i]=Pox[i].getAttribute("limit");
                     Text[i]=Pox[i].innerHTML;
                     if(limit[i]<Text[i].length){
                         Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
                     }
                 }
             }

Run code

Cut to clipboard

这里用getElementsByTagName获取所有节点遍历，if（Pox[i].getAttribute("limit")）筛选含有limit这个自定义属性的节点，然后获取各个节点自定义属性limit的值，将其放入limit数组中，把各个节点文字放入Text数组中，将需要截断的值和文本长度作比较，进行截断。

全部JS，这里写的自调：

<script type="text/javascript">
  window.onload=function(){
        (function limit(){
            var limit=[];
             var Text=[];
             var Pox=document.getElementsByTagName('*');
             for(var i=0;i<Pox.length;i++){
                 if(Pox[i].getAttribute("limit")){
                     limit[i]=Pox[i].getAttribute("limit");
                     Text[i]=Pox[i].innerHTML;
                     if(limit[i]<Text[i].length){
                        Pox[i].innerHTML=Text[i].substring(0,limit[i])+"...";
                     }
                 }
             }    
            }());
           }
        </script>

Run code

Cut to clipboard

reply | quote | #⁷⁶

广西南宁市 2016-09-22, 16:03:11

jquery 回车事件
简单地记下jquery实现回车事件，代码如下：
全局：

$(function(){
document.onkeydown = function(e){ 
    var ev = document.all ? window.event : e;
    if(ev.keyCode==13) {

           $('#FormId).submit();//处理事件

     }
}
});

Run code

Cut to clipboard

某个控件：

$('#id').keydown(function(e){
if(e.keyCode==13){
   $('#FormId).submit(); //处理事件
}
});

if (window.event.keyCode==13) window.event.keyCode=0 　　//这样就取消回车键了

Run code

Cut to clipboard

如果想模拟Tab键，只要写成　

if (window.event.keyCode==13) window.event.keyCode=9

Run code

Cut to clipboard

就行了，它会跳到另一个元素上。

reply | quote | #⁷⁷

广西南宁市 2016-09-26, 15:27:49

js弹出框、对话框、提示框、弹窗总结
js中最常见的框

 //弹出对话框并输出一段提示信息  
    function ale() {  
        //弹出一个对话框  
        alert("提示信息！");  
  
    }

Run code

Cut to clipboard

//弹出一个询问框，有确定和取消按钮  
    function firm() {  
        //利用对话框返回的值 （true 或者 false）  
        if (confirm("你确定提交吗？")) {  
            alert("点击了确定");  
        }  
        else {  
            alert("点击了取消");  
        }  
  
    }

Run code

Cut to clipboard

//弹出一个输入框，输入一段文字，可以提交  
    function prom() {  
        var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，  
  
        //这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值  
        if (name)//如果返回的有内容  
        {  
            alert("欢迎您：" + name)  
        }  
  
    }

Run code

Cut to clipboard

reply | quote | #⁷⁸

广西南宁市 2016-09-26, 15:30:23

项目中踩过的坑之-sessionStorage

总想写点什么，却不知道从何写起，那就从项目中踩过的坑开始吧，希望能给可能碰到相同问题的小伙伴一点帮助。

项目情景：

有一个id，要求通过当前网页打开一个新页面(不是当前页面)，并把id传给打开的新页面，然后新页面在初始化时候使用这个id，发送请求········。

解决方案：

第一个小伙伴选择了cookie，总所周知cookie可以在同源网页间共享。我建议他不要用，因为cookie在页面发送请求的时候都需要一同发送的，浪费带宽不好。

然后我骄傲的建议了他使用sessionStorage或者localStorage，出于偷懒目的~我让他选择了sessionStorage，关闭页面就自动清除，localStorage还需要调用removeItem进行清除。

小伙伴就使用了sessionStorage，哈哈，果然可以传给打开的新页面id信息，还没高兴多久，问题又来了，又有新的入口打开新的页面不需要传递id，这简单呀，就只要打开一个然后在新页面

使用完sessionStorage的id就清空好了，这样就不会出现只想打开新页面的时候还出现之前依据老id加载页面的情况了。想法是简单的，现实是残酷的，实际效果还是按照老的id加载的，为啥呀

然后就是各种网上查资料，这才发现自己是如此的天真，在三篇文章中看到如下内容，不知道如何引用，暂且copy过来吧，写文章的都是好人········

sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

上面红色的字总结一下就是不同页面是无法使用sessionStorage的，可是为啥通过超链接或者window.open新页面的时候是可以传递sessionStorage的呀，感觉有点歪打正着的感觉······经过多次实验，发现了一个惊天秘密，打开的新页面的sessionStorage是通过原网页的sessionStroage复制传递过来的，也可以理解为新网页的sessionStorage是原网页的sessionStorage的复制出来的独立体，每个网页的sessionStorage都是一个独立的，原来是这样啊。哈哈，下面就简单了，只要用完就把原网页的sessionStorage清掉就好了哈。。。。。突然发现，想偷懒是不可能的了。。。。可是问题又来了，我咋知道啥时候新网页获取好sessionStorage，是不是有点想喷血的赶脚。。。。

然后我又骄傲的在原网页设置好sessionStorage的代码下面，使用了st=setTimeout(function(){ sessionStorage.removeItem(XXX);clearTimeout(st)//此处显示出个人修养和最起码的职业操守，鉴定完毕}，1000);

···········问题愉快的解决了，可是我还在回想，假如当初讲究一下使用cookie，或者当时不想偷懒，直接使用localStorage就木有这么多问题了吧，哎，世事无常，想偷懒反而花费更多的时间和精力，反而学到了很多东西，假如有啥更好的解决方法请在下方回复哈，希望我踩的这个坑可以给大家一些帮助。

reply | quote | #⁷⁹

广西南宁市 2016-09-26, 15:44:43

CSS隐藏元素的N种实现方式。
1. width:0;

光有高度是不行的，还得有宽度。缺点文字隐藏不了，可以加个color:#fff和背景颜色一样就ok了，障眼法，迷惑人的，其实内容还在，如果有文字的话，还是可以触发点击事件的，这种做法很多黑客就会利用在目标站点链接上加一个和背景颜色一样的让管理员发现不了。

2. height:0;

和上面一样,一个物体至少得有宽和高。

3. opacity:0;

元素还在，只是看不见而已。

4. position:absolute;left:-9999px;

元素还在，只是超出了屏幕范围。

5. text-index:-9999;

只能达到隐藏文字的效果，没有其他副作用。给页面添加logo图片，还想seo添加文字又不想显示这段文字，就可以使用这个方法。

6. z-index:-99999;

需要配合定位使用，层级太低导致我们无法看见这个元素，使用这个缺点还是很多的，首先就算你z-index:-9999了并且定位，但如果这个元素比后面的元素高了或者宽了，再着有文字一样还是可以看到这个元素。

代码如下：

<style>
#box{
width:100px;
height:100px;
background-color:red;
position:absolute;
z-index:-9999;
}
</style>
<div id="box">111111</div>
<div>为什么要这样</div>
7. overflow:hidden;

如果元素超出所设置的宽和高，剩下的部分就会被隐藏，如果想让整个元素隐藏，设置宽和高为0就行。

width:0px;
height:0px;
overflow:hidden;
8. visibility:hidden;

元素被隐藏，但是还占位置。

9. display:none;

元素被隐藏，并且不占位置。

10. background-color:#fff;

把元素的背景颜色设置成body的背景，障眼法。

11. max-width:0px;

和width:0px;原理一样。

12. max-height:0px;

和height:0;原理一样。

13. background-color:rgba(0,0,0,0);color:#fff;

把元素透明度设置成0，达到看不见的效果，和opacity原理一样。如果想让文字也看不见，给它一个障眼法就好了,或者font-size:0

14. font-size:0px;

隐藏文字的效果。

15. transform:translate(-9999px);

和left:-99999px;原理一样，把元素移出屏幕可视区。

16. transform:scale(0);

让元素的大小设置成0不就看不见了哈。

17. transform:skew(90deg);

让元素重和，看不见了。

18. margin-left:-9999px;

把元素移出屏幕可视区

19. -webkit-clip-path:polygon(0px 0px,0px 0px,0px 0px,0px 0px);

把元素剪裁了。

reply | quote | #⁸⁰

广西南宁市 2016-09-26, 15:57:58

用js写的一个路由

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现路由</title>
</head>
<body>
    <a href=" ">white</a>
    <a href="#/green" >green</a>
    <a href="#/blue" >blue</a>
    <a href="#/yellow" >yellow</a>
</body>
</html>

<script>

    function Route(){
    }
    Route.prototype.open=function(route,callback){
        var arr={};
        arr[route]=callback;

        window.addEventListener('hashchange',function(){
            var temp=window.location.hash;
            for(var i in arr){
                if(i==temp.slice(1,temp.length)){
                    arr[i]();
                }
            }
        })
    }
    window.Route=new Route();


    function change(color){
        var body=document.getElementsByTagName('body')[0];
        body.style.backgroundColor=color;
        console.log(color);
    }
    
    Route.open('/',function(){
        change('');
    });
    Route.open('/green',function(){
        change('green');
    });
    Route.open('/blue',function(){
        change('blue');
    });
    Route.open('/yellow',function(){
        change('yellow');
    });

</script>

Run code

Cut to clipboard

reply | quote | #⁸¹

Records:279 9/31 «‹5 6 7 8 9 10 11 12 13 ›»

lizhenqiu blog

常用html、demo代码

相关日志

有过 279 条评论 »

留下評論