Fatal编程技术网
  • javascript/
  • 在两个div'之间自动切换；使用javascript进行编程

在两个div'之间自动切换；使用javascript进行编程

javascript css html

在两个div'之间自动切换；使用javascript进行编程,javascript,css,html,Javascript,Css,Html,好的，我希望这两个div每三秒钟切换一次。我的问题是：我应该如何在JavaScript中做到这一点？我想创建一个闪光灯效果。请忽略我代码中的小错误，我还没有完全完成 <!DOCTYPE html> <html> <head> <title>STROBE</title> <style> #strobe { animation-name: blinker; animation-duration: 0.2s;

好的，我希望这两个div每三秒钟切换一次。我的问题是：我应该如何在JavaScript中做到这一点？我想创建一个闪光灯效果。请忽略我代码中的小错误，我还没有完全完成

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>


选通
#选通{
动画名称：闪烁；
动画持续时间：0.2s；
动画计时功能：线性；
动画迭代次数：无限；
动画方向：交替；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
边框：1px纯蓝色；
-webkit动画名称：blinker；
-webkit动画持续时间：0.06s；
-webkit动画计时功能：线性；
-webkit动画迭代计数：无限；
-webkit动画方向：交替；
}
@-webkit关键帧闪烁器{
0%{背景色：绿色；}
25%{背景色：#5D96FF；}
50%{背景色：F0BE00；}
75%{背景色：#710595；}
100%{背景色：红色；}
}
@关键帧闪烁器{
0%{背景色：绿色；}
25%{背景色：#5D96FF；}
50%{背景色：F0BE00；}
75%{背景色：#710595；}
100%{背景色：红色；}
}
#baw{
动画名称：bw；
动画持续时间：1s；
动画计时功能：线性；
动画迭代次数：无限；
动画方向：交替；
宽度：100%；
身高：100%；
填充：0；
保证金：0；
边框：1px纯红；
-webkit动画名称：bw；
-webkit动画持续时间：0.06s；
-webkit动画计时功能：线性；
-webkit动画迭代计数：无限；
-webkit动画方向：交替；
}
@-webkit关键帧bw{
0%{背景色：黑色；}
100%{背景色：白色；}
}
@关键帧bw{
0%{背景色：黑色；}
100%{背景色：白色；}
}
您可以使用javascript计时（）

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
在函数中，可以定义每个div的可见性。例如：

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>

var visible = true;
setInterval(function(){
    document.getElementById('strobe').style.visibility = visible ? 'hidden' : 'visible'; // use short if/else to decide which value to user
    document.getElementById('baw').style.visibility    = visible ? 'visible' : 'hidden'; // short if/else is called ternairy
    visible = !visible; // reverse the value of itself
}, 3000);
我希望这有帮助

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
编辑：修改以获得javascript的可见性（不是jQuery）
Martijn编辑：用户ternairy可以大大缩短代码。

您想要这样的东西吗？：

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
它在JQuery中，但很容易转换成纯javascript。

您可以这样做；（）

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
你可以用一些简单的css和javascript来实现这一点，不需要所有的动画和隐藏/显示效果（你不想要的，这些都是密集型的）

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
只需切换一个类，看看下面的示例 HTML:

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>
风格：

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>

.basicStyling{
    width: 100%;
    height: 100%;
    background: #FFF;
    color: #000;
}
.reversedBasic{
    background: #000; /* if no change, use !important here */
    color: #FFF;
}
对于额外的积分，这个javascript会更好，因为您只保存了对元素的引用一次，这使得它更加轻量级。如果不这样做，每个X ms jQuery都会尝试查找元素（如果使用ID，这会很快，但这会更快：

<!DOCTYPE html>
<html>
<head>
<title>STROBE</title>
<style>
#strobe {
    animation-name: blinker;
    animation-duration: 0.2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid blue;

    -webkit-animation-name: blinker;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }
}

@keyframes blinker {  
    0% { background-color:green; }
    25% { background-color:#5D96FF; }
    50% { background-color:F0BE00; }
    75% { background-color:#710595; }
    100% { background-color:red; }


}

#baw {
    animation-name: bw;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    border: 1px solid red;

    -webkit-animation-name: bw;
    -webkit-animation-duration: 0.06s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;

}

@-webkit-keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}

@keyframes bw {  
    0% { background-color:black; }
    100% { background-color:white; }
}
</style>
</head>
    <body style="width:100%;height:1800px;">
        <div id="strobe"></div>
        <div id="baw";></div>
    </body>
</html>

var $strobediv = $('#strobeDiv'); // save the reference global, just once
setInterval(function(){ $strobediv .toggleClass('reversedBasic') }, 3000);
OP没有标记
jquery
，所以从技术上讲，他不想使用
jquery
，我想可能是。但我想知道，如果他不知道纯Javascript中简单的隐藏和搜索，他可能知道关于jquery的什么。另外，他正在学习如何以“少写，多做”的方式做这件事。这是我们不能评论的：）OP在这里，我两天前才开始编写代码，所以我想有很多基础知识我都不知道。无论如何，感谢您的回复：-）最好使用
样式。如果您希望它们位于同一位置，请使用none/block显示
<代码>可见性：隐藏
是隐藏的，但会占用空间