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:获取选中内容并通过微博分享


<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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动动画2title>
    <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:动态设置元素属性


<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>

你可能感兴趣的:(js学习笔记(获取选中内容、缓动动画、动态设置元素属性))