一些关于JS特效的例子

最新推荐文章于 2020-08-26 22:14:13 发布

zhouleiaccp

最新推荐文章于 2020-08-26 22:14:13 发布

阅读量909

点赞数

CC 4.0 BY-SA版权

文章标签： javascript function object 日历 date 娱乐

本文链接：https://blog.youkuaiyun.com/zhouleiaccp/article/details/7493960

本文介绍了几种常用的网页JavaScript特效，包括设为首页和加入收藏的功能实现、制作滚动文字、层的显示与隐藏控制及时间日期的动态展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近很多学生在做网页时经常问一些关于JAVASCRIPT的特效，因为觉得这些JS特效在网页中可以起到很好的效果，所以总结了以下在网页中经常使用的JS特效，希望对有兴趣的朋友有所帮助。

1.设为首页和加入收藏

我们在浏览网页的时候，经常会碰到一些自己感兴趣和喜欢的网页，我们希望把他们设为首页或加以收藏，那么，怎么解决这个问题了，其实也很简单，以下代码即可实现设为首页和加入收藏功能

this.setHomePage后的内容即可把喜欢的网页设为首页

window.external.AddFavorite加以收藏

2.制作滚动特效

制作滚动特效非常简单，我们只需要加入MARQUEE标签即可

<MARQUEE direction="left" scrolldelay="100"
onmouseover="this.stop()" onMouseOut="this.start()">本站提供最新精选的免费

</marquee>

其中direction设置方向，onmouseover和onMouseOut设置鼠标移动到滚动文字上的效果

3.层得显示和隐藏

关于层的显示和隐藏问题，这个在网页特效中非常实用，也是用的非常的多的特效，在层的显示和以藏方面，最关键的是document.getElementById(" ")的使用，display的属性来控制层所代表的内容的显示和隐藏

function showDiv()

    {
       var object = document.getElementById("right").style.display;
      if(object=="block")

      {
             document.getElementById("word").innerText="注册前请先阅读会员权益和义务";
             document.getElementById("right").style.display="none";
       }

else

      {
         document.getElementById("word").innerText="点击关闭";
         document.getElementById("right").style.display="block";}
      }

通过document.getElementById得到ID所代表的内容，对其进行控制，同事也可以改变层得内容，即通过nnerText属性

4.日历特效

我们经常在网页中添加时间特效，之力我们需要使用时间类

      function showtime()
{
today=new Date();
var year=today.getYear();
var month=today.getMonth()+1;
var day=today.getDate();
var week=today.getDay();
switch(week)
   {
     case 0:week="星期天";
     break;
     case 1:week="星期一";
     break;
     case 2:week="星期二";
     break;
     case 3:week="星期三";
     break;
     case 4:week="星期四";
     break;
     case 5:week="星期五";
     break;
     case 6:week="星期六";
     break;
   }
var hours = today.getHours();
var minutes = today.getMinutes();
var seconds = today.getSeconds();
var timeValue= hours+"时"+minutes+"分"+seconds+"秒";
var timetext=year+"-"+month+"-"+day+"-"+week+" "+timeValue;
document.getElementById("liveclock").innerText = timetext;
setTimeout("showtime()",1000);
}