案例一.点击按钮，选中input中的全部内容

select（）方法：选中全部。

点击按钮选中输入框中的内容！！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        input,

        button{

            margin: 0;

            padding: 0;

            outline: none;

        }

        input{

            width:200px;

            height:40px;

            border:1px solid black;

            font-size: 20px;

        }

        button{

            width: 300px;

            line-height: 40px;

            vertical-align: top;

        }

    </style>

</head>

<body>

    <input type="text">

    <button>点击此按钮选中input的全部内容</button>

    <script>

        var input=document.getElementsByTagName("input")[0];

        var button=document.getElementsByTagName("button")[0];

        button.onclick=function () {

            input.select();

        }

    </script>

</body>

</html>

案例二.点击按钮，选中input中的全部内容，并复制到粘贴板上。

document.execCommand("copy");//复制到粘贴板上。

点击按钮，选中并复制到粘贴板上，点击查看效果以及代码

<body>

<input type="text">

<button>点击此按钮选中input的全部内容</button>

<script>

    var input=document.getElementsByTagName("input")[0];

    var button=document.getElementsByTagName("button")[0];

    button.onclick=function () {

        input.select();//选中input的所有内容

        document.execCommand("copy");//复制到粘贴板上

    }

</script>

</body>

事件对象

事件：当用户对页面进行操作的交互时，会触发对应元素的事件。
事件对象：

        event

            当发生事件，执行事件处理函数的时候，该时刻的详细信息。

        注意：如果函数是直接调用的，则没有事件对象

        注意：不同事件中的event对象可能有不同

举例说明：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style>

    #box{

        width:100px;

        height:100px;

        background-color:red;

    }

</style>

</head>

<body>

<div id="box"></div>

<script>

    var box = document.getElementById("box");

//    box.onmouseover = fn;//打印undefined

//    box.onmousedown = fn;//打印undefined

    document.onkeydown = fn;//打印按下的键值

//    fn();//报错

    function fn(){

//        console.log( typeof event );

        console.log( event.keyCode );

    }

</script>

</body>

</html>

案例三：模拟苹果电脑菜单

点击查看效果以及代码！！！！

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        body{

            margin: 0;

            padding: 0;

        }

        .wrap{

            border:1px solid black;

            position: absolute;

            bottom:100px;

            text-align: center;

            width: 100%;

        }

        .wrap  div{

            width: 100px;

            height: 100px;

            background: cornflowerblue;

            display: inline-block;

            vertical-align: bottom;

        }

    </style>

</head>

<body>

    <div class="wrap">

        <div></div>

        <div></div>

        <div></div>

        <div></div>

        <div></div>

    </div>

    <script>

        var wrap=document.getElementsByClassName("wrap")[0];

        var divs=wrap.getElementsByTagName("div");

        document.onmousemove=function () {

            for(var i=0;i<divs.length;i++){

                calc( divs[i],event);

            }

        }

        function calc( obj,mouseEvent ){

            var objPos = {

                //offsetLeft：相对于最近定位父级定位元素

                x: obj.offsetLeft + 50,

                //obj.getBoundingClientRect().top：距离文档顶部位置

                y: obj.getBoundingClientRect().top + 50

            }//元素中心点坐标

            var mosPos = {

                x: mouseEvent.clientX,

                y: mouseEvent.clientY

            }//鼠标所在位置

            var dis = Math.sqrt( Math.pow( objPos.x-mosPos.x,2 ) + Math.pow( objPos.y-mosPos.y,2 ) );

            var scale = 1;

            //当鼠标离原点中心距离小于200时，则放大

            if( dis < 200 ){

                scale = (200 - dis) / 200 + 1;

            }

            obj.style.width = 100 * scale + "px";

            obj.style.height = 100 * scale + "px";

        }

    </script>

</body>

</html>

