HTML与JavaScript实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Learning_zhang/article/details/128291475
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/fetch/3.0.0/fetch.min.js"></script>
    <style>
        .center {
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
        }
    </style>
    <meta charset="utf-8">
    <title>testTheFirst</title>
</head>
<body>
    <!--通过ajx请求数据 -->
    <a href="http://www.runoob.com">这是大标题</a>
    <p>
        队列
        <br>
        看着一般吧，是吧
    </p>

    <div class="center">
        <p>
            你好,我喜欢什么呢
            <br>
            哈哈哈哈哈哈，哈哈哈哈重新排序
        </p>
    </div>
     <script>
         // let promise= new Promise(resolve => {
         //     setTimeout(()=> {
         //         console.log("dfdfdf");
         //         resolve("Hello");
         //     },3000)
         // }); promise定时器，将任务队列化
 
        var tupian1="/Desktop/ji.png";
        var tupian2="/Desktop/erwe.png";

        function test() {
            var url = 'http://127.0.0.1:9200';
            ret = fetch(url).then(function(response) {
                return response.json()
            }).then(function(data) {
                text="<tr>"
                text+="<td>"+data["name"]+"</td>";
                text+="<td>"+data["cluster_name"]+"</td>";
                text+="</tr>";
                document.getElementById('myFormData').innerHTML = text;//展示数据
                return text;
            }).catch(function(err){
                console.log("cuowu")
            });
        }

        function testTupainEnter(obj) {
            obj.src = tupian1;
            return false;
        }
        //定义事件，鼠标在图片上图片就变
        //请求数据，然后进行展示

        function testTupianLeaver(obj) {
            obj.src = tupian2;
            return false;
        }

        function testmaodian(obj) {
            obj.innerHTML="将变化到的";
            return false;
        }

        function testmaodianLeaver(obj) {
            obj.innerHTML = "会变化的";
            return false;
        }
    </script>

    <table style="border:0;margin-bottom: 0px;">
        <thead>
            <tr>
                <td>test</td>
                <td>jinn</td>
            </tr>
        </thead>
        <tbody id='myFormData'></tbody>
    </table>

    <button onclick="test()">请求数据并进行展示</button>

    <p name="maodian" onmouseover="testmaodian(this)" onmouseleave="testmaodianLeaver(this)">会变化的</p>
    
    <img id="tupian" onmouseenter="testTupainEnter(this)" onmouseleave="testTupianLeaver(this)" src="/Desktop/erwe.png" width="400px" height="400px">
</body>
</html>
前端基础初探
