首页 > 代码库 > JS学习记录（补充四）

JS学习记录（补充四）

2024-11-18 22:19:02   203人阅读

History对象
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>
</head>
<body>
<a href=http://www.mamicode.com/"Demo40.html">Demo40</a>
    <button onclick="forward()">下一个页面</button>
</body>
<script src=http://www.mamicode.com/"../../js/history.js"></script>
</html>

结果图：技术分享

 

 

Navigator对象
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Navigator</title>
</head>
<body>

</body>
<script>
    console.log(navigator.appName);
    console.log(navigator.appVersion);
    console.log(navigator.userAgent);
    console.log(navigator.platform);
</script>
</html>

 

 

定时器
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
<button onclick="show()">五秒后显示HelloWord</button>
<button onclick="cancelShow()">取消显示HelloWord</button>
<button onclick="cancelShow2()">停止显示HelloWord</button>
</body>
<script>
    //     setTimeout  默认情况下，只会执行一次。
    var hello;
    function show() {
        hello = setTimeout(function () {
            alert("HelloWord!");
        }, 500);
    }
    function cancelShow() {
        clearTimeout(hello);
    }
</script>
<!--<script>
    //    setInterval 根据指定的时间，循环执行。

    var hello2 = setInterval(function () {
        console.log("HelloWord!");
    }, 1000);
    function cancelShow2() {
        clearTimeout(hello2);
    }
</script>-->
</html>

 

结果图：

技术分享技术分享

confirm(对话框中显示的纯文本)

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>confirm(对话框中显示的纯文本)</title>
</head>
<body>

</body>
<script>
    var flag=confirm("确认样删除此信息吗？");
    if(flag){
        alert("删除成功");
    }
    else {
        alert("你取消了删除");
    }
    /*注意confirm与prompt和alert的区别*/
</script>
</html>

结果图：

技术分享

 

DOM部分

 

getElement系列方法

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getElement系列方法</title>
</head>
<body>
<p id="jereh">杰瑞集团</p>
<p name="jredu">杰瑞教育</p>
<p name="jredu">杰瑞教育</p>
<button onclick="change()">变！！</button>
<button onclick="change2()">变！！</button>
<button onclick="change3()">全部字体变大！！</button>
</body>
<script>
    /*getElementById 通过ID查找元素，只会返回一个匹配的元素*/
    function change() {
        document.getElementById("jereh").style.color = "red";
    }
    /*getElementByClassName  通过class查找元素，返回一个匹配的元素数组
     getElementByName 通过name属性查找元素，返回一个匹配的元素数组*/
    function change2() {
        //       var result = document.getElementsByClassName("jredu");
        var result = document.getElementsByName("jredu");
        for (var i = 0; i <= result.length; i++) {
            result[i].style.fontSize = "30px";
        }
    }
    /*getElementByTagName 通过标签查找元素，只会返回一个匹配的元素数组*/
    function change3() {
        var result = document.getElementsByTagName("p");
        for (var i = 0; i <= result.length; i++) {
            result[i].style.fontSize = "50px";
        }

    }
</script>
</html>

结果图：

技术分享

Attribute
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Attribute</title>
</head>
<body>
<img src=http://www.mamicode.com/"../../img/tu.png" alt="" id="img"><br>
<button onclick="getUrl()">获取图片路径信息</button>
<button onclick="changeUrl()">改变图片</button>
</body>
<script>
    var img = document.getElementById("img");
    function getUrl() {

         /*var src = http://www.mamicode.com/img.src;*//*绝对路径*/
         var src = http://www.mamicode.com/img.alt="图片不显示";
         var src = http://www.mamicode.com/img.getAttribute("src");/*相对路径*/
        console.log("src");
    }
    function changeUrl() {
        img.setAttribute("src","../../img/tu2.png");
//        img.src="http://www.mamicode.com/img/tu2.png";
    }
</script>
</html>

结果图：

技术分享

点符号
<head>
    <meta charset="UTF-8">
    <style>
        .lzw {
            text-align: center;
            font-size: 30px;
            color: red;
        }
        .yut{
            margin-top: 300px;
        }
    </style>
    <title>点符号</title>
</head>
<body>
<p id="school">青岛理工大学！</p>
<button onclick="change()">改变字体</button>
</body>
<script>
    var p =  document.getElementById("school");
    function change() {
        /*1:.style方法，逐个去给元素添加样式，速度慢！*/
        /*p.style.textAlign = "center";
        p.style.color = "red";
        p.style.fontSize = "50px";*/

        /*2:className方法，直接给元素添加一个样式类，速度快
        * 前提是样式类已经存在        * 元素已存在默认类的时候，再次添加元素需要使用+=”（空格）类名称“*/
//        p.className +=" yut";

        /*3:cssText 可以一次吧多个样式写在样文本中*/
        p.style.cssText = "color:red;font-size:40px;text-align:center";

    }
</script>
</html>

结果图：

技术分享

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<p id="jredu">杰瑞教育</p>
</body>
<script>
    var p = document.getElementById("jredu");
    var value =http://www.mamicode.com/ p.innerHTML;
    p.onclick = function () {
        alert(value)
    }
</script>
</html>

结果图：

 

 

技术分享

行内样式的获取
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        #yut {
            color: red;
        }
    </style>
    <title>行内样式的获取</title>
</head>
<body>
<p id="yut" style="font-size: 40px; ">青岛理工大学</p>
</body>
<script>

    var p = document.getElementById("yut");
    //    var style = p.style;/*.style 获取的全部为行内样式*/

/*浏览器种类的区分不适用浏览器对象，
* 常使用的方法为判断浏览器特有的属性和方法*/
    if (p.currentStyle) {
        var style = p.currentStyle;
        /*IE 获取元素的所有样式*/
    }
    else {
        var style = window.getComputedStyle(p);
        /* W3C  获取元素的所有样式*/
    }

    console.log(style.fontSize);
    console.log(style.color);
</script>
</html>

结果图：

技术分享

 

JS学习记录（补充四）


联系
我们