js的一些操作

又是非常不困的一天啊啊啊啊啊啊啊啊啊啊

正则表达式：

var name = document.getElementById("name");
            var testname = /^[\u4e00-\u9fa5]{2,4}$/;//开头结尾要有^和$
            if (testname.test(name.value)) {
                name.style.border = "1px solid green";
            }else{
                name.style.border = "1px solid red";
            }
            console.log(testname.test(name.value));

正则0-150： var reg=/(^1?[0-4]?[0-9]?\.[0-9]$)|(^150.0$)/;

事件绑定：

1、

document.getElementById("main").addEventListener("click",function () {
            console.log("aaa");
        })

2、

 document.getElementById("main").onclick = function (event) {
            console.log("aaa");
        }

3、html中属性绑定

cancelBubble的作用是用来阻止浏览器默认的事件冒泡行为

document.getElementById("main").onclick = function () {
    console.log(f);
}
document.getElementById("item").onclick = function (event) {

    console.log(z);
    event.cancelBubble = true;
}

坐标捕捉

document.getElementById("main").onclick = function (event) {
        console.log(event);
        var x = event.clientX;
        var y = event.clientY;
        document.getElementById("main").innerText = "("+x +"," + y +")";
    }

采用事件绑定event，输出改变其文本内容

  var ballx = 0;
    var bally = 0;
    var ball = document.createElement("div");//生成标签
    ball.id = "ball";
    document.getElementById("main").appendChild(ball);
    var inter = setInterval(function () {
        ball.style.left =ballx++ + "px";
        ball.style.top = bally++ + "px";
        if (ballx >400 ||bally>400){
            console.log("游戏结束");
        }
    },100);
    document.getElementById("main").onclick = function (event) {
        console.log(event);
        var x = event.clientX;
        var y = event.clientY;
        if (x<(ballx+10) && x>ballx && y>bally && y<(bally+10)){
            alert("ok!");                 //浏览器弹窗
            clearInterval(inter);        //清除定时器的影响
        }
    }

dom操作：setAttribute，getAttribute，removeAttribute

       var main = document.getElementById("main");
        var item = document.getElementById("item");

        console.log(item.setAttribute("id","abc"));
        console.log(main.setAttribute("id","haode"));

        console.log(item.getAttribute("class"));

        console.log(item.removeAttribute("name"));