大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

环绕按钮动画———原生javascript手作

环绕按钮动画———原生javascript手作 前端入坑纪 58 今天来分享昨天和小伙伴聊到的一个效果 好,详解如下! OK,first things first! 点我查看实际效果 集齐7颗召唤神龙吧,骚年 HTML 结构 B1 B2 B3 B4 B5 B6 B7 ROT 所有的按钮都是包裹在div.roller 里,div.roller 的底色与底部条颜色相同,以制造凸的效果 CSS 结构 html, body { margin: 0; z-index: 99; transform: translateX(-50%) } .

给我一首诗的时间

给我一首诗的时间 前端入坑纪 59 今天来分享最简单版打字机效果 好,详解如下! OK,first things first! 点我查看实际效果 诗仙,你好 HTML 结构 通过canvas里面来模拟打字的效果,所以一个canvas容器是必须的 CSS 结构 html,body { margin: 0; font-size: 0; j = 0 } }else{ clearInterval(tik) } }, 170);

论省略号...的4种写法

line-height: 20px;prg2 { display: -webkit-box;prg3的省略号,是目前比较合理的。javascript的方式,灵活简便,唯独增加了些许js的代码量。毕竟不是使用的css属性。 JavaScript 结构 // 立即执行函数,将shortLine函数挂到window上,这样就可以直接调用了 (function (w) { var shortLine = function (pragrafsClass, number) { // 获取需要展现省略号的那些段落的class元素 var prgs = document.getElementsByClassName(pragrafsClass);

如何用VUE写一个多用模态框组件模版

display: flex; z-index: 12; letter-spacing: 0.4rem;blueBackground{ background: #21A6DF;redBackground{ background: #FF4046;modal-fade-leave-active{ opacity: 0;新建一个index.js文件,在其中全局引入组件,全局引入之后,就不用在每个调用的组件里面单独引入了,可以直接使用 import Modalfrom "./Modal.vue"; this.blue = this.$refs.Model.blue this.red = this.$refs.Model.red }, closeModal(){ this.isModalVisible = false }, confirm(){ console.log(11111111111);

ES6几个好用的字符串操作方法

ES6几个好用的字符串操作方法 字符串查找 let a = 'liuyuanwai'; let b = 'ES6几个好用liuyuanwai的字符串操作'; document.write(b.includes(a)) 判断是否在开头 let a = 'liuyuanwai'; let b = 'ES6几个好用liuyuanwai的字符串操作'; document.write(b.startsWith(a)) 判断是否在结尾 let a = 'liuyuanwai'; let b = 'ES6几个好用liuyuanwai的字符串操作'; document.write(b.endsWith(a)) 复制字符串 document.write('liuyuanwai-'.repeat(5));

ES6几个好用的数组操作方法

ES6几个好用的数组操作方法 Array.from() :将json数组格式转换成数组 // 这是json数组的格式,注意: // key 必须是数字 // json 的结尾必须写明 json 的长度 let json = { '0' : '123456', '1' : '123456', '2' : '123456', length:3 } // 将json数组转换成数组的格式 let arr = Array.from(json) console.log(arr) find() 示例方法,用于查找数组内的某个元素 let arr = ['liu','yuan','wai']; let list = arr.entries(); console.log(list.next().

ES6几个好用的数字操作方法

ES6几个好用的数字操作方法 判断是否为数字 let a = 1; console.log(Number.isFinite(a)) 判断是否为整数 let a = 111.11; console.log(Number.isInteger(a)) 判断是否为浮点数 let a = 111.11; console.log(!Number.isInteger(a)) 将浮点数转换成整数 let a = 111.11; console.log(Number.parseInt(a))

解构

解构 对象的函数解构 json let json = { 'a' : 'liu', 'b' : 'yuan', 'c' : 'wai' } function func({a,b='刘员外',c}){ console.log(a, b, c); } func(json) 数组的解构 let arr = ['liu','yuan','wai'] function func(a,b,c){ console.log(a, b, c); } func(...arr)

vue使用watch监听拿到props的传值

vue使用watch监听拿到props的传值 export default { data() { return { floorData0: {}, floorData1: {}, floorData2: {}, } }, props:['floorData'], watch:{ floorData:val = { console.log(this.floorData);在floorData传值成功的前提下,有时候会出现直接在 watch 里面通过 this.floorData 是无法拿到的,总是显示 undefined。然后需要通过 newVal和oldVal这么处理,才能拿到 floorData 的值: watch:{ floorData:(newVal,oldVal) = { console.log(newVal);

Git 在项目中的实际使用指南

Git 在项目中的实际使用指南 每日一图 版权声明:本文为 stone 原创文章,可以随意转载,但必须在明确位置注明出处!!! 点击查看 Git 官方文档

vue中for循环的class绑定事件

vue中for循环的class绑定事件 {{item.MALL_CATEGORY_NAME}} data() { return { categoryIndex : 0, } }, methods: { clickCategory(index){ this.categoryIndex = index; } }

2018年网络开发者应该关注什么

以使CSS变量成为全局范围。然后,在按钮样式的上下文中使用该变量。 :root { --button-bg-color: #FF00FF; display: inline-block; height: 24px; } 可以选择Element然后getComputedStyle使用元素调用获取用于使用JavaScript 设置样式的变量的值- 将变量名称作为String传递给getPropertyValue方法。 let element = document.querySelector('.getPropertyValue("--button-bg-color") // returns #FF00FF

学会在组件中使用v-mode

学会在组件中使用v-mode 往往组件拆分需要负责数据的传递,通常会通过自定义事件来数据交互,但是如果使用v-module来做数据的交互,这样也许会简单很多。 子组件UserInfo.vue export default { props: { value: { type: String

随机获取图片

随机获取图片 随机获取300X300图片 https://source.unsplash.com/300x300 随机获取320X240图片 http://lorempixel.com/320/240/ 获取一致二次元图片 https://api.dujin.org/pic/

Angular4 不同页面中进行通信

Angular4 不同页面中进行通信 这里用的还是订阅者模式 深入理解Angular订阅者模式 我在项目当中用的是那个subject,在A页面操作成功发生一个通知到B页面 // rest.service.ts send(message: any) { this.subject.next(message); } // A页面发送消息 left.component.ts handleRoute(name) { this.router.navigate(['/' + name],{queryParams:{temp:this.temp}}); let title = queryParams.title; this.restService.send('who are you ?

nodejs: mac上阿里云部署

const hostname = '0.0.0.0'; server.listen(port, hostname, () = { console.log(`Server running at http://${hostname}:${port}/`);

那些书本中没告诉你的MyBatis

那MapperFactoryBean是干什么用的呢? 告诉容器(可以是Spring容器):我的这个Mapper可以访问这个数据,所以MapperFactoryBean需要配置Mapper和SqlSessionFactory 到目前为止,我们没有定义mapper.xml文件,但是我们可以这样用了 public interface UserMapper { @Select("SELECT * FROM users WHERE id = #{userId}") User getUser(@Param("userId") String userId);

24款缩短Web项目开发的工具

24款缩短Web项目开发的工具 在这篇文章中,我们将介绍Web设计人员和开发人员推荐的Web工具和服务,以加快您的开发速度。 更快,更高效是所有网页设计师和开发人员的目标。在保持高标准工作的同时节省时间意味着为您的家庭或其他项目以及满意的客户提供更多的业余时间。市场上的许多Web工具都可以用在您的日常项目中,帮助您更快,更高效。 下面,我们将提供Web设计

不使用cli搭建angular项目

@NgModule({ imports: [ BrowserModule ], declarations: [AppComponent], providers: [], bootstrap: [AppComponent], }) export class AppModule { } app.component.ts: import { Component } from '@angular/core';/src/main.ts') }, output: { path: path.resolve(__dirname, 'wwwroot'), filename: '[name].ts)$/, use: [{ loader: '@angular-devkit/build-optimizer/webpack-loader', options: { sourceMap: false } }, '@ngtools/webpack'] }, { test: /\./tsconfig.json', entryModule: '.