JavaScript day-03

//demo1定时器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function cal(){
        //获取文本框
        var input = document.getElementById("num");
        //获取框中的值
        var num = input.value;
        //开始计算
        //在使用evil时,建议在字符串前后
        //加上括号,可以避免一些奇怪的问题.
        try{
            var value = eval("("+num+")");
            input.value = value;
        }catch (e) {
            input.value = "Error";
        }
        
    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="=" onclick="cal();"/>
</body>
</html>

//demo2定时器小案例

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#clock {
    border: 1px solid red;
    width: 200px;
    test-align: center;
    font-size: 20px;
    height: 30px;
    line-height: 30px;
}
</style>
<script type="text/javascript">
    //开始
    var id = false;
    function start() {
        id = setInterval(function() {
            //若id为非空,则定时器已启动过了,
            //那么就不要再次启动了.
            if (!id) {
                //console.log(1);
                return;
            }
            //获取当前客户端的时间
            var d = new Date();
            //获取本地格式时间
            var now = d.toLocaleTimeString();
            //将时间写入clock
            document.getElementById("clock").innerHTML = now;
        }, 1000);
    }
    //停止
    function stop() {
        //id非空时定时器处于启动状态,
        //此时停止它才有效.
        if (id) {
            clearInterval(id);
            //为了可以再次启动,将id清空.
            id = false;
        }
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="开始" onclick="start();" /> <input
            type="button" value="停止" onclick="stop();" />
    </p>
    <p id="clock"></p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    var id = false;
    //发送
    function send(){
        //若id非空,表示定时器已经启动,
        //此时就不要再次启动了.
        if(id){
            console.log(1);
            return;
        }
        //显示正在发送
        var p = document.getElementById("msg");
        p.innerHTML = "正在发送";
        //延迟3秒显示已发送
        id = setTimeout(function(){
            p.innerHTML = "已发送";
            //为了能再次启动 
            //清空id
            id = false;
        },3000);
    }
    //撤销
    function cancel(){
        //id非空时,表示定时器已启动,
        //此时才能撤销
        if(id){
            //显示为已撤销
            var p = document.getElementById("msg");
            p.innerHTML = "已撤销";
            //停止定时器
            clearTimeout(id);
            //为了能再次启动,我们要清空id
            id = false;
        }
    }
</script>
</head>
<body>
    <p>
        <input type="button" value="发送" onclick="send();"/>
        <input type="button" value="撤销" onclick="cancel();"/>
    </p>
    <p id="msg"></p>
</body>
</html>

//demo4BOM对象

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    //location对象
    //href是属性,reload()是方法.
    function f1() {
        var b = confirm("您确定要离开本页面吗？");
        console.log(b);
        if (b) {
            location.href = "file:///C:/Users/LZQ/eclipse-workspace/WebBasic/WebContent/day07/demo3.html";
        }
    }
    function f2(){
        location.reload();
    }
    //screen对象
    function f3(){
        console.log(screen.width);
        console.log(screen.height);
        console.log(screen.availWidth);
        console.log(screen.availHeight);
    }
    //history对象
    //forward()前进,back()后退,go(num)万能方法
    //length属性
    function f4(){
        history.forward();
    }
    //navigator对象
    function  f5(){
        console.log(navigator.userAgent);
    }
</script>
</head>
<body>
    <input type="button" value="达内" onclick="f1();" />
    <input type="button" value="刷新" onclick="f2();" />
    <input type="button" value="屏幕" onclick="f3();" />
    <input type="button" value="前进" onclick="f4();" />
    <input type="button" value="帮助" onclick="f5();" />
</body>
</html>

//demo5读写页面操作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //onload是页面加载事件,在页面加载
    //完成后自动触发,触发时调用此匿名函数.
    /* alert(1); */
    window.onload = function() {
        /* alert(2); */
        //1.读写节点
        //1.1读取节点的名称/类型.
        var p1 = document.getElementById("p1");
        console.log(p1.nodeName);
        console.log(p1.nodeType);
        //1.2读取节点的内容
        //双标签中间的文本叫内容,任何
        //双标签都有内容,如<a>达内</a>
        //1)innerHTML(含子标签)
        console.log(p1.innerHTML);
        p1.innerHTML = "1.<u>读写</u>节点";
        //2)innerText(忽略子标签)
        var p2 = document.getElementById("p2");
        console.log(p2.innerText);
        p2.innerText = "2.<u>查询</u>节点";
        //1.3读写节点的值
        //表单控件中的数据叫值,只有如下表单
        //控件才有值 :input,select,textarea
        var b1 = document.getElementById("b1");
        console.log(b1.value);
        b1.value = "anniu";
        //1.4读写节点的属性
        //1)通过方法读写属性(*)
        var img = document.getElementById("i1");
        console.log(img.getAttribute("src"));
        img.setAttribute("src","../images/IMG_20191113_114502.JPG");
        //删除属性
        img.removeAttribute("src");
        console.log(img.getAttribute("src"));
        //2)通过标准属性名读写属性(*)
        //className,id,style
        var p6 = document.getElementById("p6");
        console.log(p6.style.color);
        p6.style.color = "blue";
        //3)通过不标准属性名读写属性
        //只有高版本的浏览器才支持
        //a.href,img.src
    }
</script>
</head>
<body>
    <p id="p1">
        1.<b>读写</b>节点
    </p>
    <p id="p2">
        2.<b>查询</b>节点
    </p>
    <p id="p3">
        3.<b>删除</b>节点
    </p>
    <p>
        <input type="button" value="按钮" id="b1"/>
    </p>
    <p>
        <img alt="" src="../images/IMG_20191112_235308.JPG" id="i1" style="width:200px; height:150px;"/>
    </p>
    <p style="color:red;" id="p6">标准的属性就那么几个</p>
</body>
</html>

posted @ 2020-05-13 20:50 two_q 阅读(114) 评论(0) 收藏举报

刷新页面返回顶部

two_q

JavaScript day-03

公告