Javascript Can'；t在示例中添加这段jQuery代码

在代码中添加下面的jQuery代码有点困难。它基本上是在单词上加点。我尝试了下面的jQuery，当添加到click函数中时，它不起作用。但在点击功能之外，它仍然可以工作

我如何添加它，以便只单击按钮一次，步骤1就会显示以下点。10秒后，让它移动到第2步，再次执行与第1步相同的操作。直到我到达第5步，该步骤将显示已完成并停止闪烁

var dots = 0;
setInterval (type, 1000);

function type()
{
    if(dots < 5)
    {
        $('#dots').append('.');
        dots++;
    }
    else
    {
        $('#dots').html('');
        dots = 0;
    }
}

.test{
浮动：左；
}
#闪光{
填充：10px；
}
.内容{
字体大小：25px；
字体大小：粗体；
宽度：100px；
左：100px；
顶部：100px；
颜色：红色；
}
.类名{
-moz盒阴影：插入0px 1px 0px 0px#fceaca；
-网络工具包盒阴影：插入0px 1px 0px 0px#fceaca；
盒影：插入0px 1px 0px 0px#fceaca；
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#ffce79）、颜色停止（1，#eeaf41））；
背景：-莫兹线性梯度（中上，#ffce79 5%，#eeaf41 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffce79'，endColorstr='#eeaf41'）；
背景色：#ffce79；
-webkit边框左上半径：0px；
-左上角moz边界半径：0px；
边框左上半径：0px；
-webkit边框右上角半径：0px；
-moz边框半径右上角：0px；
边框右上角半径：0px；
-webkit边框右下半径：0px；
-moz边框半径右下角：0px；
边框右下半径：0px；
-webkit边框左下半径：0px；
-moz边框半径左下角：0px；
边框左下半径：0px；
文本缩进：0；
边框：1px实心#eeb44f；
显示：内联块；
颜色：#ffffff；
字体系列：Arial；
字体大小：15px；
字体大小：粗体；
字体风格：普通；
高度：40px；
线高：40px；
宽度：100px；
文字装饰：无；
文本对齐：居中；
文本阴影：1px 1px 0px#ce8e28；
}
.classname:悬停{
背景：-webkit渐变（线性、左上、左下、颜色停止（0.05，#eeaf41）、颜色停止（1，#ffce79））；
背景：-莫兹线性梯度（中上，#eeaf41 5%，#ffce79 100%）；
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#eeaf41'，endColorstr='#ffce79'）；
背景色：#eeaf41；
}
.classname:活动{
位置：相对位置；
顶部：1px；
}

开始

这对你有用吗

var dots = 0;
var step = 1;
var flag = false;

var $all = $('#all');
var $flash = $('#flash');
var $dots = $('#dots');

function type()
{
    if(dots < 5)
    {
        $dots.append('.');
        dots++;
        setTimeout(type, 1000);
    }
    else
    {
        $flash.html('Completed');
        $dots.html('');
        flag = true;
        dots = 0;
    }
}

function start() {

    $flash.html("STEP"+step);
    step++;

    function runIt() {
        $all.animate({opacity:'+=1'}, 400);
        $all.animate({opacity:'+=1'}, 200);

        if (flag){ 
            return flag = false;
        }
        $all.animate({opacity:'-=0.9'}, 600, runIt);
    }
    runIt();
    type();
}

$('#text').on('click', start);

var点=0；
var阶跃=1；
var标志=假；
var$all=$（“#all”）；
变量$flash=$（“#flash”）；
变量$dots=$（“#dots”）；
函数类型（）
{
如果（点<5）
{
$dots.append（'.'）；
dots++；
设置超时（类型，1000）；
}
其他的
{
$flash.html（'Completed'）；
$dots.html（“”）；
flag=true；
点=0；
}
}
函数start（）{
$flash.html（“步骤”+步骤）；
step++；
函数runIt（）{
$all.animate（{opacity:'+=1'}，400）；
$all.animate（{opacity:'+=1'}，200）；
如果（标志）{
返回标志=false；
}
$all.animate（{opacity:'-=0.9'}，600，runIt）；
}
runIt（）；
类型（）；
}
$（'#text'）。在（'click'，start'）；

我还对HTML和CSS做了一些更改。一切都在演示中：

---

您应该执行此位

设置间隔（类型，1000）在
中单击所需的事件。但是，调用
.html（“STEP1”）
会删除
#dots
元素……很抱歉，我的解释不好。我更新了链接，我希望它完全一样。唯一的区别是，我希望在第1步出现并开始闪烁时添加点，但相反。时间延迟和点适用于步骤1，而不是完全重构代码所需的开始。看看我编辑过的答案。好吧，看看你的代码，我注意到的只有两件事，“setTimeout（type，1000）；”我把点的速度放在你的上面，它会在点之后移动到完成。在显示“完成”之前，您将如何添加时间延迟？因此，点变为5，并重新开始从1点到5点的计数，直到满足时间延迟