一个简单的html5Demo

最新推荐文章于 2024-08-20 10:31:33 发布

修炼到救赎

最新推荐文章于 2024-08-20 10:31:33 发布

阅读量5.4k

点赞数

分类专栏： Java html 文章标签： html5

Java 同时被 2 个专栏收录

364 篇文章 2 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

<DOCTYPE html>
    <html>
        <head>
        <meta charset="utf-8"/>
        <meta http-equiv=X-UA-Compatible content="IE=edge,chorme=1"/>
        <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
        <!-- <meta http-equiv="refresh" content="2"/> -->
        <meta name="keywords" content="nihao,haha,anzhuo"/>
        <meta name="description" content="yaiisidsisifsofidsoids我的描述"/>
        <link rel="dns-prefetch" href="//tmm.taobao.com"/>
        <title>Js Demo</title>
        <!-- 引用ico图标 -->
        <Link rel="shortcut icon" type="image/x-icon" href="images/favricon.ico"/>
        <script type="text/javascript" src="js/jquery-1.8.3/jquery.min.js"></script>
        </head>
        <body>
        <style type="text/css">
            .hilite{
                background-color:red;
            }
        </style>
            <p>This is a paragraph of Html</p>
            <script type="text/javascript">
                //文档就绪函数在html加载完执行
                $(document).ready(function(){
                    alert("ceshi");
                    debugtwo("ni shuo de sha");
                    var e = document.getElementById("debuglog");
                    highlight(e);
                    //hide(e,false);
                });
                //一个普通函数，里面放置一个方法，加一个if的判断
                function moveon(){
                    var answer =confirm("准备好了么？");
                    if(answer)window.location = "https://www.baidu.com";
                }
                //时间控制调用
                setTimeout(moveon,6000);
                //查找和修改基本文档
                function debug(msg){
                    var log = document.getElementById("debuglog");
                    if(!log){
                        log = document.createElement("div");
                        log.id = "debuglog";
                        log.innerHTML = "<h1>Debug Log</h1>";
                        document.body.appendChild(log);
                    }
                    var pre = document.createElement("pre");
                    var text = document.createTextNode(msg);

                        pre.appendChild(text);
                        log.appendChild(pre);
                }
                //jquery下的debug
                function debugtwo(msg){
                    var log = $("debuglog");
                    if(log.length==0){
                        log=$("<div id='debuglog'><h1>Debug Log</h1></div>");
                        log.appendTo(document.body);
                    }
                    log.append($("<pre/>").text(msg));
                }
                //js操纵html来进行css样式制作
                function hide(e,reflow){
                    if(reflow){
                        e.style.display = "none"
                    }else{
                        e.style.visibility = "hidden"
                    }
                }
                //js操纵html来进行css样式显示高亮
                function highlight(e){
                    if(!e.className)e.className = "hilite";
                    else e.className += "hilite";
                }
                //加载函数就绪
                window.onload = function(){
                    var images = document.getElementsByTagName("img");
                    for(var i=0;i<images.length;i++){
                        var image =images[i];
                        if(image.addEventListener){
                            image.addEventListener("click",hide,false);
                        }else{
                            image.attachEvent("onclick",hide);
                        }
                    }
                    function hide(event){event.target.style.visibility = "hidden";}
                }

            </script>

            <img>sss</img>
            <img>sss</img>
            <img>sss</img>
            <img>sss</img>
            <img>ss</img>
        </body>
    </html>