前端6.12

时钟


<script type="text/javascript">

    window.onload = function(){   

        var oDiv = document.getElementById('div1');

        function timego(){

            var now = new Date();

            var year = now.getFullYear();

            var month = now.getMonth()+1;

            var date = now.getDate();

            var week = now.getDay();

            var hour = now.getHours();

            var minute = now.getMinutes();

            var second = now.getSeconds();

            var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);

            oDiv.innerHTML = str;

        }

        timego();

        setInterval(timego,1000);

    }

    function toweek(n){

        if(n==0)

        {

            return '星期日';

        }

        else if(n==1)

        {

            return '星期一';

        }

        else if(n==2)

        {

            return '星期二';

        }

        else if(n==3)

        {

            return '星期三';

        }

        else if(n==4)

        {

            return '星期四';

        }

        else if(n==5)

        {

            return '星期五';

        }

        else

        {

            return '星期六';

        }

    }

    function todou(n){

        if(n<10)

        {

            return '0'+n;

        }

        else

        {

            return n;

        }

    }

</script>

......

<div id="div1"></div>

定时器制作倒计时

<script type="text/javascript">

    window.onload = function(){

        var oDiv = document.getElementById('div1');

        function timeleft(){

            var now = new Date();

            var future = new Date(2016,8,12,24,0,0);

            var lefts = parseInt((future-now)/1000);

            var day = parseInt(lefts/86400);

            var hour = parseInt(lefts%86400/3600);

            var min = parseInt(lefts%86400%3600/60);

            var sec = lefts%60;

            str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';

            oDiv.innerHTML = str;

        }

        timeleft();

        setInterval(timeleft,1000);       

    }

</script>

......

<div id="div1"></div>

变量的作用域

全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

局部变量：函数内部定义的变量，函数内部可以访问，外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，就使用内部变量，如果没有，就去外部查找

函数内部如果不用'var'关键字定义变量，变量可能会变成全局变量，如果用严格模式解析会报错

封闭函数


封闭函数的一般写法

封闭函数定义：(function(){……})()

;;(function(){

var str = '欢迎访问我的主页';

alert(str);

})();//最后的()表示马上执行

//封闭函数其他的写法：在匿名函数前加“！”或者“~”，之后加“()”

用变量的方式定义函数


原来的写法：可以提前

myAlert();

function myAlert(){

alert('hello!');j

}

//函数用变量方式定义：先定义再使用

// myalert();//提前会报错

var myAlert = function(){

alert('hello!');

}

myAlert();//放在下面可以执行

闭包


闭包的本质就是函数嵌套，就是在函数里面定义函数，

内部函数可以引用外部函数的参数和变量

参数和变量不会被垃圾回收机制给回收

闭包的用途：可以存循环的索引值、做私有变量计数器

闭包的一般写法

function aa(b){

var a = 12;

function bb(){

alert(a);

alert(b);

}

return bb;

}

var cc = aa(24);

闭包的封闭函数写法

var cc = (function(b){

var a = 12;

function bb(){

alert(a);

alert(b);

}

return bb;

})(24);

cc();

闭包的用途：1.存循环的索引值


<script type="text/javascript">

    window.onload = function(){

        var aLi = document.getElementsByTagName('li');

        for(var i=0;i<aLi.length;i++)

        {

            (function(i){

                aLi[i].onclick = function(){

                    alert(i);

                }

            })(i);

        }

    }

</script>

......

<ul>

    <li>111</li>

    <li>222</li>

    <li>333</li>

    <li>444</li>

    <li>555</li>

</u

2、私有变量计数器，外部无法访问，避免全局变量的污染

<script type="text/javascript">

var count = (function(){

    var a = 0;

    function add(){

        a++;

        return a;

    }

    return add;

})()

count();

count();

var nowcount = count();

alert(nowcount);

</script>

闭包选项卡


<script> window.onload=function(){

        var bTn=document.getElementsByTagName("input");

        var Odiv=document.getElementsByTagName("div");

        for(var i=0;i<bTn.length;i++){

            var j=i;

            (function(j){//使用匿名函数让闭包的行为符合预期                bTn[j].onclick=function(){//我们使用了闭包，会导致一些问题，闭包只会取得包含函数中任何变量的//最后一个值for(var i=0;i<bTn.length;i++){    //清除所有的按钮和div格式                        bTn[i].className="";

                        Odiv[i].style.display="none";

                    }

                    this.className="active"; //使得当前点击的按钮(放生点击事件的按钮）改变颜色                    Odiv[j].style.display="block";//使得对应的div层显示出来                };

            })(i);

        }

    }</script>

跳转源页面

所谓的js页面跳转就是利用javesrcipt对打开的页面ULR进行跳转，如我们打开的是A页面，通过javsrcipt脚本就会跳转到B页面。

目前很多垃圾站经常用js跳转将正常页面跳转到广告页面，当然也有一些网站为了追求吸引人的视觉效果，把一些栏目链接做成js链接，但这是一个比较严重的蜘蛛陷阱，无论是SEO人员还是网站设计人员应当尽力避免。

常用的JS页面跳转代码调用大全-马海祥博客

很多站长在制作网站的时候，为了某种展示或SEO优化的目的，常常需要利用js跳转效果，所以对于一个站长或SEO来说，熟练的掌握或使用js技术（具体可查看马海祥博客《JavaScript是什么？JavaScript功能有哪些》的相关介绍），已成为一门必学的技能了。

在我这么多年做SEO的过程中，也收集和使用了很多的js代码，今天我就借助马海祥博客的平台跟大家分享一些常用的js页面跳转代码，希望能对大家有所帮助。

一、常规的JS页面跳转代码

1、在原来的窗体中直接跳转用

