JavaScript魅力总结(17-20)

最新推荐文章于 2024-08-01 08:45:00 发布

. . . . .

最新推荐文章于 2024-08-01 08:45:00 发布

阅读量144

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/yexudengzhidao/article/details/89433198

版权

前端开发专栏收录该内容

344 篇文章 20 订阅

订阅专栏

JS运动基础

负数向上取整

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
	alert(Math.ceil(-9.8));  //-9			//向上取整
	alert(Math.floor(4.9999));	// 4			//向下取整
</script>
</head>

<body>
</body>
</html>

对于分享到三个字，height设为60px;line-height设为20px,则可以占满。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:150px; height:200px; background:green; position:absolute; left:-150px;}
#div1 span {position:absolute; width:20px; height:60px; line-height:20px; background:blue; right:-20px; top:70px;}
</style>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmouseover=function ()
	{
		startMove(0);
	};
	oDiv.onmouseout=function ()
	{
		startMove(-150);
	};
};

var timer=null;

function startMove(iTarget)
{
	var oDiv=document.getElementById('div1');
	
	clearInterval(timer);
	timer=setInterval(function (){
		var speed=0;
		
		if(oDiv.offsetLeft>iTarget)
		{
			speed=-10;
		}
		else
		{
			speed=10;
		}
		
		if(oDiv.offsetLeft==iTarget)
		{
			clearInterval(timer);
		}
		else
		{
			oDiv.style.left=oDiv.offsetLeft+speed+'px';
		}
	}, 30);
}
</script>
</head>

<body>
<div id="div1">
	<span>分享到</span>
</div>
</body>
</html>

正则

过滤HTML标签

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <script>
                window.onload=function ()
				{
					var oTxt1=document.getElementById('txt1');
					var oTxt2=document.getElementById('txt2');
					var oBtn=document.getElementById('btn1');
					
					oBtn.onclick=function ()
					{
						var re=/<[^<>]+>/g;
						
						oTxt2.value=oTxt1.value.replace(re, '');
					};
				};
            </script>
        </meta>
    </head>
    <body>
        <textarea cols="40" id="txt1" rows="10">
        </textarea>
        <br>
            <input id="btn1" type="button" value="转换"/>
            <br>
                <textarea cols="40" id="txt2" rows="10">
                </textarea>
            </br>
        </br>
    </body>
</html>