Saber 酱的抱枕

Fly me to the moon

04/24
2015
学习

JS 获取浏览器、屏幕和可视区域宽高

我们在Web 网页开发过程中,很多情况需要进行一些页面宽度和高度的计算,然而得到一些准确的值。例如页面的可视区域的宽度、可视区域的高度、屏幕的宽度、屏幕的高度等等。下面列举一些比较常用的宽度和高度的获取方法。

屏幕分辨率的宽:window.screen.width
屏幕分辨率的高:window.screen.height

屏幕可用工作区宽度:window.screen.availWidth
屏幕可用工作区高度:window.screen.availHeight

浏览器窗口可用高度:window.innerHeight
浏览器窗口可用宽度:window.innerWidth (包括滚动条的宽度)

jq获取浏览器窗口可用高度:$(window).height() (不包括滚动条)
jq获取浏览器窗口可用宽度:$(window).width() (不包括滚动条)

整个网页的宽度:document.body.scrollWidth
整个网页的高度:document.body.scrollHeight

网页被卷去的高:window.screenTop
网页被卷去的宽:window.screenLeft

元素被卷去的高:scrollTop
元素被卷去的宽:scrollLeft

元素可见区域宽:clientWidth
元素可见区域高:clientHeight

元素可见区域宽:offsetWidth (包括边线的宽)
元素可见区域高:offsetHeight (包括边线的宽)

元素距父元素顶部的距离:offsetTop
元素距父元素左侧的距离:offsetLeft

JS 获取浏览器、屏幕和可视区域宽高

04/23
2015
学习

js制作的简单的计算器


查看demo
不支持括号;
运算完成之后点击等号清零,点击运算符可以直接使用结果累计运算,点击数字和小数点会开始新的运算。
加限制规则加的焦头烂额,退格键在某些特殊情况下可能不生效,不过一般使用没问题。
对于输入的字符串如何转变为算术表达式我自己没能搞定,最后用了eval()函数直接运算的。这点是个遗憾,要是能解决的话我就大满足了。

js制作的简单的计算器

04/22
2015
学习

js作为命名空间的函数

在js中,在函数内声明的变量是局部变量,所以函数内的变量不会污染到全局命名空间。下面的例子就是使用一个匿名函数来作为临时的命名空间:

    <script type="text/javascript">
        var a='saber';
        (function  () {//定义一个匿名函数
            var a=16;alert(a);//代码块
        }())//立即执行这个函数
        alert(a);
	</script>

这两个名为a的变量是互不影响的。
注意:在函数内定义的变量必须加上var来定义,否则,这个变量将是一个全局变量!
最外层的括号是为了让javascript解释器认出这是一个函数表达式,函数之后的空括号是立即执行这个函数。
查看详解

js作为命名空间的函数

04/20
2015
学习

使用js制作滚动的网页标题

虽然我对滚动标题一直很反感(有种你来个彩色+闪烁标题啊→_→),但是今天既然想到这个了,就顺手鼓捣出来了。点进本文页面,你会发现标题确实已经Duang的加上了特技。

	<script type="text/javascript">
		var titleText="反派死于话多,正派死于不补刀";
		document.title=titleText;
		var start=0;
		var end=start+9;
		var setTitle;
		var zanting=false;
    	function titleChange () {
    		document.title=titleText.substring(start, end)+'…';
    		start++;
			end++;
			if (end>titleText.length) {
    			start=0;
    			end=start+9;
    		}
    	}
    	setTitle=setInterval(titleChange, 400);
	</script>

思路:
先确定要把标题固定到多少个字符,此例中是9个字符,始终保持截取的开始位置和结束位置相差9。
代码的执行:
1.设置title
2.输出标题之后,开始位置和结束位置都自增
3.末端到达了结尾之后,重新开始

注意:
一个汉字是一个长度;一个字母也是一个长度。标题应该选取多长视情况更改。
加上省略号可以提示用户还没滚动完,也可以使用户不必一直盯着最后的位置看,减少焦虑(至少对我自己是这样的Orz
调整到合适的滚动速度。春度太高也不好哦。

使用js制作滚动的网页标题

04/20
2015
其他

js中使用prototype创建方法

prototype 属性不仅可以定义构造函数的属性和方法,还可以为本地对象添加属性和方法。它可以创建新方法,也可以重定义已有方法。例如:
var aColors=new Array("red","green","blue");
Array.prototype.findIndex=function (o) {
for (var i = 0; i < this.length; i++) { if(this[i]==o){ alert(o+'在本数组中的位置是'+i); return true; } } alert('在数组中没有'+o+'这个值!'); } aColors.findIndex('red'); aColors.findIndex('yellow');[/code] 查看w3c页面:ECMAScript 修改对象

js中使用prototype创建方法

04/20
2015
学习

javascript创建对象

我们要创建两个“人”的对象,并且设置每个人的属性。

<table border="1">
	<tr>
		<td>名字</td>
		<td>性别</td>
		<td>年龄</td>
		<td>喜欢</td>
		<td>身高</td>
	</tr>
	<script type="text/javascript">
		function creatMan (名字,性别,年龄,喜欢) {
			this.名字=名字;
			this.性别=性别;
			this.年龄=年龄;
			this.喜欢=喜欢;
		}
		var Saber=new creatMan('Saber','女',154,'士狼');
		var Illya=new creatMan('Illya','女',150,'士狼');

		creatMan.prototype.height = function  (height) {
			this.height=height+'cm';
		}
		Saber.height(154);
		Illya.height(150);

		document.write('<tr>')
			for(attr in Saber){
				document.write('<td>'+ Saber[attr] +'</td>')
			}
		document.write('</tr>')
		document.write('<tr>')
			for(attr in Illya){
				document.write('<td>'+ Illya[attr] +'</td>')
			}
		document.write('</tr>')
	</script>
</table>

输出如下:
js创建对象
这种创建对象的方式在w3c里称为“混合的构造函数/原型方式”,使用构造函数来完成对象的创建,并在函数中使用this来设置对象的属性,this指代当前对象。
身高这块是使用prototype追加了一个方法,在这个方法里设置了身高属性。一旦对构造函数使用prototype追加属性,则每个由该函数创建的对象也都有了该属性,即使未赋值。如果未赋值,则追加值为等号右边内容(如果右边是函数,即是函数的源代码)。
不需要对此构造函数产生的每个对象都追加属性时,用普通方法为单个对象赋值就可以了:

Saber.height='154cm';

查看w3c页面:ECMAScript 定义类或对象

javascript创建对象

04/20
2015
学习

js中break和continue结合标签语句使用

在js里的循环语句中,break可以结束循环,continue可以跳过符合条件的本次循环。在有多重循环时,内部循环的break和continue可以结合标签语句来影响外部循环的执行。

var num=0;
cc:
for (var i = 10; i > 0; i--) {
	for (var j = 10; j > 0; j--) {
		if (i==5&amp;&amp;j==5) {
			break cc;
		};
		num++;	
	};
};
alert(num);//num是55

当满足i==5且j==5时,不仅结束了内部这个循环,还结束了标签为cc的外部循环。如果将break换成continue,num将会是95,因为这一次跳过循环跳过了外部的循环。

js中break和continue结合标签语句使用