Fatal编程技术网

Javascript 背景色不褪色

javascript html css

Javascript 背景色不褪色,javascript,html,css,css-transitions,Javascript,Html,Css,Css Transitions,我为一位同学写了一个简短的剧本，我想我会展示一个漂亮的背景，然后褪色，让它看起来更好看。我可以实现颜色变化，但它不会从一个状态平稳过渡到下一个状态。我原以为这会奏效，但也许我错了或错过了什么 脚本中的所有其他内容都有效，因此，如果您愿意，请继续使用。它所做的只是导致屏幕停止，以便在执行任何其他操作之前可以显示错误或消息 模板： <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type"

我为一位同学写了一个简短的剧本，我想我会展示一个漂亮的背景，然后褪色，让它看起来更好看。我可以实现颜色变化，但它不会从一个状态平稳过渡到下一个状态。我原以为这会奏效，但也许我错了或错过了什么

脚本中的所有其他内容都有效，因此，如果您愿意，请继续使用。它所做的只是导致屏幕停止，以便在执行任何其他操作之前可以显示错误或消息

模板：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Message Expansion Demonstration</title>

<style>

body {  
        margin:0 auto;
        padding:0 0;
        height:100%;
        width:100%;
        text-align:center; }

#haltPage {
        display:none;
        position:absolute;
        height:100%;
        width:100%;
        top:0px;
        background-color:rgba(0, 0, 0, 0.0);
        transition: background-color 1s linear .1; 
        -webkit-transition: background-color 1s linear .1;
        -o-transition: background-color 1s linear .1;
            z-index=9999;
   }

.wrong {
        position:relative;
        padding:auto auto;
        margin:auto auto;
        height:250px;
        width:400px;
        background-color:#666;
        border-bottom-left-radius:0.5em 0.5em;
        border-bottom-right-radius:0.5em 0.5em;
        border-top-left-radius:0.5em 0.5em;
        border-top-right-radius:0.5em 0.5em;
        box-shadow:5px 10px 25px #000;  }

.wrong p {
        padding:10px;  }

</style>

<script>

function wrong ( classID ) 
{
    var on = 'block';
    var visable = 'rgba(0, 0, 0, 0.4)'; 

    clearClass ( );
    document.getElementById('haltPage').style.display = on;

    document.getElementById('haltPage').style.backgroundColor = visable;
    document.getElementById(classID).style.display = on; 
}

function clearClass ( ) 
{
    var off = 'none';
    document.getElementById('haltPage').style.display = off;
    document.getElementById('wrong1').style.display = off;
    document.getElementById('wrong2').style.display = off;
    document.getElementById('wrong3').style.display = off;
}

</script>

</head>

<body>

    <a href="#" onClick="wrong('wrong1')">Wrong Answer One</a><br><br>
    <a href="#" onClick="wrong('wrong2')">Wrong Answer Two</a><br><br>
    <a href="#" onClick="wrong('wrong3')">Wrong Answer Three</a><br><br>

<!-- This is not seen untill called -->
    <div id="haltPage">
    <br><br><br>
        <div id="wrong1" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wrong!<br><a href="#" onClick="clearClass();">Close</a></p>

        </div>

        <div id="wrong2" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wronger! < Not a word<br><a href="#" onClick="clearClass();">Close</a></p>

        </div>

        <div id="wrong3" class="wrong">

            <h1>Wrong!</h1>
            <p>You are wrongest! < duh<br><a href="#" onClick="clearClass()">Close</a></p>

        </div>     

    </div>

</body>

</html>


消息扩展演示
正文{
保证金：0自动；
填充：0；
身高：100%；
宽度：100%；
文本对齐：居中；}
#吊带{
显示：无；
位置：绝对位置；
身高：100%；
宽度：100%；
顶部：0px；
背景色：rgba（0,0,0,0.0）；
过渡：背景色1s线性。1；
-webkit过渡：背景色1s线性。1；
-o过渡：背景色1s线性。1；
z指数=9999；
}
.错了{
位置：相对位置；
填充：自动；
保证金：自动；
高度：250px；
宽度：400px；
背景色：#666；
边框左下半径：0.5em 0.5em；
边框右下半径：0.5em 0.5em；
边框左上半径：0.5em 0.5em；
边框右上角半径：0.5em 0.5em；
盒影：5px10px 25px#000；}
.错了{
填充：10px；}
功能错误（classID）
{
var on=‘block’；
var visable='rgba（0,0,0,0.4）'；
clearClass（）；
document.getElementById（'haltPage'）.style.display=on；
document.getElementById（'haltPage'）。style.backgroundColor=visable；
document.getElementById（classID）.style.display=on；
}
函数clearClass（）
{
var off=‘无’；
document.getElementById（'haltPage'）.style.display=off；
document.getElementById（'error1'）.style.display=off；
document.getElementById（'error2'）.style.display=off；
document.getElementById（'error3'）.style.display=off；
}













错了！
你错了

错了！
你错了一个字也没有

错了！
你错了duh
尝试在CSS对“#haltPage”的定义中的时间值后面添加一个“s”：

你的右翼没有意识到这一点。但这仍然不起作用。我想这可能是因为我正在更改相同的css元素。我将尝试封装itok，尝试封装为：活动状态是毫无意义的。我被指向下面的链接，它似乎有我正在寻找的解决方案。[1]: 
    transition: background-color 1s linear .1s; 
    -webkit-transition: background-color 1s linear .1s;
    -o-transition: background-color 1s linear .1s;