練習(xí)題：

先找出字符串 ‘8587263747153203552943982’ 中出現(xiàn)次數(shù)最多的數(shù)字及次數(shù)，然后去重后并排序（不準(zhǔn)使用sort），使得到結(jié)果為 ‘0123456789’。

要求1：找到出現(xiàn)最多的數(shù)字和出現(xiàn)的次數(shù)

// 1、找出出現(xiàn)次數(shù)最多的數(shù)字，出現(xiàn)了幾次// 思路：{數(shù)字:次數(shù)}{8:2,5:2,7:1}，把數(shù)字當(dāng)做對象鍵，值統(tǒng)計累加// 定義了一個空對象，往里面保存內(nèi)容var obj = {};// 遍歷：可以和數(shù)組一毛一樣for (var i = 0; i < str.length; i++) {// str[i]：吧這個當(dāng)做對象的屬性名// 如果obj對象有了這個屬性，那么就讓其值加加，// 如果沒有這個屬性，就給obj這個對象添加上這個屬性，并且值是1if (obj[str[i]]) {obj[str[i]]++;} else {obj[str[i]] = 1;}}console.log( obj );// 現(xiàn)在obj對象已經(jīng)吧字符統(tǒng)計出來了var max = 0;// max就是假設(shè)值最大值（最多次數(shù)）var num = 0;// 出現(xiàn)最多次數(shù)的數(shù)字// 遍歷對象for (key in obj) {// obj = {2 ：3}if (max < obj[key]) {max = obj[key];// 最多次數(shù)num = key;}}// console.log( '出現(xiàn)最多的是' + num + '次數(shù)是' + max );for (key in obj) {if (obj[key] == max) {console.log(key);}}

要求2：去除字符串中重復(fù)的數(shù)字

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

var str = '8587263747153203552943982';// 2、吧字符串重復(fù)的去除// console.log( str.indexOf('a') );// 查找首次出現(xiàn)的索引位置，如果找到返回索引值，找不到返回-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、去除重復(fù)的字符之后，排序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事件類型

移動設(shè)備上無法使用鼠標(biāo)，當(dāng)手指觸碰屏幕時會觸發(fā) click、mousedown、mouseup 事件。

但是，touch事件要比鼠標(biāo)事件執(zhí)行效率高，用戶體驗好。

注意：以下事件必須通過事件監(jiān)聽注冊

事件添加：

? 元素.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 手指相對于可視區(qū)域> 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.常見的手勢> ? 注意：以下手勢的實現(xiàn)是在touch事件基礎(chǔ)上。我們不需要自己實現(xiàn)以下所有手勢，有專門的第三方可以直接拿來使用。 > > ? 以下手勢僅僅是了解。

案例：

模擬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事件

誰有過渡效果，這個事件添加給誰【事件監(jiān)聽】

> css中過渡結(jié)束后檢測的行為 > > 誰有過渡屬性，把這個事件加給誰

``

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

Swiper 輪播圖插件（手機移動端插件網(wǎng)）

目標(biāo)

使用 swiper 快速實現(xiàn)輪播圖效果

概念

Web 插件：就是別人封裝好的一個 js 代碼 或 css代碼，可以直接拿來用。

Swiper 就是一個輪播圖的插件，由其他團隊寫好的，開源免費，全世界開發(fā)者都可以使用。

Swiper插件官網(wǎng)： https://www.swiper.com.cn/

1、下載并且引入CSS文件和JS文件

2、復(fù)制內(nèi)容

3、設(shè)置大小（可以不設(shè)置）

4、復(fù)制功能代碼

zeptojs（手機移動端插件網(wǎng)）：

https://www.html.cn/doc/zeptojs_api/

總結(jié)

以上是生活随笔為你收集整理的数据可视化（BI报表的开发）第四天的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。