存档

‘网页前端’分类的存档

JavaScript混淆与加密

January 9th, 2011 17 条评论

JavaScript是一种广泛用于客户端Web开发的脚本语言,常用来给HTML网页添加动态功能,比如响应用户的各种操作等。其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

在一般情况下,我们可以通过读取javascript脚本文件,也可以加上格式化工具来辅助(有时,某些编译器会把javascript的变量名自动缩短,当然这对理解程序来说也没有太大难度。)查看,这样我们的代码是不是没有一点“隐私”呢?

我们可以使用对JavaScript脚本“压缩、混淆、加密”的方法,一方面提高数据在网络中的传输效率,另一方面也增强了代码的安全性。

(..More)

CSS white-space 使用技巧

November 25th, 2010 36 条评论

HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。在默认情况下,HTML 源码中的空白符均被显示为空格,并且连续的多个空白符会被合并为一个。

有些时候,我们希望 HTML 源码中的多个连续空格在网页浏览器中可以真实地呈现,或者需要源码中的换行符能起到真正的换行作用。于是,我们发现了 <pre> 标签,它可以真实还原它内部文本的空白符的真实情况。

随着对 CSS 的了解不断深入,我们发现,原来这一切都是 white-space 属性在安排。<pre> 元素之所以如此神奇,是因为它自身具有 {white-space: pre;} 这一默认样式。

下表列出了white-space 这一CSS属性可能取的值:

white-space 属性值一览表

属性值 空白符 换行符 自动换行 最早出现于
normal 合并 忽略 允许 CSS 1
nowrap 合并 忽略 不允许 CSS 1
pre 保留 保留 不允许 CSS 1
pre-wrap 保留 保留 允许 CSS 2.1
pre-line 合并 保留 允许 CSS 2.1
inherit 继承父元素 继承父元素 继承父元素

(..More)

使用jQuery Ajax获取用户地址信息和User Agent

September 25th, 2010 59 条评论

jQuery 是一个JavaScript 库,它有助于简化 JavaScript 以及 Asynchronous JavaScript + XML (Ajax) 编程。与类似的 JavaScript 库不同,jQuery 具有独特的基本原理,可以简洁地表示常见的复杂代码。

jQuery由John Resig创建,它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。

jQuery 能帮助您保证代码简洁易读。您再也不必编写大堆重复的循环代码和 DOM 脚本库调用了。使用 jQuery,您可以把握问题的要点,并使用尽可能最少的代码实现您想要的功能。毫无疑问,jQuery 的原理是独一无二的:它的目的就是保证代码简洁并可重用。

使用jquery的ajax,我们可以轻松的从特定网页获取所需的信息,并进行相应的处理。

下面的是一个简单示例,我们从这个网页上获取到您的地址信息和用户代理。

<!DOCTYPE html>
<html> 
<head>
<title>Jquery Ajax 获取UA信息</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
</head>
<body> 
<div id="uainfo" style="display:none;"></div> 
<span id="info"></span>
<script type="text/javascript">
$(document).ready(function(){ $("#uainfo").load('http://ip.tangblog.info/uaimg');
$("#uainfo").ajaxStop(function(){ var addr = $("#uainfo #Addrinfo").text();var info = $("#uainfo #UAinfo").html(); $("#info").html('您好,您来自'+addr+',您使用的是'+info+'系统!'); }) })
</script>
</body> 
</html>

(..More)

IE报“缺少标识符 字符串或数字”错误的原因及解决办法

March 12th, 2010 1 条评论

今天我在修改网页代码时,遇到了一个问题,IE报告JS“缺少标识符 字符串或数字”错误 ,通过在网上搜索,现在终于解决了问题 。

问题是出现在我的一个页面在Firefox中运行正常,而在IE中老是报“缺少标识符 字符串或数字”的错误,不知道是什么问题,只好先在Firefox中调试啦。但是页面做完后还是要去面对这个毫无头绪的问题。      

网上搜了一把,果然不少人遇到过这个问题,原因就是:JSON最后的一项末尾多了一个逗号。在IE中,JSON最后一项的末尾是不允许有逗号的,在FF等浏览器下则可有可无。这个问题果然够典型,虽然很简单,还是记录一下,以防以后遇到这种错误再次无从下手。解决方法其实不用说了,最后的那个逗号干掉即可。

html颜色代码表

