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>
  • 相关阅读:
    在DevExpress程序中使用SplashScreenManager控件实现启动闪屏和等待信息窗口
    使用Setup Factory安装包制作工具制作安装包
    PostgreSQL介绍以及如何开发框架中使用PostgreSQL数据库
    在DevExpress中使用CameraControl控件进行摄像头图像采集
    读取数据库信息构建视图字段的备注信息,方便程序代码生成
    混合框架中Oracle数据库的还原处理操作
    使用图片视频展示插件blueimp Gallery改造网站的视频图片展示
    .NET缓存框架CacheManager在混合式开发框架中的应用(1)-CacheManager的介绍和使用
    在Winform界面菜单中实现动态增加【最近使用的文件】菜单项
    文字处理控件TX Text Control的使用
  • 原文地址:https://www.cnblogs.com/xiaoxiongv1/p/7891359.html
Copyright © 2011-2022 走看看