使用javascript编写特效

最新推荐文章于 2024-10-05 14:17:56 发布

daisy_oo

最新推荐文章于 2024-10-05 14:17:56 发布

阅读量814

点赞数 2

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_27597973/article/details/52243193

版权

前端学习专栏收录该内容

26 篇文章 0 订阅

订阅专栏

动态时钟效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>动态时钟</title>
<style type="text/css">
#idClock {
	font-family: "微软雅黑";
	font-size: 24pt;
	color: #090;
}
</style>
</head>
<body οnlοad="showClock()">
<div id="idClock"></div>
<script type="text/javascript">
    function showClock(){
		var Digital=new Date()          //实例化一个新的日期对象
		var years=Digital.getFullYear();//获取年份
		var months=Digital.getMonth();  //获取月份
		var days=Digital.getDate();     //获取天数
		var hours=Digital.getHours();   //获取小时数
		var minutes=Digital.getMinutes();//获取分钟数
		var seconds=Digital.getSeconds();//获取秒数
		var dn="上午"                     //用来判定上午或下午的变量
		if(hours>12)                     //如果小时大于12表示下午
		   {dn="下午"
		    hours=hours-12;              //计算下午的时间
		}
		if(hours==0)                    //如果为0表示12点
		    hours=12;
		if(minutes<=9)                  //如果分钟小于10则加0字符
		   minutes="0"+minutes;
		if(seconds<=9)                  //如果秒小时10则加0字符
		   seconds="0"+seconds;	
		 //获取用于显示时钟的DIV元素
		var idclock=document.getElementById("idClock");
		//设置DIV元素的显示文本
		idclock.innerHTML=years+"年"+months+"月"+days+"日"+" "+hours+"时"+minutes+"分"+seconds+" 秒";
		//重复循环自身
		setTimeout("showClock()",1000)
	}
</script>
</body>
</html>

注意：先创建Date()对象再调用该对象的一下方法获取年月日时分秒来进行显示。

创建滚动字幕：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字滚动效果</title>
</head>
<body>
<marquee>这里是跑马灯文字</marquee><br />
<marquee direction=left>向左滚动的文本</marquee><br />
<marquee direction=right>向右滚动的文本</marquee><br />
<br />
<marquee behavior=scroll>滚动一圈又一圈</marquee><br />
<marquee behavior=slide>滚动一次就止住</marquee><br />
<marquee behavior=alternate>来回往返的进行滚动</marquee><br />
<br />
<marquee loop=5 width=50% behavior=scroll>循环5次</marquee>
<br />
<marquee scrollamount=50>快速移动的滚动文本</marquee>
<br />
<marquee scrolldelay=500 scrollamount=100>具有延时效果的滚动文本</marquee> 
<br />
<marquee   id="scrollarea"   direction="up"   scrolldelay="10"   scrollamount="1"   width="150"   height="80"   οnmοuseοver="this.stop();"   οnmοuseοut="this.start();">
------------------------------------------------------------------------------------------------------------------------------

</marquee>
</body>
</html>

HTML具有一个<marquee>标签，该标签可以实现文本内容的滚动显示。

direction属性：可选值有left和right及up，用来控制文字的滚动方向。

behavior属性：用来指定滚动的行为，默认值为scroll，指定会一圈一圈地滚动；slice仅仅滚动一次就停止；alternate会来回往返地滚动。

loop属性：指定循环的次数，默认设置时表示不限定次数。

scrollamount属性：用于控制滚动文本的速度。

scrolldelay属性：用于延时滚动的移动。

滚动公告栏：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>滚动广告栏</title>
<style type="text/css">
body,td,th {
	font-size: 9pt;
}
</style>
</head>
<body>
<!--创建滚动公告栏，向上滚动，鼠标经过时停止，鼠标移出时滚动-->
<marquee  id="scrollarea"   
          direction="up"   
          scrolldelay="10"  
          bgcolor="#66CC00"  
          scrollamount="1"  
          width="200"   
          height="100"   
          οnmοuseοver="this.stop();"   
          οnmοuseοut="this.start();">
<!--滚动的内容-->         
//写入滚动内容。
</marquee>
</body>
</html>

点击按钮打开全屏窗口：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>打开全屏窗口</title>
<script type="text/javascript">
<!--
function winopen(){
//所要打开的网址
var targeturl="http://www.baidu.com"
//打开一个新的窗口
newwin=window.open("","","scrollbars")
//检测如果浏览器支持
if (document.all || document.getElementById)  {
	newwin.moveTo(0,0);   //将窗口移动到左上角
	//调整屏幕大小为全屏显示
	newwin.resizeTo(screen.width,screen.height);
}
    newwin.location=targeturl;
}
//-->
</script>
</head>
<body>
  <!--单击该按钮将显示全屏窗口-->
  <input type="button" onClick="winopen()" value="百度网站" name="button">
</body>
</html>