October 23rd, 2009 0 条评论
#000000#000033#000066#000099#0000cc#0000ff
#003300#003333#003366#003399#0033cc#0033ff
#006600#006633#006666#006699#0066cc#0066ff
#009900#009933#009966#009999#0099cc#0099ff
#00cc00#00cc33#00cc66#00cc99#00cccc#00ccff
#00ff00#00ff33#00ff66#00ff99#00ffcc#00ffff
#330000#330033#330066#330099#3300cc#3300ff
#333300#333333#333366#333399#3333cc#3333ff
#336600#336633#336666#336699#3366cc#3366ff
#339900#339933#339966#339999#3399cc#3399ff
#33cc00#33cc33#33cc66#33cc99#33cccc#33ccff
#33ff00#33ff33#33ff66#33ff99#33ffcc#33ffff
#660000#660033#660066#660099#6600cc#6600ff
#663300#663333#663366#663399#6633cc#6633ff
#666600#666633#666666#666699#6666cc#6666ff
#669900#669933#669966#669999#6699cc#6699ff
#66cc00#66cc33#66cc66#66cc99#66cccc#66ccff
#66ff00#66ff33#66ff66#66ff99#66ffcc#66ffff
#990000#990033#990066#990099#9900cc#9900ff
#993300#993333#993366#993399#9933cc#9933ff
#996600#996633#996666#996699#9966cc#9966ff
#999900#999933#999966#999999#9999cc#9999ff
#99cc00#99cc33#99cc66#99cc99#99cccc#99ccff
#99ff00#99ff33#99ff66#99ff99#99ffcc#99ffff
#cc0000#cc0033#cc0066#cc0099#cc00cc#cc00ff
#cc3300#cc3333#cc3366#cc3399#cc33cc#cc33ff
#cc6600#cc6633#cc6666#cc6699#cc66cc#cc66ff
#cc9900#cc9933#cc9966#cc9999#cc99cc#cc99ff
#cccc00#cccc33#cccc66#cccc99#cccccc#ccccff
#ccff00#ccff33#ccff66#ccff99#ccffcc#ccffff
#ff0000#ff0033#ff0066#ff0099#ff00cc#ff00ff
#ff3300#ff3333#ff3366#ff3399#ff33cc#ff33ff
#ff6600#ff6633#ff6666#ff6699#ff66cc#ff66ff
#ff9900#ff9933#ff9966#ff9999#ff99cc#ff99ff
#ffcc00#ffcc33#ffcc66#ffcc99#ffcccc#ffccff
#ffff00#ffff33#ffff66#ffff99#ffffcc#ffffff

CSS页面切换效果资料

October 13th, 2009 2 条评论

<META http-equiv="Page-Enter" CONTENT="RevealTrans(Duration=4,Transition=n)">
其中,n表示的就是下面的数,n取不同的值,对应有不同的效果

0、Box in
1、Box out
2、Circle in
3、Circle out
4、Wipe up

(..More)

利用正则表达式限制文本框输入字符

September 20th, 2009 3 条评论

1.文本框只能输入数字代码(小数点也不能输入)
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">

2.只能输入数字,能输小数点.
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">

3.数字和小数点方法二
<input type=text t_value="" o_value="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.t_value=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.o_value=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.o_value=this.value}">

4.只能输入字母和汉字
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">

5.只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">

6.只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">

7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">

8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">

网页获取IP地址

September 20th, 2009 6 条评论

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS获取客户端IP </title>
</head>

<body>
<script type="text/javascript" language="javascript">
<!--
function GetLocalIPAddress()
{
    var obj = null;
    var rslt = "";
    try
    {
        obj = new ActiveXObject("rcbdyctl.Setting");
        rslt = obj.GetIPAddress;
        obj = null;
    }
    catch(e)
    {
        //异常发生
    }
   
    return rslt;
}

document.write("你的IP是:" + GetLocalIPAddress());
//-->

</script>
</body>

</html>

jQuery选择符-总结

September 19th, 2009 1 条评论

