• 当前标签:JavaScript

程序开发 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 228 0 0
阅读详情

程序开发 JavaScript 使用 map() 方法对接口数据进行映射处理

为了与后端数据不进行耦合,对接口返回数据进行映射处理。 使用map() 方法处理 map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。语法参考 接口得到的数据为 res let r = res.map(item => { return { title: item.name, sex: item.sex === 1? '男':item.sex === 0?'女':'保密', age: item.age, avatar: item.img } }) 得到 r 为前端渲染数据

2018-12-13 15:27:01 112 0 0
阅读详情

程序开发 Vue、JavaScript原生 回顶部

基于图标来自 element ui ,js原生写法: <template>   <div     id="BackTop"     @click="BackTop">     <i class="el-icon-caret-top"/>   </div> </template> <script> export default {   methods: {     BackTop() {       this.smoothscroll()     },     // 回顶部     smoothscroll() {       const currentScroll =         document.documentElement.scrollTop || document.body.scrollTop       if (currentScroll > 0) {         window.requestAnimationFrame(this.smoothscroll)         window.scrollTo(0, currentScroll - currentScroll / 5)       }     }   } } </script> <style lang="scss" scoped> #BackTop {   background-color: #fff;   position: fixed;   right: 100px;   bottom: 150px;   width: 40px;   height: 40px;   border-radius: 20px;   cursor: pointer;   transition: 0.3s;   box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);   z-index: 5;   &:hover {     transform: scale(1.2);   }   i {     color: #409eff;     display: block;     line-height: 40px;     text-align: center;     font-size: 18px;   } } </style>

2018-10-18 18:10:17 97 2 0
阅读详情

程序开发 JavaScript倒计时

JS倒计时: // 倒计时  let end_time = "结束时间戳" countDown(end_time) function countDown(end_time) {     let now_time = new Date().getTime()     let times = (end_time - now_time) / 1000  // times单位为秒     if(times > 0){       day = Math.floor(times / (60 * 60 * 24));       hour = Math.floor(times / (60 * 60)) - (day * 24);       minute = Math.floor(times / 60) - (day * 24 * 60) - (hour * 60);       second = Math.floor(times) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);     }else{         $('#countDown').text(`00:00:00:00`)         return     }     if (day <= 9) day = '0' + day;     if (hour <= 9) hour = '0' + hour;     if (minute <= 9) minute = '0' + minute;     if (second <= 9) second = '0' + second;     //     // alert(day+"天:"+hour+"小时:"+minute+"分钟:"+second+"秒");     $('#countDown').text(`${day}:${hour}:${minute}:${second}`)     setTimeout(()=>{         countDown(end_time)     },1000) }

2018-07-12 18:03:10 80 1 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 299 2 0
阅读详情

程序开发 JavaScript通过 new FileReader() 获取图片base64 无组件上传图片

jQuery无组件上传图片 首先得有个form (可以不用form),再来个input: <form id="upImg">     <label for="addImg">         <i class="iconfont icon-add"></i>         <input type="file" name="pic" id="addImg" accept="image/*" src="submit.gif" alt="Submit" />     </label> </form> 再来看看 js: // 上传图片 $('#upImg').change(function (e) {     let file = e.target.files[0]; // 获取图片信息 可以从中获取图片大小     console.log(file)     let reader = new FileReader();     reader.readAsDataURL(file); // 读出 base64     reader.onloadend = function() {         // 图片的 base64 格式, 可以直接当成 img 的 src 属性值         let dataURL = reader.result; // dataURL 为图片 base64 码         // 下面逻辑处理     }; })  

2018-05-15 14:24:37 86 0 0
阅读详情

程序开发 密码框的明密文(显示和隐藏) 显示

做密码输入框经常使用点击显示密码功能, <input id="password" class="layui-input" autocomplete="off" maxlength="15" name="password" required="" type="password" placeholder="密码为6-15位非纯数字" /> <i id="passwordeye" class="icon iconfont icon-yincangmima"></i> 图标点击js: $('#passwordeye').click(switchPwd()); function switchPwd() {     var passwordeye = $('#passwordeye');     var showPwd = $("#password");     passwordeye.off('click').on('click',function(){         if(passwordeye.hasClass('icon-yincangmima')){             passwordeye.removeClass('icon-yincangmima').addClass('icon-xianshimima');//密码可见             showPwd.prop('type','text');         }else{             passwordeye.removeClass('icon-xianshimima').addClass('icon-yincangmima');//密码不可见             showPwd.prop('type','password');         };     });  }

2018-01-11 17:11:03 137 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 88 0 0
阅读详情
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 8
前往