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;//获取点击目标的idvar 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.2ding = 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>

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

前端学习（936）：缓动动画原理
JS学习笔记之PC端网页特效 4.30
1 元素偏移量 offset offset 翻译过来就是偏移量, 我们使用 offset 系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小 ...
【JavaScript】缓动动画、网页轮播图
缓动动画动画函数封装 1.1 动画实现原理缓动动画 1.1 缓动效果原理 1.2 动画函数多个目标值之间移动 1.3 动画函数添加回调函数 1.4 动画函数封装到单独JS文件里面案例:京东侧边栏 ...
html 流程控制,HTML5独家分享：原生JS学习笔记2——程序流程控制
当当当当 .....楼主又来了!新一期的js学习笔记2--程序流程控制更新了! 想一键获取全部js学习笔记的可以给楼主留言哦! js中的程序控制语句常见的程序有三种执行结构: 1.顺序结构 2.分支 ...
Vue.js学习笔记 2022 04 17
Vue.js学习笔记 1 Vue.js基础 Vue.js介绍 vuejs 渐进式 JavaScript 框架 Vue.js 如何应用 1 在普通html项目中,引入VUE.JS Hb 的项目生成的 ...
ArcGIS JS 学习笔记4 实现地图联动
原文:ArcGIS JS 学习笔记4 实现地图联动 1.开篇守望屁股实在太好玩了,所以最近有点懒,这次就先写个简单的来凑一下数.这次我的模仿目标是天地图的地图联动. 天地的地图联动不仅地图有联动,而 ...
node.js学习笔记
# node.js学习笔记标签(空格分隔): node.js---## 一内置模块学习 ### 1. http 模块 ``` //1 导入http模块 const http =require('ht ...
基于jquery的插件turn.js学习笔记
基于jquery的插件turn.js学习笔记简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...
Node.js学习笔记8
Node.js学习笔记8 HTTP服务器与客户端 Node.js的http模块,封装了一个高效的HTTP服务器和一个简易的HTTP客户端 http.server是一个基于事件的HTTP服务器,核心由N ...