浏览 "Javascript" 的文章

10月
12
2017

纯JS页面电子时钟

好久不写代码了，拼拼凑凑也就能做点小东西来玩了

js液晶电子时钟

适用于各种秒杀、抢票、投票神马的需要等待开始时间的页面，适合收藏在浏览器书签里，随用随点开。

代码有点丑，将就用吧哈哈

javascript:var timebox=document.createElement("div");timebox.id="timebox";timebox.style="width: 300px; height: 70px; color: #8e8e8e; background-color: #313131; text-align: center; position: fixed; line-height: 70px; left: 50px; top: 50px; z-index: 9999; font-family: 'LCDMono2'; font-size: 60px;border-radius: 7px;";document.body.appendChild(timebox);function checkTime(i){if(i&lt;10){i="0"+i}return i}function time(){clearTimeout(t);dt=new Date();var h=checkTime(dt.getHours());var m=checkTime(dt.getMinutes());var s=checkTime(dt.getSeconds());var spliter=(s%2==0)?":":" ";document.getElementById("timebox").innerHTML=h+":"+m+spliter+s;t=setTimeout(time,1000)}var t=null;t=setTimeout(time,1000);

用法，浏览器新建书签，标题随便，网址粘入上述代码即可：

js液晶电子时钟

此外，页面使用了等宽液晶字体，安装本地后才能出最佳效果：LCDM2U__

继续阅读»

作者为 moface Comments

暂无评论

5月
15
2014

Javascript

ZZ JavaScript中的原型和继承

请在此暂时忘记之前学到的面向对象的一切知识。这里只需要考虑赛车的情况。是的，就是赛车。

最近我正在观看 24 Hours of Le Mans ，这是法国流行的一项赛事。最快的车被称为 Le Mans 原型车。这些车虽然是由“奥迪”或“标致”这些厂商制造的，可它们并不是你在街上或速公路上所见到的那类汽车。它们是专为参加高速耐力赛事而制造出来的。

厂家投入巨额资金，用于研发、设计、制造这些原型车，而工程师们总是努力尝试将这项工程做到极致。他们在合金、生物燃料、制动技术、轮胎的化合物成分和安全特性上进行了各种实验。随着时间的推移，这些实验中的某些技术经过反复改进，随之进入到车辆的主流产品线中。你所驾驶车辆的某些技术，有可能是在赛车原型上第一次亮相的。

你也可以说，这些主流车辆继承了来自赛车的技术原型。

到现在，我们就有讨论 JavaScript 中的原型和继承问题的基础了。它虽然并不像你在 C++、Java 或 C# 中了解的经典继承模式一样，但这种方式同样强大，并且有可能会更加灵活。

有关对象和类

JavaScript 中全是对象，这指的是传统意义上的对象，也就是“一个包含了状态和行为的单一实体”。例如，JavaScript 中的数组是含有数个值，并且包含 push、reverse 和 pop 方法的对象。

var myArray = [1, 2];  
myArray.push(3);  
myArray.reverse();  
myArray.pop();  
var length = myArray.length;

现在问题是，push 这样的方法是从何而来的呢？我们前面提到的那些静态语言使用“类语法”来定义对象的结构，但是 JavaScript 是一个没有“类语法”的语言，无法用 Array“类”的语法来定义每个数组对象。而因为 JavaScript 是动态语言，我们可以在实际需要的情况下，将方法任意放置到对象上。例如下面的代码，就在二维空间中，定义了用来表示一个点的点对象，同时还定义了一个 add 方法。

var point = {  
    x : 10,
    y : 5,
    add: function(otherPoint) {
        this.x += otherPoint.x;
        this.y += otherPoint.y;
    }
};

但是上面的做法可扩展性并不好。我们需要确保每一个点对象都含有一个 add 方法，同时也希望所有点对象都共享同一个 add 方法的实现，而不是这个方法手工添加每一个点对象上。这就是原型发挥它作用的地方。（更多…）

