zoukankan      html  css  js  c++  java
  • 11.24 js点击倒计时 / 鼠标拖动

    DOM节点查找
    children 子节点,不包含空节点
    childNodes 子节点,包含空节点
    firstChild 第一个子节点,包含空节点
    fristElementChild 第一个子节点,不包含空节点
    lastChild 最后一个子节点,包含空节点
    lastElementChild 最后一个子节点,不包含空节点
    parentNode 父节点
    offsetParent 根据position去定位,如果没有 body
    nextSibling 下一个兄弟节点,包含空节点
    nextElementSibling 下一个兄弟节点,不包含空节点
    previousSibling 前一个兄弟节点,包含空节点
    previousElementSibling 前一个兄弟节点,不包含空节点

    事件
    onload 图片或加载完成
    onerror 图片加载失败
    onfocus 获得焦点
    onblur 失去焦点
    onchange 表达内容 发送改变
    onclick 点击
    ondblclick 点击两次
    onkeydown 键盘按下
    onkeyup 键盘抬起
    兼容处理 var event =event||window.event
    键盘event对象属性 keyCode
    onmousedown 鼠标按下
    onmouseup 鼠标抬起
    onmousemove 鼠标移动
    onmouseover 移到对象上
    onmouseout 鼠标离开
    鼠标event对象属性 clientX clientY

    案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    *{
    margin:0;
    padding:0;
    }
    #box{
    100px;
    height: 100px;
    background: red;
    cursor: move;
    position: fixed;
    top: 100px;
    left: 100px;
    color: #fff;
    }
    </style>
    <script>
    window.onload=function () {
    //js鼠标拖动
    var box =document.getElementById('box');
    box.onmousedown=function(event){
    var event = event || window.event;
    var left = event.clientX -50;
    var top = event.clientY -50;
    box.style.left= left+'px';
    box.style.top= top+'px';
    box.onmousemove = function (event) {
    var event = event || window.event;
    var left = event.clientX -50;
    var top = event.clientY -50;
    box.style.left= left+'px';
    box.style.top= top+'px';
    }
    };
    box.onmouseout = function () {
    box.onmousemove =function () {
    return;
    }
    };
    box.onmouseup = function () {
    box.onmousemove =function () {
    return;
    }
    };

    var ipt = document.getElementById('ipt');
    ipt.onfocus=function () {
    console.log('focus:'+ipt.value);
    };
    ipt.onblur = function(){
    console.log('blur:'+ipt.value)
    };
    ipt.onchange = function () {
    console.log('change:'+ipt.value)
    };

    //d倒计时
    var btn = document.getElementById('btn');

    var num = ipt.value;
    btn.onclick = function(){
    function count1(num) {
    count=setInterval(function () {
    ipt.value=num;
    num--;
    if(num == -1){
    clearInterval(count)
    }
    },1000);
    }
    count1(num)
    };
    var btn2=document.getElementById('btn2');
    var ipt2 = document.getElementById('ipt2');
    btn2.onclick = function() {
    if(ipt2.value > 0){
    ipt2.value--;
    }else{
    ipt2.value=10;
    }
    }
    }

    </script>
    </head>
    <body>
    <div id="box">
    xxxx
    </div>
    <input type="text" value="10" id="ipt">
    <button id="btn">刷新</button>
    <br/>
    <input type="text" value="10" id="ipt2">
    <button id="btn2">点击</button>
    </body>
    </html>
  • 相关阅读:
    char类型细节
    Hibernate面试题
    线程
    IO流
    集合
    链表相关的一点东西
    正则表达式学习
    python中的变量域问题
    python的输出和输入形式
    python mutable 和 immutable
  • 原文地址:https://www.cnblogs.com/xiaoxiongv1/p/7891359.html
Copyright © 2011-2022 走看看