window.location.href="你所要跳转的页面";

2、在新窗体中打开页面用：

window.open('你所要跳转的页面');

3、JS页面跳转参数的注解


window.open ('page.html', 'newwindow', 'height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no')

//写成一行

-->

参数解释：

js脚本开始；

window.open 弹出新窗口的命令；

'page.html' 弹出窗口的文件名；

'newwindow' 弹出窗口的名字（不是文件名），非必须，可用空'代替；

height=100 窗口高度；

width=500 窗口宽度；

top=0 窗口距离屏幕上方的象素值；

left=0 窗口距离屏幕左侧的象素值。

二、跳转指定页面的JS代码

第1种：

window.location.href="login.jsp?backurl="+window.location.href;

第2种：

alert("返回");

window.history.back(-1);

第3种：

window.navigate("top.jsp");

第4种：

self.location=’top.htm’;

第5种：

alert("非法访问！");

top.location=’xx.jsp’;

三、页面停留指定时间再跳转（如3秒）

function jumurl(){

window.location.href = 'http://www.mahaixiang.cn/';

}

setTimeout(jumurl,3000);

获取地址栏参数

用JS获取地址栏参数的方法（超级简单）

方法一：采用正则表达式获取地址栏参数：（ 强烈推荐，既实用又方便！）

function GetQueryString(name)

{

     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

     var r = window.location.search.substr(1).match(reg);

     if(r!=null)return  unescape(r[2]); return null;

}


// 调用方法

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

下面举一个例子:

若地址栏URL为：abc.html?id=123&url=http://www.maidq.com

那么，但你用上面的方法去调用：alert(GetQueryString("url"));

则会弹出一个对话框：内容就是 http://www.maidq.com

如果用：alert(GetQueryString("id"));那么弹出的内容就是 123 啦；

当然如果你没有传参数的话，比如你的地址是 abc.html 后面没有参数，那强行输出调用结果有的时候会报错：

所以我们要加一个判断 ，判断我们请求的参数是否为空，首先把值赋给一个变量：




var myurl=GetQueryString("url");

if(myurl !=null && myurl.toString().length>1)

{

   alert(GetQueryString("url"));

}

这样就不会报错了！

方法二：传统方法

<script type="text/javascript"> function UrlSearch() {    var

name,value;    var str=location.href; //取得整个地址栏    var

num=str.indexOf("?")    str=str.substr(num+1); //取得所有参数  

stringvar.substr(start [, length ]

   var arr=str.split("&"); //各个参数放到数组里    for(var i=0;i <

arr.length;i++){     num=arr[i].indexOf("=");     if(num>0){     

name=arr[i].substring(0,num);      value=arr[i].substr(num+1);     

this[name]=value;      }     } } var Request=new UrlSearch(); //实例化

alert(Request.id); </script>

比如说把这个代码存为1.html

那么我要访问1.html?id=test

这个时候就取到test的值了

在html里调用 <script type="text/javascript"> var

a="http://baidu.com"; </script> </head> <body> <a

id="a1" href="">sadfsdfas</a> <script> var

a1=document.getElementById("a1"); a1.href=a; </script>

<script type="text/javascript"> var

a="http://xxx.com/gg.htm?cctv"; var s=a.indexOf("?"); var

t=a.substring(s+1);// t就是?后面的东西了

</script>

stringvar.substr(start [, length ]

返回一个从指定位置开始的指定长度的子字符串。

stringvar

必选项。要提取子字符串的字符串文字或 String 对象。

start

必选项。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。

length

可选项。在返回的子字符串中应包括的字符个数。

如果 length 为 0 或负数，将返回一个空字符串。如果没有指定该参数，则子字符串将延续到 stringvar 的最后。

下面列举出一些相关的参数：

str.toLowerCase()   转换成小写  str.toUpperCase()   字符串全部转换成大写

URL即:统一资源定位符 (Uniform Resource Locator, URL) 完整的URL由这几个部分构成：

scheme://host:port/path?query#fragment scheme:通信协议 常用的http,ftp,maito等

host:主机 服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。

port:端口号 整数，可选，省略时使用方案的默认端口，如http的默认端口为80。

path:路径 由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

query:查询 可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开，每个参数的名和值用"="符号隔开。

fragment:信息片断 字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)

对于这样一个URL

http://www.maidq.com/index.html?ver=1.0&id=6#imhere

我们可以用javascript获得其中的各个部分 1, window.location.href

整个URl字符串(在浏览器中就是完整的地址栏) 本例返回值:

http://www.maidq.com/index.html?ver=1.0&id=6#imhere

2,window.location.protocol URL 的协议部分 本例返回值:http:

3,window.location.host URL 的主机部分 本例返回值:www.maidq.com

4,window.location.port URL 的端口部分 如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符 本例返回值:""

5,window.location.pathname URL 的路径部分(就是文件地址) 本例返回值:/fisker/post/0703/window.location.html

6,window.location.search 查询(参数)部分 除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值 本例返回值:?ver=1.0&id=6

7,window.location.hash 锚点

Math

Math.random 获取0-1的随机数

Math.floor 向下取整

Math.ceil 向上取整

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 219,490评论 6赞 508
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 93,581评论 3赞 395
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 165,830评论 0赞 356
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,957评论 1赞 295
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,974评论 6赞 393
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,754评论 1赞 307
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,464评论 3赞 420
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 39,357评论 0赞 276
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,847评论 1赞 317
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,995评论 3赞 338
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,137评论 1赞 351
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,819评论 5赞 346
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 41,482评论 3赞 331
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,023评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,149评论 1赞 272
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 48,409评论 3赞 373
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 45,086评论 2赞 355

推荐阅读更多精彩内容