继续阅读»

作者为 moface Comments

暂无评论

9月
6
2013

Javascript

ZZ 谈javascript变量声明

这篇文章还是对基础的复习，对面试经历的一个总结。

之前的面试中遇到过一道面试题

var a = 10;
(function () {
	console.log(a);
	var a = 20;
})()

短短5行代码log的结果是什么？
如果把var a = 20;和console.log(a)语句顺序对调呢？

这道题目的答案是undefined。不是10。

关键在于javascript的变量声明有一个hoisting机制，变量声明永远都会被提升至作用域的最顶端（注意测试还只是声明，还没有赋值）。其实上面的语句相当于：

var a = 10;
(function () {
	var a; //在这里对变量hoisting，先声明
	console.log(a);
	a = 20; //再赋值
})()

再精简一点:

bla = 2
var bla;

// 这是分割线，上下代码的效果其实是一样的

var bla;
bla = 2;

也就是先使用，再声明（注意是声明，还没有赋值），这样一来，声明和赋值就被分开来了。所以最佳实践都推荐最好在函数的顶端把需要使用的变量首先声明一遍。

（更多…）

继续阅读»

作者为 moface Comments

暂无评论

8月
13
2013

CSS // HTML/DHTML/HTML5 // Javascript

ZZ 解决在IE下label中IMG图片无法选中radio的几个方法

今天遇到一个问题，在IE浏览器下，使用label FOR radio后，label中的图片无法选中。例如，这样的代码 <input type=”radio” name=”radio” id=”a” /><label for=”a”><img src=”/Labs/images/logo.gif” /></label> ，这种情况下，点击label的图片将无法选中radio选项。解决这个问题，目前可以有三种方法，分别是通过JS、CSS或者HTML代码3个方面来解决。

方法一，JS：

 window.onload = function(){
 if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
 {
 var a = document.getElementsByTagName("label");
 for(var i=0,j=a.length;i<j;i++){
 if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
 {
 a[i].childNodes.item(0).forid = a[i].htmlFor;
 a[i].childNodes.item(0).onclick = function(){
 var e = document.getElementById(this.forid);
 switch(e.type){
 case "radio": e.checked|=1;break;
 case "checkbox": e.checked=!e.checked;break;
 case "text": case "password": case "textarea": e.focus(); break;
 } } } } } }

方法二，CSS：

在图片上覆盖一个容器，容器本身透明显示

 <input type="radio" name="radio" id="a" />
 <label for="a"><img src="xxx.jpg" /><span></span></label>

将其中SPAN的属性设定有底色并且透明，SPAN覆盖到IMG上，并保持和图片同样的尺寸。

 display:block;
 width:100px;
 height:100px;
 background:url(xxx.png) no-repeat 0 0;
 position:absolute;
 left:0;
 top:0;

方法三，THML代码控制：

在IMG中加一个属性，disabled 即可。

三种方法都是可行的解决方案，从实用方面，当然是第三种方法最简单，操作和实施起来最快，兼容性也好。问题是，以上仅仅是这种情况下的解决方法，如果从经验方面，三种方法都有自己的优势。

继续阅读»

作者为 moface Comments

暂无评论

5月
29
2012

Javascript // Web front-end

ZZ Document.Referrer丢失的几个原因

Referrer的重要性

HTTP请求中有一个referer的报文头，用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首页，那么就referrer就是www.sina.com.cn/sports/了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于Web Analytics来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索的关键词等，都是通过分析这个referrer信息来获取的。

但是，出于各种各样的原因，有时候Javascript中读到的referrer却是空字符串。下面总结一下哪些情况下会丢失referrer。

Referrer丢失的几个场景

修改Location对象进行页面导航

Location对象是一个用于页面导航的非常实用的对象。因为他允许你只变更Url的其中一部分。例如从cn域名切换到com域名，其他部分不变：

window.location.hostname = "example.com";

