html5增强元素--续

时间：2024-12-02 09:35:01

progress元素使用例子

<script>

    var i = ;

    function progress_demo() {

        if (i <= ) {

            i++;

            updateProgress(i);

            setTimeout(progress_demo,);

        }

    }

    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=""><span></span>%</progress>

    </p>

    <input type="button" onclick="progress_demo()" value="click me">

</section>

meter元素

<!--meter元素-->

<meter value="" min="" max="" low="" high="" optimum=""></meter>

ol , dl , cite元素

 <!--ol-->

    <ol start="" 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>

相关文章