JS基础入门篇（二十）—事件对象以及案例（二）的更多相关文章

  1. JS基础入门篇（十八）—日期对象

    1.日期对象 日期对象: 通过new Date()就能创建一个日期对象,这个对象中有当前系统时间的所有详细信息. 以下代码可以获取当前时间: <script> var t = new Da ...

  2. JS基础入门篇（十二）—JSON和Math

    1.JSON JSON: 对象格式的字符串 轻量的数据传输格式 注意事项: 键名 需要 使用 双引号 包起来 JOSN有两个方法:JSON.parse和 JSON.stringify. JSON.pa ...

  3. JS基础入门篇（四十三）—ES6（二）

    1.对象简洁表示法 原来写法 var name = "lzf"; var gender = "male"; var fn = function(){consol ...

  4. JS基础入门篇（十）— 数组方法

    1.join 作用: 将数组通过指定字符拼接成字符串.语法: string arr.join([separator = ',']);参数: separator可选,如果省略的话,默认为一个逗号.如果 ...

  5. JS基础入门篇（三十五）—面向对象（二）

    如果没有面向对象这种抽象概念的小伙伴,建议先看一下我写的JS基础入门篇(三十四)-面向对象(一)

  6. JS基础入门篇（二十七）—BOM

    虽然上次写到js基础篇(二十四),这次直接写到(二十七).是为了提醒自己中间有几篇没写.特此说明一下啊. 1.window.open() 使用a标签呢,点击一下a标签页面才会跳转,有时候我们需要做的操 ...

  7. JS基础入门篇（三十六）—面向对象（ 三 ）

    1.class class es6 中 为 关键字用来声明 一个 类 1.只能通过new调用 2.不存在变量提升 3.多个方法之间直接书写,不需要,隔开 4.类的方法是直接定义在类的原型上的 5.定义 ...

  8. JS基础入门篇（二十四）—DOM（下）

    1.offsetLeft/offsetTop offsetLeft/offsetTop : 到定位父级节点的距离. <!DOCTYPE html> <html lang=" ...

  9. JS基础入门篇（二十四）—DOM（上）

    1.常用的节点类型,nodeType,attributes,childNodes. 1.元素节点 - 1 2.属性节点 - 2 3.文本节点 - 3 4.注释节点 - 8 5.文档节点 - 9 查看节 ...

随机推荐

  1. 吴裕雄--天生自然python机器学习：使用朴素贝叶斯过滤垃圾邮件

    使用朴素贝叶斯解决一些现实生活中 的问题时,需要先从文本内容得到字符串列表,然后生成词向量. 准备数据:切分文本 测试算法:使用朴素贝叶斯进行交叉验证 文件解析及完整的垃圾邮件测试函数 def cre ...

  2. 染色dp（确定一行就可行）

    题:https://codeforces.com/contest/1027/problem/E 题意:给定n*n的方格,可以染黑白,要求相邻俩行”完全“不同或完全相同,对于列也是一样.然后限制不能拥有 ...

  3. 自定义控件 监控宿主activity的生命周期

    使用不显示的fragment来监控activity生命周期,fragment生命周期基本上跟随宿主activity变化.我们通过fragment的生命周期就可以知到activity的生命周期 我们自定 ...

  4. POJ3276 Face The Right Way 开关问题

    ①每个K从最左边进行考虑 ②f[i]=[i,i+k-1]是否进行反转:1代表是,0代表否 ③∑ (i)(i=i+1-K+1) f[j]=∑ (i-1)(i=i-K+1) f[j]+f[i]-f[i-K ...

  5. 三角插值的 Fourier 系数推导

    给定 $k$ 个互不相同的复数 $x_0,\cdots,x_{k-1}$,以及 $k$ 个复数$y_0,\cdots,y_{k-1}$.我们知道存在唯一的复系数 $k-1$ 次多项式$$\mathca ...

  6. 实战_2：eclipseRCP项目结构

    RCP项目目录结构如下: src: java源码目录 bin:class文件目录 JRE System Library: 系统类库依赖,主要是JDK,JRE相关的 Plugin-in Dependen ...

  7. 用Excel做数据分析常用函数（数据清理、关联匹配……）

    本文总结在使用Excel进行数据分析时,最常用的功能和函数. Excel的功能和函数非常多,用进废退,除了学习基本的函数和功能,最重要的是遇到问题可以快速的搜索并解决. 首先Excel可以处理的数据量 ...

  8. tomcat启动不了的问题

    tomcat启动的几个问题 1.端口冲突 2.非端口冲突,需要加入配置host文件 日志文件: 解决办法:https://blog.csdn.net/u012949658/article/detail ...

  9. $random 函数用法

    $random函数调用时,返回一个32位的随机数,它是一个带符号的整形数.如下例: reg[23:0] rand; rand = $random % 60; //产生一个在 -59~59 范围的随机数 ...

  10. IDEA无法启动：Failed to create JVM：error code -1

    转自:https://blog.csdn.net/u013243986/article/details/52296944 随便设置把内存加大了, 结果idea就奔溃了,再打开时就提示这样的错误,Fai ...