但是，通过修改Location进行页面导航的方法，会导致在IE下丢失Referrer。

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

window.open方式打开新窗口

示例：

<a href="#" onclick="window.open('http://www.google.com')">访问Google</a>

点击此链接会在新窗口打开Google网站，我们在地址栏中输入以下js代码就可以看到发送的referrer了。

javascript:alert(document.referrer)

测试结果：

IE5.5+ 下返回空字符串

Chrome3.0+，Firefox3.5，Opera9.6，Safari3.2.2均正常返回来源网页

如果是同个域名下通过此方式跳转的，那么我们可以通过访问windoww.opener对象去获取丢失的referrer信息。代码如下：

<script type="text/javascript">
    var referrer = document.referrer;
    if (!referrer) {
        try {
            if (window.opener) {
                // IE下如果跨域则抛出权限异常
                // Safari和Chrome下window.opener.location没有任何属性
                referrer = window.opener.location.href;
            }
        }
        catch (e) {}
    }
</script>

跨域的话则没辙了~

鼠标拖拽打开新窗口

鼠标拖拽是现在非常流行的用户习惯，很多浏览器都内置或者可以通过插件的方式来支持鼠标拖拽式浏览。但是通过这种方式打开的页面，基本全都丢失referrer。并且，这种情况下，也无法使用window.opener的方式去获取丢失的referrer了。

已测试：

Maxthon2.5.2，Firefox的FireGesture插件，Chrome3.0+，Opera9.6，Safari3.2。

点击Flash内部链接

点击Flash上到达另外一个网站的时候，Referrer的情况就比较杂乱了。

IE下，通过客户端Javascript的document.referrer读取到的值是空的，但是如果你使用流量监控软件看一下的话，你会发现，实际上HTTP请求中的Referer报文头却是有值的，这可能是IE实现的Bug。同时，这个值指向的是Flash文件的地址，而不是来源网页的地址。

Chrome4.0下点击Flash到达新窗口之后，Referrer也是指向的Flash文件的地址，而不是源网页的地址。

Chrome3.0和Safari3.2是一样的，都是会丢失Referrer信息。

Opera则和Firefox一样，Referrer的值都是来源网页的地址。

HTTPS跳转到HTTP

从HTTPS的网站跳转到HTTP的网站时，浏览器是不会发送referrer的。这个各大浏览器的行为是一样的。

例如，我们在HTTPS下使用Google Reader或是Gmail的时候，点击某个链接去到另外一个网站，那么从技术上来说，这样的访问和用户直接键入网址访问是没有什么分别的。

Referrer丢失对于广告流量监控的影响

Referrer如果丢失，Web Analytics就会丢掉很重要的一部分信息了，特别对于广告流量来说，就无法知道实际来源了。目前国内好多用了Google Adsense广告的网站，都使用了window.open的方式来打开广告链接，因此IE下会丢失Referrer，而我们知道，IE是目前市场份额最大的浏览器，因此其影响是很大的。很多流量统计工具会因此将这部分流量归入“直接流量”，和用户直接键入网址等价了。

对于这样的情况，需要让广告投放者在投放广告的时候，给着陆页面的Url加上特定的跟踪参数。

例如，某个Flash广告，点击之后到达的网址是http://www.example.com/，为了监控此流量是从哪个渠道过来的，我们可以修改此投放的着陆Url，改成http://www.example.com/?src=sina，类似这种方式，然后在着陆页面中使用Javascript代码提取此src参数，这样就可以得到广告来源信息。

在投放Google Adwords的时候，后台系统有一个“自动标记”的选项，当启用此选项的时候，Google在生成所有广告的着陆页面Url的时候，就会自动加上一个gclid的参数，这个参数能够将Google Analytics后台和Adwords广告后台的数据进行整合。这样就可以知道广告流量对应于哪个广告系列，哪个广告来源和广告关键词等信息了。和上面提到的思路其实是类似的。只不过Google自动帮你做了Url的修改了而已。