CSS选择符,如:
$('#title1 > li')为取得ID为title1(#title)的子元素(>)中所有的列表项(li)。
$('#title1 li:not(.class1)')为取得ID为title的后代元素中没有(not)class1类的所有列表项。
jQuery库支持XPath选择符。如:
$('a[@title]')为取得所有带title属性的链接。

(..More)

用CSS的float属性创建三栏布局网页的方法

September 18th, 2009 0 条评论

三栏布局是最常见的网页布局,主要页内容放在中间一栏,边上的两栏放置导航链接之类的内容。基本布局一般是标题之下放置三栏,三栏占据整个页面的宽度,最后在页的底端放置页脚,页脚也占据整个页面宽度。本文介绍一种用CSS的float和clear属性来获得三栏布局的方法。 绝大多数网页设计者都熟悉传统的网页设计技术,用这些技术可以生成带有表格、创建固定宽度布局或者“液态”(它可以根据用户浏览器窗口宽度自动伸缩)布局的网页。

(..More)

用css实现网页下拉菜单

September 18th, 2009 0 条评论

这款下拉菜单栏的实现非常简单,没有用到复杂的JS代码,完全依靠css代码来实现的,只需进行简单的修改变换就可以了,以下是代码实例:

html代码:

(..More)

看看GOOGLE的关键词工具

September 8th, 2009 0 条评论
这是一款GOOGLE提供的关键词工具, 可以方便选择国家和语言,而且符合GOOGLE对站长的要求。同时显示相关关键词的上月流量和以前12个月平均流量

(..More)

为博客首页摘要添加小图片

September 6th, 2009 15 条评论
理论上要是熟悉HTML代码的话,也能添加一些链接或者别的什么。不过本着摘要的原则,建议也不要太花哨啦!





总结下流程:写好博客→拉到最下面→其他选项→摘要→拷贝粘贴以下基本代码→改成自己需要的内容


大体就是这样了,附上代码供大家拷贝:




(..More)

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks

September 5th, 2009 0 条评论
可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks: .test{ color:/*\**/#00f\9; /* IE8 */ } .test, .test:-moz-any-link{ color:#f60; /* Firefox2 */ } .test, .test:default{ color:#000; /* Firefox3 */ *color:#f00; /* IE7 */ _color:#0f0; /* IE6 */ }

(..More)

如何快速搭建一个自己的网站

September 2nd, 2009 1 条评论

如今是一个互联网告诉发展的时代,很多朋友感受到了自己想要为自己公司或者自己搭建一个网站,好提升公司形象,并通过网络宣传自己。找到我,问我,做网站是怎么一回事,网站建设需要哪些步骤? 这个问题,很多做过网站建设的人看来虽然非常简单,但是在让我的外行朋友们明白做网站是怎么一回事,我费了不少力,为了让其它朋友也了解网站是怎么一回事,云在天边特意写个说明,有兴趣的朋友可以参考参考。

(..More)

做一个最简单网站SEO秘诀 - 站内优化!

September 2nd, 2009 0 条评论
1、确定三个主要关键词,这三个关键词在google或百度每日的搜索量要在200-400。把他们放在首页的标题上。 2、准备与这三个关键词相关的内容600-1000个,按规划在3个月内发完。 3、每个页面的内容中如果出现以上三个关键词,都给上链接,并指向首页。一个页面只要一次即可。 4、每个内容页面,如果出现其他页面的关键词,也打上链接并指向那个关键词所在的页面。 第三个月之后,等着丰收吧。 本文作者云在天边

(..More)

网站SEO能做与不能做的三件事

September 2nd, 2009 0 条评论
SEO能做到的三件事 我们先从正面看,再讨论负面。先谈谈搜索引擎优化的优点,它们是如何帮你增长网上业务的。以下是SEO程序能为你做到的三件事。 1. 提高你网站在搜索引擎里的排名 提高关键字是与公司产品或服务相关的网站搜索引擎排名,是搜索引擎优化最基本的目标。一个全面的SEO程序,是围绕着联网、创建链接、博客及内容开发设计的程序。好的搜索引擎排名为SEO的下一个项目铺平了道路。

(..More)

网站SEO增加文字与HTML代码的比例

September 2nd, 2009 0 条评论
从网站建设的角度,即设计师的角度来说说如何SEO一个网站的文字和HTML代码比。云在天边来讨论一下网站SEO增加文字与HTML代码的比例。 其实对于搜索引擎来说,最友好的,当属文字了,虽然现在图片的抓取不断在改进,但是任何一位有经验的老手都会告诉你,SEO,文字最合适。也正因为此,比方说云在天边博客里,图虽有,但仍是文字居多。

(..More)

管理网站中最能帮您赚钱的11个词语

September 2nd, 2009 0 条评论
有效的广告营销传播,不仅要引起更多的关注,还要引起更多的参与,以下一些方法,能有效提高您广告的参与度,让您的广告帮你赚钱! 1、免费———不管是“免费赠送”、“免费品尝”等,只要广告文案中出现免费一词,这种产品一般都非常受欢迎。麦当劳咖啡的免费续杯就抢了不少KFC的顾客。

(..More)

网站之网文发布技术解释

September 1st, 2009 0 条评论

要想友好的流量,我们个人的博客就需要有大量的原创文章来吸引读者。有质量的网站需要原创,但是原创需要消耗大量的时间和精力,成本高。事实上,你能想到的90%,世界上都已经有了,你需要的是拿过来,重新组织一下展现给阅读者。云在天边的博客就需要更大的改进。

(..More)