2017-3-31 操作属性定时器操作内容操作相关元素元素创建添加删除

Posted 2020-09-07 青年a

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2017-3-31 操作属性定时器操作内容操作相关元素元素创建添加删除相关的知识，希望对你有一定的参考价值。

（一）操作属性

1.对象.setAttribute（‘属性名‘,‘属性值‘）; --- 添加属性

　　例子：把所有class为div的，字体改为30px；

　　　　　　var a document.getElementById(‘div‘);

　　　　　　for(var i=o;i<a.length;i++){

　　　　　　　　a[i].setAttribute(‘style‘,‘font-size=30px‘);或者用a[i].style.fontSize=‘30px‘;

　　　　　　}

2.对象.getAttribute(‘属性名‘); - 获取属性值，如无此属性，那么返回null

3.对象.removeAttribute(‘属性名‘); - 移除属性

　　例子1：设置2个按钮，第一个不能点击，点击第二个，解锁第一个，可以点击

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <input type="button" value="第一个按钮" disabled="disabled" id="but1"/>
    <input type="button" value="第二个按钮"  id="but2"/>
</body>
</html>
<script type="text/javascript">
    document.getElementById(‘but2‘).onclick = function () {
        var a = document.getElementById(‘but1‘);
        a.removeAttribute(‘disabled‘);
    }

</script>

　　例子2.判断2个数的和是否正确

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    5+5
    <input type="text" da="10" id="text1" value=""/>
    <input type="button" id="but1" value="验证"/>
</body>
</html>
<script type="text/javascript">
    var a = document.getElementById(‘but1‘);
    var b = document.getElementById(‘text1‘);
    a.onclick = function () {
        //alert(b.value);
        //alert(b.getAttribute(‘da‘));
        if (b.value == b.getAttribute(‘da‘)) {
            alert(‘正确‘);
        } else {
            alert(‘错误‘);
        }
    }
</script>

（二）定时器

1.window.setTimeout(function(){},间隔时间毫秒);

　　定时触发，延迟执行，只能执行一次

2.window.setInterval(function(){},间隔时间毫秒);

　　无限循环，每次都有间隔时间，一般大于20毫秒，有返回值，可以用变量来接受这个定时器的对象

3.window.clearInterval(要关闭的定时器对象);

　　执行停止定时器的执行

　　例子：用定时器制作简单的动画

　　一个按钮，一点击，按钮会往屏幕右边移动，离屏幕左边500px的时候停止

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style>
        #but1 {
            position:absolute;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <input type="button" id="but1" value="请点击开始"/>
</body>
</html>
<script type="text/javascript">
    var a = document.getElementById(‘but1‘);
    a.onclick = function () {
        var aa = window.setInterval(function () {
            if (a.offsetLeft > 500) {//如果当前元素距离左边的距离超过500px；就会执行停止条件
                window.clearInterval(aa);
            }
            a.style.left = a.offsetLeft + 10 + ‘px‘;//每循环一次，a标签距离左边的距离等于它本身距离左边的距离加上10
        }, 20);
        
    }
</script>