js

vue 中对城市列表根据首字母进行排序

vue中根据城市的首字母a-z进行排序先安装 js-pinyin 依赖: npm i --save js-pinyin 然后在组件中引入： import pyjs from 'js-pinyin' export default { async mounted() { let city = [ { name: '北京' }, { name: '上海' }, { name: '广州' }, { name: '武汉' }, { name: '浙江' }, { name: '海口' } ] // 城市列表 let blocks = [] // 新列表 let p, c let d = {} city.forEach(item => { p = pyjs.getFullChars(item.name).toLocaleLowerCase().slice(0, 1) c = p.charCodeAt(0) // charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。 if (c > 97 && c < 123) { // 小写的 a-z if (!d[p]) { d[p] = [] } d[p].push(item.name) } }) for(let [k, v] of Object.entries(d)) { blocks.push({ title: k.toUpperCase(), city: v }) } blocks.sort((a, b) => a.title.charCodeAt(0) - b.title.charCodeAt(0)) console.log(blocks) // 得出结果 } }

2018-12-14 11:11:34 19 0 0

阅读详情

JS原生滚动到指定元素位置

使用JS原生API Element.scrollIntoView() ；（有部分浏览器不支持） https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoView Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内。 element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // Boolean型参数 element.scrollIntoView(scrollIntoViewOptions); // Object型参数参数 alignToTop 一个Boolean值：如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。 scrollIntoViewOptions 一个boolean或一个带有选项的object： { behavior: "auto" | "instant" | "smooth", block: "start" | "end", } 如果是一个boolean, true 相当于{block: "start"}，false 相当于{block: "end"}

2018-06-12 16:38:31 30 2 0

阅读详情

paging.js插件翻页

在需要添加分页的地方添加以下html代码： <div id="page"></div> js代码： $("#page").paging({ pageNo: that.page, // 传入初始 totalPage: that.totalPage, //传入总页数 totalSize: that.pageSize, callback: function (num) { // 回调页数 // console.log(num) $.ajax({ url: `{:url('api/Details/getTeamcaselist')}?id=${that.id}`, type: "post", data: { page: num }, success: function (res) { // console.log(res) if (res.status == 200) { that.dList = res.res; } else { alert('没有数据'); } } }) } })

2018-01-16 10:42:45 10 0 0

阅读详情

js点击复制文字或链接方法

js点击复制一段文字或者链接： $('#btn').click(function(e){ let url = e.currentTarget.dataset.url; $("body").after("<textarea cols='1' rows='1' id='copyContent'>" + url + "</textarea>"); let link = document.getElementById("copyContent"); link.select(); // 选择对象 document.execCommand("Copy"); $("#copyContent").remove(); alert('复制成功'); })

2018-01-02 10:24:28 16 0 0

阅读详情

鼠标向上、向下滚动时执行事件

原理：拿当前的scrollTop和之前的scrollTop对比如果变大了，表示向下滚动（scrollTop值变大）；如果变小了，表示向上滚动（scrollTop值变小）。 $(document).ready(function(){ var p=0,t=0; $(window).scroll(function(e){ p = $(this).scrollTop(); if(t<=p){ console.log('下滚') } else{ console.log('上滚') } setTimeout(function(){t = p;},0); }); });

2017-12-22 13:58:33 10 4 0

阅读详情

文字滚动效果

在网络上找到的这个效果，核心代码： <script type="text/javascript"> function autoScroll(obj) { $(obj).find("ul").animate({ marginTop: "-39px" }, 500, function() { $(this).css({ marginTop: "0px" }).find("li:first").appendTo(this); }) } $(function() { setInterval('autoScroll(".maquee")', 3000); setInterval('autoScroll(".apple")', 2000); }) </script> 演示Demo

2017-12-21 11:20:36 9 1 0

阅读详情