BOM基础1-25 编程练习

最新推荐文章于 2022-05-26 10:00:40 发布

原创最新推荐文章于 2022-05-26 10:00:40 发布 · 798 阅读

1 ·

CC 4.0 BY-SA版权

cnblog博客：https://www.cnblogs.com/f6056/

Javascript 同时被 2 个专栏收录

57 篇文章

订阅专栏

基础案例

39 篇文章

订阅专栏

本文介绍了一个BOM编程练习，旨在实现“☆☆☆今日特卖☆☆☆”和“★★★今日特卖★★★”两个文本每0.5秒互相切换的动画效果。通过获取div元素，设置闪烁变量并利用定时器动态改变div内容来完成这一效果。

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

1-25 编程练习

补充代码，让页面内容实现“动画效果”，要求如下：

“☆☆☆今日特卖☆☆☆ ”和“★★★今日特卖★★★”这两个文本每0.5秒互相切换一次，具体效果参考gif效果图

第一步：先获取放置文本的div文本框对象，用变量进行接收

第二步：自定义一个变量，用来接收记录闪烁的值，初始值是0

第三步：设置定时器，每500毫秒执行一下定时器里面的脚本

第四步：定时器的脚本如下：

（1）当闪烁变量的值是0时，闪烁变量的值设置为1，div里面的内容设置为：'☆☆☆今日特卖☆☆☆'

（2）当闪烁变量的值是1时，闪烁变量的值设置为0，div里面的内容设置为：'★★★今日特卖★★★'

参考答案：

<!DOCTYPE html>
<html>

<head lang="zh-CN">
    <meta charset="UTF-8">
    <title>闪烁的文字</title>
    <style type="text/css">
        div {
            width: 200px;
            height: 200px;
            line-height: 200px;
            border: 2px solid gray;
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>
    <h3>会闪烁的文字</h3>
    <div id="text"> </div>
    <script type="text/javascript">
        //补充代码
        var oDiv=document.getElementById("text");
        var timeout1=null,flicker=0;
        oDiv.style.color="red";
        setInterval(function(){
            if(flicker==0){
                flicker=1;
                oDiv.innerHTML="☆☆☆今日特卖☆☆☆" ;
            }else{
                flicker=0;
                oDiv.innerHTML="★★★今日特卖★★★";
            }
        },500);

        
    </script>
</body>

</html>