js学习笔记（获取选中内容、缓动动画、动态设置元素属性）

57 阅读 0 评论 38 点赞

我是靠谱客的博主耍酷毛巾，最近开发中收集的这篇文章主要介绍js学习笔记（获取选中内容、缓动动画、动态设置元素属性），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

获取选中内容

1.标准浏览器
window.getSelection()拿到的是对象
window.getSelection().toString()拿到的是选中的文字
2.ie获取选中文字
document.getSelection().createRange().text
3.兼容性写法

if (window.getSelection){  //标准浏览器
                text = window.getSelection().toString();
            }else{              //ie系列
                text = document.getSelection().createRange().text;
            }

特效1：获取选中内容并通过微博分享

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        p{
            position: relative;
            margin: 100px;
            width: 300px;
            left: 30%;
        }
        #weibo{
            width: 26px;
            height: 26px;
            background-image: url("image/share.gif");
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
<p id="word">

    草莓布丁是一种很多人都喜欢吃的美食，那么如何做草莓布丁才好吃呢？关于这个问题，小编就和大家
    分享一下我的经验，希望能够帮助到大家。如果大家喜欢小编的文章，记得关注小编并转发哦！谢谢大家！”
    首先将棉花糖、QQ糖和牛奶一起倒入一个碗中，如下图所示。
    然后放入锅中隔水融化，如下图所示。
    接着放入我们喜欢吃的草莓，如下图所示。然后放入冰箱冷藏四个小时，拿出来切成我们喜欢吃的大小就可以了。
    一道美味可口的草莓布丁就做好了，希望大家能够喜欢。你学会了吗？赶快动手试一试吧。如果大家对小编的做
    有什么好的建议或者是不同的看法，欢迎大家给小编留言，谢谢大家。记得关注小编，转发小编的作品。小编将一如
    既往的给大家提供美食教程，你的支持将是小编创作最大的动力。
</p>
<div id="weibo">
</div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var Stext = '';
        //监听鼠标松开
        Tool.$('word').addEventListener('mouseup',function (ev1) {
            var e = ev1 || window.event;
            //获取选中文字

            if (window.getSelection){  //标准浏览器
                Stext = window.getSelection().toString();
            }else{              //ie系列
                Stext = document.getSelection().createRange().text;
            }
            //显示微博图标
            if (Stext.length !== 0 ){
                Tool.$('weibo').style.display = 'block';
                //处理微博图片的位置
                Tool.$('weibo').style.left = e.pageX + 'px';
                Tool.$('weibo').style.top = e.pageY + 'px';
            }
        });
        //监听文档的区域（除去word）
        document.addEventListener('mousedown',function (ev2) {
            var e = ev2 || window.event;
            //获取点击目标的id
            var Id = e.target ? e.target.id : e.srcElement.id;
            //判断
            if (Id !== 'weibo'){
                Tool.$('weibo').style.display = 'none';
            } else{
                //跳转
                window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + Stext + ' ' +
                    '&url=https://www.csdn.net/'
            }
        })
    })
</script>
</body>
</html>

特效2：缓动动画2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画2</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>
<body>
<!--缓动：由快到慢-->
<button id="btn">往右走</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    window.addEventListener('load',function (ev) {
        var ding = null, target = 800, step = 0, box = Tool.$('box');
        Tool.$('btn').addEventListener('click',function () {
            clearInterval(ding);
            //begin = begin +(end - begin) * 0.2
            //步长就是(end - begin) * 0.2
            ding = setInterval(function () {
                step = (target - box.offsetLeft) * 0.2;
                step = Math.ceil(step);//因为缓动系数是小数，step最终无法到800，所以要向上取整
                box.style.left = box.offsetLeft + step + 'px';
                box.innerText = box.offsetLeft;
                if (box.offsetLeft === target){
                    clearInterval(ding);
                }
            },20)
        })
    })
</script>
</body>
</html>

js访问css属性

1.点语法box.style.left
跟在style后面的属性不能由外面传入

var h = 'height';
box.style.h = 300 + 'px';

就没有将height设置成300px，是错误的
2.下标语法box.style[left]
这种语法的好处就是可以动态的传递参数作为属性

var h = 'height';
box.style[h] = 300 + 'px';

可以将height设置成300px，是正确的

特效3：动态设置元素属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态设置元素属性</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>

</head>
<body>
<button id="btn1">改变颜色</button>
<button id="btn2">改变长度</button>
<div id="box"></div>
<script src="工具/Tool.js"></script>
<script>
    Tool.$('btn1').addEventListener('click',function () {
        changeCSS(Tool.$('box'),'background','green');
    });
    Tool.$('btn2').addEventListener('click',function () {
        changeCSS(Tool.$('box'),'width','1000px');
    });

    /**
     * 改变css的样式
     * @param ele  要改变的目标元素
     * @param attr 目标元素要改变的css样式
     * @param value   改变后的样式
     */
    function changeCSS(ele, attr, value) {
        //ele.style.attr = value;  错误，.arrt就直接是arrt，并不是传进来的样式
        ele.style[attr] = value;//正确
    }
</script>
</body>
</html>