Saber 酱的抱枕

Fly me to the moon

05/4
2015
学习

js中使用outerHTML改变标签本身的内容

<img src="http://g.hiphotos.baidu.com/zhidao/pic/item/a8014c086e061d951c280b097af40ad162d9ca90.jpg" alt="" title="点击加载视频" onclick="this.outerHTML='<embed height=\'500\' width=\'900\' quality=\'high\' allowfullscreen=\'true\' type=\'application/x-shockwave-flash\' src=\'http://share.acg.tv/flash.swf\' flashvars=\'aid=2114565&amp;page=1\' pluginspage=\'http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\'></embed>'">

我发现引用B站的视频时,视频会自动加载,而不是像优酷土豆那样点击之后才开始加载。为了解决这个问题,我先用一张图片代替视频,当点击图片的时候再加载播放器。这里面用到了outerHTML这个属性,它可以改变标签本身的html代码。上例中,图片点击后,整个img标签的html代码都变成了引用播放器的代码了,图片这个元素已经不存在了。
需要注意的是,写在js中的html需要转换成js格式。另外由于oncilck后是用双引号包含js代码,所以要用单引号包含html代码。

js中使用outerHTML改变标签本身的内容

05/3
2015
学习

js判断某元素是否存在

	var divA=document.getElementById("a");
	if (!!divA) {
		alert("存在此元素")
	}else{
		alert("此元素不存在!")
	};

非常简单,先获取这个元素,然后进行判断。我以前以为获取一个不存在的元素就会报错,原来把这个元素保存到变量里的时候,即使该元素不存在,也不会报错。如果是在语句的执行中需要对此元素进行操作,这时候找不到才会报错。
if条件里加了两个!!,其实不加也可以,加了的话在语法上更严谨,因为这两个感叹号的作用是把该变量转换为布尔值。

js判断某元素是否存在

04/24
2015
学习

js中获取元素的位置

JavaScript中有获取HTML元素位置的属性:
HTMLElement.offsetLeft
HTMLElement.offsetHeight
但是,这两个属性所储存的数值并不是该元素相对整个浏览器画布的绝对位置,而是相对于其父元素位置的相对位置,也就是说这两个数值得到的是以其父元素左上角为(0,0)点从而计算出的数值。我们可以用以下函数获得元素在页面中的绝对位置:

//获取元素的纵坐标 
function getTop(e){ 
var offset=e.offsetTop; 
if(e.offsetParent!=null) offset+=getTop(e.offsetParent); 
return offset; 
} 
//获取元素的横坐标 
function getLeft(e){ 
var offset=e.offsetLeft; 
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); 
return offset; 
} 

其原理是判断元素有父元素的话,将父元素位置的数值加起来,实现过程就是if语句后调用函数自身的那句代码。这样最终就可以得到元素距离页面顶部的绝对位置。

js中获取元素的位置

04/24
2015
学习

使用js制作一个返回顶部按钮

使用js制作了一个返回顶部按钮,使用了获取网页可视高度的方法,代码如下:

<div id="goTop">TOP</div>
<style type="text/css">
body{height: 3000px;}
	#goTop{width: 50px;height: 50px;right: 12%;bottom: 5%;position: fixed;display: none;background: #05E28E;text-align: center;line-height: 50px;color: #fff;border-radius: 10px;cursor: pointer;}
</style>
<script type="text/javascript">
	var topButton=document.getElementById("goTop");
	window.onscroll=function  () {
		var scrollH=document.documentElement.scrollTop || document.body.scrollTop;
		if (scrollH>0) {
			topButton.style.display="block";
		}else{
			topButton.style.display="none";
		};
	}
	topButton.onclick=function(){
		document.body.scrollTop=0;
		document.documentElement.scrollTop=0;
	}
</script>

使用js制作一个返回顶部按钮

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制作滚动的网页标题