分类归档:客户端

HTML页面内容禁止选择、复制、右键

<body leftmargin=0 topmargin=0  oncontextmenu=’return false’ ondragstart=’return false’ onselectstart =’return false’ onselect=’document.selection.empty()’ oncopy=’document.selection.empty()’ onbeforecopy=’return false’ onmouseup=’document.selection.empty()’>  


oncontextmenu='return false'
ondragstart='return false'
onselectstart ='return false'
onselect='document.selection.empty()'
oncopy='document.selection.empty()'
onbeforecopy='return false'
onmouseup='document.selection.empty()'

Css圆角边框

一、CSS3圆角的优点

传统的圆角生成方案,必须使用多张图片作为背景图案。CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,而且还有其他多个优点:

* 减少维护的工作量。图片文件的生成、更新、编写网页代码,这些工作都不再需要了。

* 提高网页性能。由于不必再发出多余的HTTP请求,网页的载入速度将变快。

* 增加视觉可靠性。某些情况下(网络拥堵、服务器出错、网速过慢等等),背景图片会下载失败,导致视觉效果不佳。CSS3就不会发生这种情况。

二、border-radius属性

read more

HTML5 地理位置定位(HTML5 Geolocation)原理及应用

地理位置(Geolocation)是 HTML5 的重要特性之一,提供了确定用户位置的功能,借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。

在访问位置信息前,浏览器都会询问用户是否共享其位置信息,以 Chrome 浏览器为例,如果您允许 Chrome 浏览器与网站共享您的位置,Chrome 浏览器会向 Google 位置服务发送本地网络信息,估计您所在的位置。然后,浏览器会与请求使用您位置的网站共享您的位置。

HTML5 Geolocation API 使用非常简单,基本调用方式如下:

if (navigator.geolocation) {
	navigator.geolocation.getCurrentPosition(locationSuccess, locationError, {
		// 指示浏览器获取高精度的位置,默认为false
		enableHighAcuracy: true,
		// 指定获取地理位置的超时时间,默认不限时,单位为毫秒
		timeout: 5000,
		// 最长有效期,在重复获取地理位置时,此参数指定多久再次获取位置。
		maximumAge: 3000
	});
} else {
	alert("Your browser does not support Geolocation!");
}

//locationError为获取位置信息失败的回调函数,可以根据错误类型提示信息:
locationError: function(error) {
	switch (error.code) {
	case error.TIMEOUT:
		showError("A timeout occured! Please try again!");
		break;
	case error.POSITION_UNAVAILABLE:
		showError('We can\'t
read more

Web 2.0元素字体、边框与背景配色(调色板)

.palette { clear:both;overflow:hidden; margin:0 auto; } .palette, .palette li { list-style: none; margin: 0; padding: 0; }.palette li { float:left; margin:2px; padding:2px; height: 40px; width: 120px; font-size: 12px; line-height: 20px; vertical-align: middle; overflow: hidden; word-wrap:break-word; padding-top: 5px; border:1px solid #666; color:#888; -moz-border-radius: 2px; /* Gecko browsers */ -webkit-border-radius: 2px; /* Webkit browsers */ border-radius:2px; /* W3C syntax */ }

  • background:#fffff7
    border:#ffcc00
  • background:#eff7ff
    border:#96c2f1
  • background:#f0fbeb
    border:#9bdf70
  • background:#f8ffe7
    border:#abdc8d
  • background:#f2fddb
    border:#adcd3c
  • background:#eefaff
    border:#bbe1f1
  • background:#fafcfd
    border:#d1f0f6
  • background:#e8f5fe
read more

利用 Console 来学习、调试JavaScript

一  什么是 Console

Console 是用于显示 JS和 DOM 对象信息的单独窗口。并且向 JS 中注入1个 console 对象,使用该对象 可以输出信息到 Console 窗口中。

二  什么浏览器支持 Console

很多人可能都知道 Chrome 和 FireFox(FireBug)中都支持 Console。而其他浏览器都支 持不好。比如 IE8 自带的开发工具虽然支持 Console,但功能比较单调,显示对象的时候都是显示 [Object,Object],而且不能点击查看对象里面的属性。IE6、IE7 虽然可以安装 Developer Toolbar,但也 不支持 console。Safari、Opera 都支持 Console,但使用上都没有 FireBug和 Chrome 的方便。 现在firebug推出了 firebuglite工具,可以让所有浏览器都支持Console功能,而且使用上和FireBug read more

javascript面对对象编程(class/object)三种方法

在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称”实例”)共有的属性和方法。
Javascript语言不支持”类”,但是可以用一些变通的方法,模拟出”类”。
一、构造函数法
这是经典方法,也是教科书必教的方法。它用构造函数模拟”类”,在其内部用this关键字指代实例对象。
function Cat() {
this.name = “大毛”;
}
生成实例的时候,使用new关键字。
var cat1 = new Cat();
alert(cat1.name); // 大毛
类的属性和方法,还可以定义在构造函数的prototype对象之上。
Cat.prototype.makeSound = function(){
alert(“喵喵喵”);
read more

Ckeditor 注册事件

<script type="text/javascript">
    CKEDITOR.instances["Content"].on("instanceReady", function () {  
        //set keyup event  
        this.document.on("keyup", AutoSave);  
        //and click event  
        this.document.on("click", AutoSave);  
        //and select event  
        this.document.on("select", AutoSave);  
    });  
    function AutoSave() {//相应的操作过程,可以按下面写,也可以按一般javascript过程写。  
        CKEDITOR.tools.setTimeout(function () {  
            alert("10101010");  
        }, 0);  
    }     
</script>


javascript中赋值运算符的取余等于“%=”

取余等于运算符 %=
解释 计算两个操作数相除的余数,并将余数赋给左操作数
代码演示 <html>
<head>
<script>
var _param; //定义变量
_param=6;//给变量赋值
_param %=4 ; //对变量进行加运算
document.write(“对变量进行%=4操作后,变量的值:” _param “。</br>”);
</script>
</head>
</html>

javascript中赋值运算符的除等于“/=”

除等于运算符 /=
解释 将两个操作数相除并将商赋给左操作数
代码演示 <html>
<head>
<script>
var _param; //定义变量
_param=6;//给变量赋值
_param /= 2 ; //对变量进行加运算
document.write(“对变量进行/=2操作后,变量的值:” _param “。</br>”);
</script>
</head>
</html>