Difference between revisions of "Team:SCAU-China/Human Practices"

(Prototype team page)
 
Line 1: Line 1:
−
{{SCAU-China}}
+
<!DOCTYPE html>
−
<html>
+
<html lang="en">
  
−
<div class="column full_size judges-will-not-evaluate">
+
<head>
−
<h3>★  ALERT! </h3>
+
    <meta charset="UTF-8">
−
<p>This page is used by the judges to evaluate your team for the <a href="https://2018.igem.org/Judging/Medals">medal criterion</a> or <a href="https://2018.igem.org/Judging/Awards"> award listed below</a>. </p>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<p> Delete this box in order to be evaluated for this medal criterion and/or award. See more information at <a href="https://2018.igem.org/Judging/Pages_for_Awards"> Instructions for Pages for awards</a>.</p>
+
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
−
</div>
+
    <title>SCAU-2018</title>
 +
</head>
  
 +
<body>
 +
<style type="text/css">
 +
#top_title{
 +
display:none;
 +
}
 +
* {
 +
            box-sizing: border-box;
 +
        }
  
−
<div class="clear"></div>
+
        a {
 +
            text-decoration: none;
 +
        }
  
 +
        ul,
 +
        ol {
 +
            list-style: none;
 +
        }
  
 +
        body {
 +
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 +
            font-size: 14px;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            min-width: 768px;
 +
        }
  
−
<div class="column full_size">
+
        .navbar-default {
 +
            background-color: #EEE;
 +
            border-color: #e7e7e7;
 +
            top: 16px;
 +
            border-width: 0 0 1px;
 +
            position: fixed;
 +
            right: 0;
 +
            left: 0;
 +
            z-index: 1030;
 +
            min-height: 50px;
 +
            margin-bottom: 20px;
 +
            border: 1px solid transparent;
 +
            min-width: 768px;
 +
        }
  
−
<h1>Human Practices</h1>
+
        .container {
−
<p>
+
            padding-right: 15px;
−
At iGEM we believe societal considerations should be upfront and integrated throughout the design and execution of synthetic biology projects. “Human Practices” refers to iGEM teams’ efforts to actively consider how the world affects their work and the work affects the world. Through your Human Practices activities, your team should demonstrate how you have thought carefully and creatively about whether your project is responsible and good for the world. We invite you to explore issues relating (but not limited) to the ethics, safety, security, and sustainability of your project, and to show how this exploration feeds back into your project purpose, design and execution.
+
            padding-left: 15px;
−
</p>
+
            margin-right: auto;
 +
            margin-left: auto;
 +
        }
  
 +
        @media screen and (min-width: 768px) {
 +
            .container {
 +
                width: 750px;
 +
            }
 +
        }
  
 +
        @media screen and (min-width: 992px) {
 +
            .container {
 +
                width: 970px;
 +
            }
 +
        }
  
−
<p>For more information, please see the <a href="https://2018.igem.org/Human_Practices">Human Practices Hub</a>. There you will find:</p>
+
        @media screen and (min-width: 1200px) {
−
+
            .container {
−
<ul>
+
                width: 1170px;
−
<li> an <a href="https://2018.igem.org/Human_Practices/Introduction">introduction</a> to Human Practices at iGEM </li>
+
            }
−
<li>tips on <a href="https://2018.igem.org/Human_Practices/How_to_Succeed">how to succeed</a> including explanations of judging criteria and advice about how to conduct and document your Human Practices work</li>
+
        }
−
<li>descriptions of <a href="https://2018.igem.org/Human_Practices/Examples">exemplary work</a> to inspire you</li>
+
−
<li>links to helpful <a href="https://2018.igem.org/Human_Practices/Resources">resources</a></li>
+
−
<li>And more! </li>
+
−
</ul>
+
−
+
  
 +
        .navbar-header {
 +
            float: left;
 +
        }
  
 +
        .navbar-brand {
 +
            color: #777;
 +
            float: left;
 +
            height: 50px;
 +
            padding: 15px 15px;
 +
            font-size: 18px;
 +
            line-height: 20px;
 +
        }
  
 +
        .navbar>ul>li {
 +
            float: left;
 +
        }
  
−
<p>On this page, your team should document all of your Human Practices work and activities. You should write about the Human Practices topics you considered in your project, document any activities you conducted to explore these topics (such as engaging with experts and stakeholders), describe why you took a particular approach (including referencing any work you built upon), and explain if and how you integrated takeaways from your Human Practices work back into your project purpose, design and/or execution. </p>
+
        .nav>li {
−
+
            position: relative;
−
<p>If your team has gone above and beyond in work related to safety, then you should document this work on your Safety wiki page and provide a description and link on this page. If your team has developed education and public engagement efforts that go beyond a focus on your particular project, and for which would like to nominate your team for the Best Education and Public Engagement Special Prize, you should document this work on your Education and Education wiki page and provide a description and link here. </p>
+
            display: block;
−
</div>
+
            margin-right: 10px;
−
+
        }
−
<div class="clear"></div>
+
  
−
+
        .nav>li>a {
−
<div class="column full_size">
+
            color: #777;
−
<div class="highlight decoration_background">
+
            position: relative;
−
<p>The iGEM judges will review this page to assess whether you have met the Silver and/or Gold medal requirements based on the Integrated Human Practices criteria listed below. If you nominate your team for the <a href="https://2018.igem.org/Judging/Awards">Best Integrated Human Practices Special Prize</a> by filling out the corresponding field in the <a href="https://2018.igem.org/Judging/Judging_Form">judging form</a>, the judges will also review this page to consider your team for that prize.
+
            display: block;
−
</p>
+
            padding: 8px 15px;
−
</div>
+
            cursor: pointer;
−
</div>
+
        }
  
−
<div class="clear extra_space"></div>
+
        .nav>li>a:hover {
 +
            color: #333;
 +
        }
  
 +
        .caret {
 +
            display: inline-block;
 +
            width: 0;
 +
            height: 0;
 +
            margin-left: 2px;
 +
            vertical-align: middle;
 +
            border-top: 4px solid #777;
 +
            border-right: 4px solid transparent;
 +
            border-left: 4px solid transparent;
 +
            position: absolute;
 +
            top: 18px;
 +
            right: 1px;
 +
        }
  
 +
        .nav>li>a:hover+span {
 +
            border-top: 4px solid #333;
 +
        }
  
−
<div class="column full_size">
+
        .nav>li .dropdown-menu {
−
+
            margin-top: 0;
−
<h3>Silver Medal Criterion #3</h3>
+
            border-top-left-radius: 0;
−
<p>Convince the judges you have thought carefully and creatively about whether your work is responsible and good for the world. Document how you have investigated these issues and engaged with your relevant communities, why you chose this approach, and what you have learned. Please note that surveys will not fulfill this criteria unless you follow scientifically valid methods. </p>
+
            border-top-right-radius: 0;
 +
            position: absolute;
 +
            top: 35px;
 +
            left: 0;
 +
            z-index: 1000;
 +
            float: left;
 +
            min-width: 160px;
 +
            padding: 5px 0;
 +
            margin: 2px 0 0;
 +
            font-size: 14px;
 +
            text-align: left;
 +
            list-style: none;
 +
            background-color: #fff;
 +
            -webkit-background-clip: padding-box;
 +
            background-clip: padding-box;
 +
            border: 1px solid #ccc;
 +
            border: 1px solid rgba(0, 0, 0, .15);
 +
            border-radius: 4px;
 +
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 +
            display: none;
 +
        }
  
 +
        .dropdown-menu>li {
 +
            display: list-item;
 +
        }
  
−
<h3>Gold Medal Criterion #1</h3>
+
        .dropdown-menu>li>a {
−
<p>Expand on your silver medal activity by demonstrating how you have integrated the investigated issues into the purpose, design and/or execution of your project. Document how your project has changed based upon your human practices work.
+
            display: block;
−
</p>
+
            padding: 3px 20px;
 +
            clear: both;
 +
            font-weight: normal;
 +
            line-height: 1.42857143;
 +
            color: #333;
 +
            white-space: nowrap;
 +
        }
 +
        .dropdown-menu>li>a:hover {
 +
            background-color: #eee;
 +
        }
 +
html {
 +
  font-family: sans-serif;
 +
  -webkit-text-size-adjust: 100%;
 +
      -ms-text-size-adjust: 100%;
 +
}
 +
#mainDiv{
 +
 +
  margin: 0;
 +
  min-height: 2000px;
 +
  padding-top: 70px;
 +
  min-width: 1140px;
 +
  background: url('https://static.igem.org/mediawiki/2018/4/4b/T--SCAU-China--ziyeMain.jpg') no-repeat center center;
 +
}
 +
.heart {
 +
  width: 1140px;
 +
  margin: 0 auto;/* 通用的版心 */
 +
}
 +
#mask {
 +
    width: 100%;
 +
    height: 2800px;
 +
    background: rgba(0, 0, 0, 0.3);
 +
    margin-top: -15px;
 +
    padding-top: 15px;
 +
}
 +
.DBoard {/* 展板样式 */
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    background-color: #fff;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
.DBoard0 {/*文字样式*/
 +
    margin: 0px auto 40px auto;
 +
    width: 1000px;
 +
    height: 500px;
 +
    border-radius: 3px;
 +
    color: white;
 +
    overflow: hidden;
 +
    position: relative;
 +
}
 +
#mask p {
 +
    color: #fff;
 +
    text-align: center;
 +
}
 +
#lists-DB {
 +
    cursor: pointer;
 +
}
 +
#lists-DB:hover #arr-l,#lists-DB:hover #arr-r{
 +
    display: block;
 +
}
 +
#lists {
 +
    position: relative;
 +
    width: 4000px;
 +
}
 +
#lists img {
 +
    float: left;
 +
}
 +
#arr-l,#arr-r {
 +
    display: block;
 +
    position: absolute;
 +
    width: 40px;
 +
    height: 60px;
 +
    background: rgba(0, 0, 0, .4);
 +
    top: 50%;
 +
    margin-top: -30px;
 +
    color: #fff;
 +
    font: 600 30px/60px "宋体";
 +
    line-height: 60px;
 +
    text-align: center;
 +
    display: none;
 +
}
 +
#arr-l:hover,#arr-r:hover {
 +
    background: rgba(0, 0, 0, .7);
 +
}
 +
#arr-l {
 +
    left: 0;
 +
}
 +
#arr-r {
 +
    right: 0;
 +
}
 +
#buttons {
 +
    position: absolute;
 +
    bottom: 15px;
 +
    left: 50%;
 +
}
 +
#buttons span {
 +
    width: 12px;
 +
    height: 12px;
 +
    background: #ccc;
 +
    float: left;
 +
    border-radius: 50%;
 +
    margin: 0 5px 0 5px;
 +
}
 +
.on {
 +
    background-color: #333 !important;
 +
}
 +
#toTop {
 +
    width: 50px;
 +
    height: 50px;
 +
    background: url("https://static.igem.org/mediawiki/2018/b/b6/T--SCAU-China--toTop.png") no-repeat center center rgba(0, 0, 0, .3);
 +
    position: fixed;
 +
    right: 50px;
 +
    bottom: 5px;
 +
    cursor: pointer;
 +
    display: none;
 +
}
 +
 
 +
   
 +
}
 +
#img4{
 +
    width: 10%;
 +
}
 +
#content {
 +
    width: 101%;
 +
    padding: 15px;
 +
    border: none;
 +
    color: black;
 +
    margin-left: 20px;
 +
    margin-right: auto;
 +
    background-color: #ffffff;
 +
    position: relative;
 +
}
 +
#content {
 +
    position: relative;
 +
    width: 101%;
 +
    margin: 0 auto;
 +
    padding: 5px 5px 5px 5px;
 +
    background: white;
 +
    color: black;
 +
    border-left: 1px solid #444444;
 +
    border-right: 1px solid #444444;
 +
    line-height: 1.5em;
 +
    z-index: 2;
 +
}
 +
body {
 +
    background-color: white;
 +
}
 +
</style>
 +
<div class="navbar-default">
 +
        <div class="container">
 +
            <div class="navbar-header">
 +
                <a href="https://2018.igem.org/Team:SCAU-China" class="navbar-brand">SCAU-2018</a>
 +
            </div>
 +
            <div class="navbar">
 +
                <ul style="float: left;" class="nav">
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">TEAM</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li>
 +
                                <a href="#">Time shaft</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Members</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Advisors</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Teachers</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Attributions</a>
 +
                            </li>
 +
                            <li>
 +
                                <a href="#">Collaborations</a>
 +
                            </li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">PROJECT</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Description</a></li>
 +
                            <li><a href="#">Design</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">PART</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Basic parts</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">RESULT</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Experiments</a></li>
 +
                            <li><a href="#">Proof</a></li>
 +
                            <li><a href="#">Demonstrate</a></li>
 +
                            <li><a href="#">Model</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">NOTE</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                          <li><a href="#">NoteBook</a></li>
 +
                          <li><a href="#">Gallery</a></li>
 +
                          <li><a href="#">Protocol</a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
                <ul style="float: right;" class="nav">
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">SAFETY</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Safety</a></li>
 +
                        </ul>
 +
                    </li>
 +
                    <li class="dropdown">
 +
                        <a href="javascript:void(0)">HUMAN PRACTICES</a>
 +
                        <span class="caret"></span>
 +
                        <ul class='dropdown-menu'>
 +
                            <li><a href="#">Integrated</a></li>
 +
                            <li><a href="#">Engagement</a></li>
 +
                            <li><a href="#">Entrepreneurship</a></li>
 +
                            <li><a href="#"></a></li>
 +
                            <li><a href="#"></a></li>
 +
                        </ul>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
        </div>
 +
    </div>
 +
 
 +
 
 +
 
 +
<div id="mainDiv">
 +
<div class="heart"><!-- 版心 -->
 +
    <div id="mask"><!-- 半透明底板 -->
 +
      <div class="DBoard" id="lists-DB"><!-- 展板 -->  <!-- 轮播图部分 -->
 +
        <div id="lists" style="left:-1000px;">
 +
          <img src="img/image2.png" alt="">
 +
          <img src="img/image1.png" alt="">
 +
          <img src="img/image2.png" alt="">
 +
          <img src="img/image1.png" alt="">
 +
        </div>
 +
        <div id="arrow"> <!-- 左右按钮 -->
 +
          <a href="javascript:;" id="arr-l"><</a>
 +
          <a href="javascript:;" id="arr-r">></a>
 +
        </div>
 +
        <div id="buttons"> <!-- 小圆点 -->
 +
        </div>
 +
      </div>
 +
      <div class="DBoard"><!-- 展板 -->
 +
      </div>
 +
      <div class="DBoard"><!-- 展板 -->
 +
      </div>
 +
      <div class="DBoard"><!-- 展板 -->
 +
      </div>
 +
      <div class="DBoard"><!-- 展板 -->
 +
      </div>
 +
      <p>School's name:</p>
 +
      <p>Member's name:</p>
 +
      <p>Designed by:</p>
 +
    </div>
 +
  </div>
 
</div>
 
</div>
 +
  <!-- 回到顶部按钮 -->
 +
  <em id="toTop"></em>
  
 +
<script>
 +
        var dropdownBoxs = document.getElementsByClassName('dropdown');
 +
        var dropdownMenus = document.getElementsByClassName('dropdown-menu');
 +
        for (let i = 0 ; i < dropdownBoxs.length ; i ++) {
 +
            // console.log(dropdownBoxs[i]);
 +
            // console.log(dropdownMenus[i]);
 +
            dropdownBoxs[i].index = i;
 +
            dropdownBoxs[i].onclick = function () {
 +
                var styles = document.defaultView.getComputedStyle(dropdownMenus[i]) || dropdownMenus[i].currentStyle;
 +
                // console.log(styles.display);
 +
                if (styles.display == 'none') {
 +
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
                        dropdownMenus[j].style.display = 'none';
 +
                        dropdownMenus[i].style.display = 'block';
 +
                    }
 +
                } else {
 +
                    for (let j = 0 ; j < dropdownBoxs.length ; j ++) {
 +
                        dropdownMenus[j].style.display = 'none';
 +
                    }
 +
                }
 +
            }
 +
        }
 +
    </script>
  
  
−
<div class="clear extra_space"></div>
+
    <script type="text/javascript">
 +
 
 +
      var a= function() {
 +
    var box01 = document.getElementById("lists-DB");
 +
    var lis = document.getElementById("lists");//获得轮播图图片盒子
 +
    var btns = document.getElementById("buttons");//获得按钮盒子
 +
    var imgs = lis.getElementsByTagName("img");//获得图片伪数组
 +
    btns.style.width = 24 * (imgs.length - 2) + "px";
 +
    btns.style.marginLeft = -(12 * (imgs.length - 2)) + "px";//动态赋值
 +
    for(var i = 0;i < imgs.length - 2; i++){
 +
        //动态生成小圆点
 +
        var span = document.createElement("span");
 +
        btns.appendChild(span);
 +
    }
  
  
 +
    //轮播图正式部分
 +
    var prev = document.getElementById("arr-l");
 +
    var next = document.getElementById("arr-r");
 +
    var animated = false;//防止计时器多次被触发变量
  
−
<div class="column full_size">
+
    function animate(offset) {
−
<h3>Best Integrated Human Practices Special Prize</h3>
+
        var time = 300;//滚动一张图片总用时
 +
        var inteval = 10;//滚动一次的间隔时间
 +
        var speed = offset / (time / inteval);//每次滚动滑动的像素
 +
        var left = parseInt(lis.style.left) + offset;//先计算出滚动后的left值
 +
        function go() {
 +
            animated = true;//为true代表正在运行
 +
            //滑动函数
 +
            if(((speed > 0) + (parseInt(lis.style.left) < left)===2) || ((speed < 0) + (parseInt(lis.style.left)) > left===2)){
 +
                lis.style.left = parseInt(lis.style.left) + speed + "px";
 +
                setTimeout(go,inteval);//设置计时器
 +
            }
 +
            else {
 +
                lis.style.left = left + "px";
 +
                if(parseInt(lis.style.left) > -1000) lis.style.left = -(1000 * (imgs.length - 2)) + "px";
 +
                if(parseInt(lis.style.left) < -(1000 * (imgs.length - 2))) lis.style.left = -1000 + "px";
 +
                animated = false;//结束运行
 +
            }
 +
        }
 +
        go();//调用函数
 +
       
 +
    }
 +
    prev.onclick = function() {
 +
        if(animated) return;//正在轮播停止
 +
        if(index == 0) index = spans.length - 1;
 +
        else index --;
 +
        animate(1000);
 +
        showButton();
 +
    }
 +
    next.onclick = function() {
 +
        if(animated) return;
 +
        if(index == spans.length - 1) index = 0;
 +
        else index ++;
 +
        animate(-1000);
 +
        showButton();
 +
    }
 +
    var index = 0;//记录现在className为on的按钮
  
−
<p>To compete for the Best Integrated Human Practices prize, please describe your work on this page and also fill out the description on the judging form. </p>
+
    var spans = btns.getElementsByTagName("span");//得到btns下所有的span标签
 +
    spans[0].className = "on";
 +
    for(var i = 0;i < spans.length;i ++ ) {
 +
        spans[i].index = i;//自定义属性
 +
        spans[i].onclick = function() {
 +
            if(animated) return;
 +
            if(this.className == "on") return;
 +
            animate((index - this.index) * 1000);
 +
            index = this.index;
 +
            showButton();
 +
        }
 +
    }
  
−
<p>How does your project affect society and how does society influence the direction of your project? How might ethical considerations and stakeholder input guide your project purpose and design and the experiments you conduct in the lab? How does this feedback enter into the process of your work all through the iGEM competition? Document a thoughtful and creative approach to exploring these questions and how your project evolved in the process to compete for this award!</p>
+
    function showButton() { //显示按钮运动的函数
−
<p>You must also delete the message box on the top of this page to be eligible for this prize.</p>
+
        for(var j = 0;j < spans.length;j ++) {//排它思想
 +
                //if(spans[j].className == "on") oldIndex = j;
 +
                spans[j].className = "";
 +
                spans[index].className = "on";
 +
        }
 +
    }
  
−
</div>
+
    var timer;//计时器变量 , 这里为什么不能为null
 +
    var interval = 3000;//点击间隔时间
 +
 
 +
    function play() {//自动点击next函数
 +
        timer = setTimeout(function(){
 +
            next.onclick();//自动点击next
 +
            play();//递归调用
 +
        },interval);
 +
    }
 +
 
 +
    function stop() {
 +
        //停止函数
 +
        clearTimeout(timer);
 +
    }
 +
 
 +
 
 +
    box01.onmouseover = stop; //鼠标悬浮在轮播图上时停止
 +
    box01.onmouseout = play;//鼠标离开轮播图继续
 +
    play();//先自己调用一次
 +
}
 +
a();
 +
  </script>
 +
    <script type="text/javascript">
 +
            //封装函数js文件，方便调用
 +
    function $(id) {return document.getElementById(id);}//封装获取id对象函数
 +
    function show(obj) {obj.style.display = "block";}//封装显示函数
 +
    function hidden(obj) {obj.style.display = "none";}//封装隐藏函数
 +
    function scroll(){
 +
        if(window.pageYOffset != null) {
 +
            //ie9+ 和 其他浏览器
 +
            return {
 +
                top: window.pageYOffset,
 +
                left: window.pageXOffset
 +
            }
 +
        }
 +
        else if(document.compatMode == "CSS1Compat") {
 +
            //非怪异浏览器：没有头部的
 +
            return {
 +
                top: document.documentElement.scrollTop,
 +
                left: document.documentElement.scrollLeft
 +
            }
 +
        }
 +
        return {//剩下的全部都是怪异浏览器
 +
            top: document.body.scrollTop,
 +
            left: document.body.scrollLeft
 +
        }
 +
    }
 +
 
 +
    var leader = 0,target = 0,timer = null;//计时器变量
 +
    window.onscroll = function() {
 +
        //滚动时执行的函数
 +
        scroll().top > 0 ? show($("toTop")) : hidden($("toTop"));//隐藏和显示totop
 +
        leader = scroll().top; //实时记录滚动距离
 +
    }
 +
 
 +
    $("toTop").onclick = function() {
 +
        //toTop被点击时执行的函数
 +
        target = 0;
 +
        timer = setInterval(function() {
 +
            leader = leader + (target - leader) / 10;
 +
            window.scrollTo(0,leader);
 +
            if(leader == target) clearInterval(timer);//当到达顶端清除计时器
 +
            //必须写在里面,因为在计时器执行时判断
 +
        },20);
 +
    }
 +
 
 +
    </script>
 +
 
 +
 
 +
 
 +
</html>
 +
 
 +
 
 +
</body>
 +
 
 +
</html>

Revision as of 05:43, 22 September 2018

<!DOCTYPE html> SCAU-2018

SCAU-2018
< >

School's name:

Member's name:

Designed by:


</body>

</html>