展示 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>COVID-19 Group 2</title>
        <!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
        <link rel="stylesheet" href="ai/css/style.css">
        <script src="https://kit.fontawesome.com/3e4793b34d.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="bg"></div>
        <img id="logo1" src="ai/image/xiaohui.png"></img>
        <img id="logo2" src="ai/image/xiaohui2.jpg"></img>
        <script type="text/javascript">
            //定义一个存放照片位置的数组，可以放任意个，在这里放3个
            var bgImgArr = new Array();
            bgImgArr[0] = "ai/image/virus.jpg";
            bgImgArr[1] = "ai/image/covid.jpg";
            bgImgArr[2] = "ai/image/littleguy.jpg";

            var bgNum, bgDiv = document.getElementById("bg");
            setBGimg();

            function setBGimg(d) {
                if (!bgNum || bgNum >= bgImgArr.length) bgNum = 0;
                bgDiv.style.opacity = .001;
                setTimeout(function() {
                    bgDiv.style.backgroundImage = 'url(' + bgImgArr[bgNum] + ')';
                    bgNum++;
                    bgDiv.style.opacity = 1;
                }, 1000);
                if (typeof d == 'undefined')
                    setInterval(function() {
                        setBGimg(true);
                    }, 6000);
                // 上一行的 6000 是背景图片自动切换时间(单位 毫秒)
            }
        </script>
        <!-- <img src="ai/back.jpg"> -->
        <div class="main">
            <h1><i class="fas fa-chart-line fa-lg"></i> 美国各州县疫情情况分析及趋势预测</h1>
            <div class="selectbox">
                <select onchange="chg()" name="a" id="state">
                    <option value="image">请选择州</option>
                    <option>Alabama</option>
                    <option>Alaska</option>
                    <option>Arizona</option>
                    <option>Arkansas</option>
                    <option>California</option>
                    <option>Colorado</option>
                    <option>Connecticut</option>
                    <option>Delaware</option>
                    <option>District of Columbia</option>
                    <option>Florida</option>
                    <option>Georgia</option>
                </select>
                <select name="b" id="county">
                    <option value="notice">请选择县</option>
                </select>
                <button onclick="changePic()">查询</button>
            </div>
            <script>
                var arr = [
                    ["请选择县"],
                    [
                        "Autauga", "Baldwin", "Barbour", "Bibb", "Marengo", "Marion",
                        "Marshall", "Mobile", "Monroe", "Montgomery", "Morgan,Perry", "Pickens",
                        "Pike", "Randolph", "Russell", "Shelby", "St. Clair", "Sumter", "Talladega",
                        "Tallapoosa", "Tuscaloosa", "Walker", "Washington", "Wilcox", "Winston"


                    ],
                    ["Aleutians East", "Aleutians West", "Anchorage"],
                    ["Apache", "Cochise", "mixuebingcheng"]
                ] //这里放数据
                function chg() {
                    var i = document.all.a.selectedIndex
                    with(document.all.b) {
                        length = 0;
                        if (i > 0) {
                            for (j = 0; j < arr[i].length; j++)
                                options.add(new Option(arr[i][j], arr[i][j]));
                        } else {
                            options.add(new Option(arr[0][0], "notice"));
                        }
                    }
                }
            </script>
            <h2>新增病例和死亡趋势</h2>
            <img class="showme" src="ai/image/notice.jpg" />
            <h2>预测累计确诊病例</h2>
            <img class="showme" src="ai/image/notice.jpg" />
            <h2>预测累计死亡病例</h2>
            <img class="showme" src="ai/image/notice.jpg" />
            <h2>训练累计确诊病例</h2>
            <img class="showme" src="ai/image/notice.jpg" />
            <h2>训练累计死亡病例</h2>
            <img class="showme" src="ai/image/notice.jpg" />
            <script>
                function changePic() {
                    var selectedState = document.getElementById("state");
                    state = selectedState.options[selectedState.selectedIndex].value;

                    var selectedCounty = document.getElementById("county");
                    county = selectedCounty.options[selectedCounty.selectedIndex].value;

                    var image = document.getElementsByClassName("showme");
                    image[0].src = "ai/usa_2/" + state + "/" + county + "/county_data_vis" + ".png";
                    image[1].src = "ai/usa_2/" + state + "/" + county + "/predict cum cases" + ".png";
                    image[2].src = "ai/usa_2/" + state + "/" + county + "/predict cum deaths" + ".png";
                    image[3].src = "ai/usa_2/" + state + "/" + county + "/train cum cases" + ".png";
                    image[4].src = "ai/usa_2/" + state + "/" + county + "/train cum deaths" + ".png";
                }
            </script>
        </div>
        <p id="ref">&copy;南方科技大学附属中学 Group 2</p>
    </body>
</html>

 

 

/* body {
    background: url(../image/virus.jpg);
  background-size: 100% auto;

  text-align: center;
} */

h1 {
  margin: 10px auto;
}

#logo1 {
  background-color: white;
    position: absolute;
  opacity: 0.8;
  border-radius: 8px;
  top: 1%;
  left: 1%;
  height: 32px;
  padding: 5px;
}

#logo2 {
  background-color: white;
    position: absolute;
  opacity: 0.8;
  border-radius: 8px;
  top: 1%;
  right: 1%;
  height: 32px;
  padding: 5px;
}

#bg {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: -10;
  background-position: 0 center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  zoom: 1;
 
  opacity:1;
  transition: opacity 1s linear;
  -moz-transition: opacity 1s linear;
  -webkit-transition: opacity 1s linear;
  -o-transition: opacity 1s linear;
}

.main {
    font-family: "微软雅黑 Light";
    position: absolute;
  /* opacity: 0.8; */
  border-radius: 20px 0 20px 0;
  top: 50%;
  left: 50%;
  width: 65%;
  min-height: 50%;
  transform: translate(-50%, -10%);
  padding: 40px 40px;
  background: rgba(255, 255, 255, 0.7);

  box-shadow: 0 15px 20px rgba(0, 0, 0, 0.5);
  text-align: center;
}

.selectbox {
  margin: 5px 0px 20px 0px;
}

select {
  padding-left: 5px;
  width: 120px;
  height: 25px;
  max-width: 100%;
}

.showme {
  max-width: 100%;
  
  opacity: 1.0;
}

#ref {
  position: fixed;
  bottom: 0px;
  width: 98%;
  text-align: center;
  color: black;
}

 

posted @ 2021-07-29 19:19  limited_Infinite  阅读(30)  评论(0)  编辑  收藏  举报
// //返回顶部 //返回顶部按钮