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>
  • 相关阅读:
    c# 三种取整方法 向上取整 向下取整 四舍五入
    Lambda表达式对DataRow处理
    Dapper数据库字段和model属性映射
    union limit
    北邮五十题
    搜索____深搜 学易错点
    动态规划____有重叠子问题的搜索,都可以转为记忆化搜索
    64位 __int 与 long long写法
    做做 卡特兰数 与 卡米歇尔数
    vector 有点麻烦啊 能简单点么?
  • 原文地址:https://www.cnblogs.com/xiaoxiongv1/p/7891359.html
Copyright © 2011-2022 走看看