100字范文 > 数据可视化（BI报表的开发）第四天

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

时间：2023-10-19 23:34:24

相关推荐

数据可视化（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：对去重后的字符串排序

核心知识点

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，touchendtouch事件对象：e.touches，e.targetTouches，e.changedTouches手指位置：e.touches[0].clientX/clientYtransitionend事件：谁有过度效果添加给谁## 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>