Question

我正在开始创建网页的旅程。我渴望尝试模仿Windows 10启动UI以及浏览器上的动画。但问题是我还不熟悉javascript。如果您不介意，请检查我的代码是否存在问题。谢谢。

HTML

CSS

<!DOCTYPE html>
<html>
<head>
    <title>WinCalc</title>
    <link rel="stylesheet" type="text/css" href="index.css">
    <script type="text/javascript" src="index.js"></script>
</head>
<body onload="slideShow()">
    <form method="POST" action="" autocomplete="off">
        <div id="holder">
            <div id="wrapper">
                <div id="savButtondesc">
                    <div id="savDesc"> Sum, Average & Max</div>
                    <div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
                </div>
                <input id="savButton" type="button" name="sav">


            </div>
        </div>
    </form>
</body>
</html>

的JavaScript

 @font-face {
    font-family: RobotoL;
    src:url(fonts/Roboto-Light.ttf);
}

body {
    overflow: hidden;
}
#holder {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    position: absolute;
    background-color: #34495e;
}
#wrapper {
    background-color: white;
    position: absolute;
    margin-top: 24%;
    margin-bottom: 25%;
    margin-right: 25%;
    margin-left: 25%;
    width: 50%;
    height: 50%;
}
#savButton {
    border-style: none;
    background-color: #3498db;
    position: relative;
    opacity: .1;
    height: 50%;
    width: 100%;
}
#savButtondesc {
    background-color: red;
    width: 100%;
    height: 50%;
    position: absolute;
}
#savDesc {
    width: 100;
    margin-top: 17%;
    margin-bottom: 20%;
    margin-right: 10%;
    margin-left: 10%;
    font-family: RobotoL;
    font-size: 30px;
    color: white;
    transition: 1s;
}
#savDesc1 {
    font-family: RobotoL;
    font-size: 15px;
    color: white;
    margin-left: 1%;
    margin-top: -50%;
    transition: 1s;
    opacity: 0;

}

Answer 1

使用slideShow（）;在您的javascript代码的末尾。

无论如何，我建议你使用http://unslider.com/作为jQuery插件。

Answer 2

嗨现在请检查此代码，以便在下一个++中定义错误的分号符号;和元素id是错误的js错误我已修复此问题现在检查此代码。

<!DOCTYPE html>
<html>
<head>
    <title>WinCalc</title>
  <style>

body {
    overflow: hidden;
}
#holder {
    width: 50%;
    height: 100%;
    margin-left: 25%;
    margin-right: 25%;
    position: absolute;
    background-color: #34495e;
}
#wrapper {
    background-color: white;
    position: absolute;
    margin-top: 24%;
    margin-bottom: 25%;
    margin-right: 25%;
    margin-left: 25%;
    width: 50%;
    height: 50%;
}
#savButton {
    border-style: none;
    background-color: #3498db;
    position: relative;
    opacity: .1;
    height: 50%;
    width: 100%;
}
#savButtondesc {
    background-color: red;
    width: 100%;
    height: 50%;
    position: absolute;
}
#savDesc {
    width: 100;
    margin-top: 17%;
    margin-bottom: 20%;
    margin-right: 10%;
    margin-left: 10%;
    font-family: RobotoL;
    font-size: 30px;
    color: white;
    transition: 1s;
}
#savDesc1 {
    font-family: RobotoL;
    font-size: 15px;
    color: white;
    margin-left: 1%;
    margin-top: -50%;
    transition: 1s;
    opacity: 0;

} 
 </style>
<script type="text/javascript" > 
function slideShow() {  
 var next = 0;
 setInterval( function show(){ 
    if (next == 0) {
        animate();
        next++;
    }
    else {
        reverse();
        next--;
    }
},1000);

}
function animate(){ 
    document.getElementById('savDesc').style.marginTop = "-2%";
    document.getElementById('savDesc1').style.marginTop = "25%";
    document.getElementById('savDesc1').style.opacity = "1";
    document.getElementById('savDesc').style.opacity = "0";
}
function reverse(){
    document.getElementById('savDesc').style.marginTop = "17%";
   // document.getElementById('samvDesc1').style.marginTop = "-55%";
    document.getElementById('savDesc1').style.opacity = "0";
    document.getElementById('savDesc').style.opacity = "1";
} 
</script>
</head>
<body onload="slideShow()">
    <form method="POST" action="" autocomplete="off">
        <div id="holder">
            <div id="wrapper">
                <div id="savButtondesc">
                    <div id="savDesc"> Sum, Average & Max</div>
                    <div id="savDesc1"> Display Sum, Average & Max of the number inputted.</div>
                </div>
                <input id="savButton" type="button" name="sav"> 

            </div>
        </div>
    </form>
</body>
</html>

Answer 3

对于slideShow（）中的setInterval函数，放置

if (ionic.Platform.isAndroid() && (imageData.indexOf("file://") === -1)) {
   image.src = "file://" + imageData
} else {
   image.src = imageData
}

或者

setInterval('animate()', 1000);

Div幻灯片（html，css，js）

3 个答案: