html5增强元素--续

<script>
    var i = 0;
    function progress_demo() {
        if (i <= 100) {
            i++;
            updateProgress(i);
            setTimeout(progress_demo,100);
        }
    }
    function updateProgress(newValue) {
        var progressBar = document.getElementById("pid");
        progressBar.value = newValue;
//            progressBar.getElementsByTagName("span")[0].textContent = newValue;
    }
</script>
<section>
    <h2>progress元素的使用</h2>

    <p>完成的百分比
        <progress style="background-color: darkgoldenrod" id="pid" max="100"><span>0</span>%</progress>
    </p>
    <input type="button" onclick="progress_demo()" value="click me">
</section>

<!--meter元素-->
<meter value="40" min="0" max="100" low="10" high="90" optimum="80"></meter>

 <!--ol-->
    <ol start="10" reversed>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
        <li>li4</li>
        <li>li5</li>
    </ol>
    <!--dl-->
    <dl>
        <dt>hello</dt>
        <dd>you are my love</dd>
        <dt>movie</dt>
        <dd>a nice movie</dd>
    </dl>
    <!--cite-->
    <h3>cite元素</h3>
    <p>我最喜欢的电影是<cite>浴血黑帮</cite></p>