数据可视化（BI报表的开发）第四天

练习题：

先找出字符串 ‘8587263747153203552943982’ 中出现次数最多的数字及次数，然后去重后并排序（不准使用sort），使得到结果为 ‘0123456789’。

要求1：找到出现最多的数字和出现的次数

// 1、找出出现次数最多的数字，出现了几次// 思路：{数字:次数}{8:2,5:2,7:1}，把数字当做对象键，值统计累加// 定义了一个空对象，往里面保存内容var obj = {};// 遍历：可以和数组一毛一样for (var i = 0; i < str.length; i++) {// str[i]：吧这个当做对象的属性名// 如果obj对象有了这个属性，那么就让其值加加，// 如果没有这个属性，就给obj这个对象添加上这个属性，并且值是1if (obj[str[i]]) {obj[str[i]]++;} else {obj[str[i]] = 1;}}console.log( obj );// 现在obj对象已经吧字符统计出来了var max = 0;// max就是假设值最大值（最多次数）var num = 0;// 出现最多次数的数字// 遍历对象for (key in obj) {// obj = {2 ：3}if (max < obj[key]) {max = obj[key];// 最多次数num = key;}}// console.log( '出现最多的是' + num + '次数是' + max );for (key in obj) {if (obj[key] == max) {console.log(key);}}

要求2：去除字符串中重复的数字

要求3：对去重后的字符串排序

var str = '8587263747153203552943982';// 2、吧字符串重复的去除// console.log( str.indexOf('a') );// 查找首次出现的索引位置，如果找到返回索引值，找不到返回-1var newStr = '';// 思路：把str每个字符遍历出来，遍历出来之后在newStr里面去查找有木有，// 如果木有我们就给newStr连接上这个新的字符就可以for (var i = 0; i < str.length; i++) {// 如果newStr里面没有str[i]，就给newStr连接上这个新的即可if ( newStr.indexOf(str[i]) == -1 ) {newStr = newStr + str[i];}}console.log( newStr );// 3、去除重复的字符之后，排序var arr = newStr.split('');// console.log(arr);for (var i = 0; i < arr.length; i++) {for (var j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j+1]) {var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}}console.log( arr.join('') );

核心知识点

touch事件（touchstart、touchmove、touchend）
touchEvent 事件对象
transitionend事件

1. touch事件类型

移动设备上无法使用鼠标，当手指触碰屏幕时会触发 click、mousedown、mouseup 事件。

但是，touch事件要比鼠标事件执行效率高，用户体验好。

注意：以下事件必须通过事件监听注册

事件添加：

元素.onclick = function () {}

元素.addEventlistener(‘click’,function (){});

touchstart，手指按下事件
touchmove，手指移动事件
touchend，手指松开事件

	// 手指按下document.addEventListener('touchstart', function () {console.log('手指按下');});// 手指移动document.addEventListener('touchmove', function () {console.log('手指移动');});// 手指抬起document.addEventListener('touchend', function () {console.log('手指抬起');});


```js
<script type="text/javascript">// touch事件对象document.addEventListener('touchstart', function (e) {// console.log( e );// 屏幕手指列表console.log( e.touches[0] );// 元素上的手指列表console.log( e.targetTouches[0] );// 改变的手指列表console.log( e.changedTouches[0] );});// touchenddocument.addEventListener('touchend', function (e) {// 屏幕手指列表console.log( e.touches[0] );// 元素上的手指列表console.log( e.targetTouches[0] );// 改变的手指列表console.log( e.changedTouches[0] );});</script>

## 2. touch事件对象+ 常见的属性> 1. 事件对象.touches ：位于屏幕上的所有手指的列表；> 2. 事件对象.targetTouches ：位于该元素上的所有手指的列表；> 3. 事件对象.changedTouches：被改变的手指列表。  touchstart时包含刚与触摸屏接触的触点，touchend时包含离开触摸屏的触点>> touches和targetTouches必须是在屏幕上，而changedTouches可以获取离开屏幕的手指的>+ 手指的位置> 1. 手指对象.clientX/Y 手指相对于可视区域> 2. 手指对象.pageX/Y 手指相对于文档>> **注意：手指对象.clientX/Y 使用较多**

document.addEventListener(‘touchstart’, function (e) {
// 打印手指位置
// 手指对象
console.log( e.touches[0].clientX, e.touches[0].clientY );
console.log( e.touches[0].pageX, e.touches[0].pageY );
});


## 3.常见的手势> 	注意：以下手势的实现是在touch事件基础上。我们不需要自己实现以下所有手势，有专门的第三方可以直接拿来使用。
>
> 	以下手势仅仅是了解。

在这里插入图片描述

案例：

模拟tap手势（点击）

// 两个事件：手指按下，手指松开
// 如果是点击：手指按下的x和y位置，和手指松开的x和y位置是相同
// 手指按下
var startx,starty;
document.addEventListener(‘touchstart’, function (e) {
// 获取x和y
startx = e.touches[0].clientX;
starty = e.touches[0].clientY;
});

	// 手指松开document.addEventListener('touchend', function (e) {var endx = e.changedTouches[0].clientX;var endy = e.changedTouches[0].clientY;// 松开的时候判断if (startx == endx && starty == endy) {console.log('点击');} else {console.log('滑动');}});


模拟flick手势（轻滑）

var startxdocument.addEventListener('touchstart', function (e) {startx = e.touches[0].clientX;});// 松开document.addEventListener('touchend', function (e) {var endx = e.changedTouches[0].clientX;// 判断if (startx < endx) {console.log('右滑');} else if (startx > endx) {console.log('左滑');}});


移动端京东轮播图上午回顾：	touch事件类型：touchstart，touchmove，touchend	touch事件对象：e.touches，e.targetTouches，e.changedTouches	手指位置：e.touches[0].clientX/clientY	transitionend事件：谁有过度效果添加给谁## 4. transitionend事件

谁有过渡效果，这个事件添加给谁【事件监听】


> css中过渡结束后检测的行为
>
> 谁有过渡属性，把这个事件加给谁

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">div {width: 100px;height: 100px;background: red;/*transition: all 2s linear;*/}</style>
</head>
<body><input type="button" value="点击"><div></div>

	<script type="text/javascript">var btn = document.querySelector('input');var div = document.querySelector('div');btn.onclick = function () {div.style.width = '600px';div.style.height = '600px';div.style.transition = '2s';}div.addEventListener('transitionend', function () {div.style.background = 'blue';div.style.transition = 'none';});</script>