Web
前端开发:css、js、vue、踩坑
以气御码
https://www.playfulhd.com
展开
-
Flutter:最难搞的搭建环境,一次性成功!(新手踩坑)
进入我的主页,查看更多Flutter的分享!我的电脑是Win10系统(专业版 最新版本);如果你是Linux系统,过程类似(在Linux系统上,安装、配置变量等等是需要命令的)问答环节:Flutter怎么开发? - 是后缀为dart的文件;无论你是哪个端,会Dart则事倍功半。 Flutter能打包成App? - 能打包安卓App、IOS App。 网上的教程,都提到会出现一些问题? - 不是必然的,至少我两台电脑(Win)是没有遇到问题。 我是前端,不会用Android Studio.原创 2020-07-16 00:46:35 · 1787 阅读 · 0 评论 -
Vue:从安装环境开始,到运行第一个项目!(详解)
进入我的主页,查看更多VUE的分享!我的电脑是Win系统,后续会更新Linux的步骤(刚把笔记本装了linux,很快地)一、安装环境1. 安装nodejs官方下载地址(https://nodejs.org/en/)下载后直接安装,这里建议下载LTS(长期支持版,稳定没BUG)安装后,打开cmd窗口(Win+R),输入:node -v 或 npm -v那么,虽然是长期支持版,当有更新了怎么整?直接覆盖安装!比如...原创 2020-07-14 16:50:34 · 587 阅读 · 0 评论 -
CSS:把Flex布局的代码全部展示出来,你难道还不会?(可以说很实用了)
进入我的主页,查看更多CSS的分享!首先呢,先去看文档,了解下flex是什么,这里不做赘述。当然,可以看下面的代码示例,去了解。一、水平布局将所有内容在水平布局,代码示例:1. 靠左侧,靠顶部.row-ll { display: flex;/* 定义flex */ flex-direction: row;/* 默认值*/ align-items: flex-start;/* 默认值*/ justify-content: flex-start;/* 默认值*/}.原创 2020-07-13 10:45:44 · 689 阅读 · 0 评论 -
HTML:可能会用到的元素,整理好不用再找!
进入我的主页,查看更多HTML的分享!一. 结构标签1. 页面布局:<aside>定义页面内容之外的内容</aside><footer>定义文档或节的页脚</footer><header>定义文档或节的页眉</header><main>定义文档的主内容</main><nav>定义文档内的导航链接</nav><!-- 示例: --><heade.原创 2020-07-12 16:50:57 · 374 阅读 · 0 评论 -
JS:如何验证手机号格式和邮箱格式?(正则)
进入我的主页,查看更多JS的分享!我的代码有多短,本篇内容就有多短!手机号/** * 验证手机号 */function verPhone(p) { if (!p) { return false; } else { //必须是1开头,第二位数字可以是0-9任意一个,总长为11 let reg = /^1([0-9])\d{9}$/; //或 必须是1开头,第二位数字可以是3|5|6|7|8|9任意一个,总长为11 //let reg = .原创 2020-07-11 11:22:52 · 1504 阅读 · 0 评论 -
JS:控制金额的输入,完全避免用户乱搞(直接处理为允许的格式)
进入我的主页,查看更多JS的分享!我的代码有多短,本篇内容就有多短!先实现标题的内容,贴出代码://格式化金额的输入function formatPrice(p) { if (!p) { return "0.0"; } else { p += ""; //去除非数字,只保留数字和. p = p.replace(/[^\d.]/g, ""); //必须保证第一个为数字而不是. p = p.replace(/^\./g, "0.");.原创 2020-07-10 20:51:41 · 540 阅读 · 0 评论 -
JS:定义变量的var、let有何操作?(360°无死角)
进入我的主页,查看更多JS的分享!我的代码有多短,本篇内容就有多短!最近话不多,直接看代码和结果好伐?一、var定义://一般情况var word = "Hello World";console.log(word);//输出:Hello World//变量提升?console.log(word);var word = "Hello World";//输出:undefined//变量提升!word = "哈哈哈";console.log(word);var .原创 2020-07-09 09:20:57 · 492 阅读 · 0 评论 -
JS:要关闭浏览器,就清除缓存的数据?比如清除登录数据
进入我的主页,查看更多JS的分享!我的代码有多短,本篇内容就有多短!本地存储对比:sessionStorage,关闭窗口就被清除; localStorage,一直存在直到手动删除; cookie,设置有效期,可以直接实现标题的需求 今天不想多说话,直接贴上代码://判断是否支持cookie 比如浏览器开启了隐私模式var isCookie = () = >{ return navigator.cookieEnabled;};//添加function add.原创 2020-07-08 18:29:07 · 3344 阅读 · 1 评论 -
JS:存储数据用哪个?localStorage、sessionStorage有什么区别?
进入我的主页,查看更多JS的分享!我的代码有多短,本篇内容就有多短!对比cookie:cookie会与服务器通信;storage只存在客服端,不参与服务器通信; 同样受同源策略影响,只有在域名一致的情况下才能查看到对应的数据; navigator.cookieEnabled检测是否启用了cookie,也就说cookie可以认为控制是否启用,而storage则是自动启用,不会被人为关闭。(比如隐私模式下)一、localStorage - 没有时间限制的数据存储知识点:存储 key.原创 2020-07-07 22:01:40 · 1115 阅读 · 0 评论 -
HTML+CSS:viewport的写法,跟图片也有关系
viewport:设备显示网页的那部分区域,在移动端的开发起着至关重要的作用。一、meta<meta name="viewport" content="width=device-width, initial-scale=1.0" />content的属性值:width:控制 viewport 的大小,width=device-width代表宽度是设备屏幕的宽度 initial-scale=1.0:表示初始的缩放比例 minimum-scale=1.0:表示最小的缩放比例原创 2020-07-06 23:43:57 · 296 阅读 · 0 评论 -
JS:学好加、减、乘、除运算,走遍天下都不怕
进入我的主页,查看更多JS的分享!这是另一种实现方式,更简洁(原先有一篇实现了,可以对比这一篇的代码看看)一、加法、减法1. 出错的例子console.log(0.1+0.2);//输出:0.30000000000000004,正确结果:0.3console.log(0.2 + 0.4)//输出:0.6000000000000001,正确结果:0.6console.log(1.0 - 0.9);//输出:0.09999999999999998,正确结果:0.1cons...原创 2020-07-05 17:01:30 · 2282 阅读 · 0 评论 -
JS:获取星座,并且提出了一个疑问
进入我的主页,查看更多JS的分享!我的代码有多短,本文章就有多短!(ㅍ_ㅍ)先贴上代码:/** * 转换:星座 * 百度百科: * ["1222-0120", "0121-0219", "0220-0320", "0321-0420", "0421-0521", "0522-0621", "0622-0722", "0723-0822", "0823-0922", "0923-1023", "1024-1122", "1123-1221"] * 百度百科,美索不达米亚占星术: *.原创 2020-07-04 17:58:44 · 354 阅读 · 0 评论 -
JS:获取指定的url参数,或者全都要(以对象的形式)
进入我的主页,查看更多JS的分享!我的代码有多短,本文章就有多短!(ㅍ_ㅍ)1. 思路获取浏览器得参数的字符串,判断并转为对象,如果没有指定参数名,直接返回该对象。2. 代码需要说的话都在注释里了,先贴上代码:(好像明白了程序员为啥话不多)/** * 获取:当前链接的参数 * 若不指定参数,则以对象的形式返回全部参数 * 若指定参数名,则只返回对应的值 * 处理:中文解码 * 测试:"?id=123&name=哈哈哈" * 结果:{id: "123", na.原创 2020-07-04 16:28:10 · 563 阅读 · 0 评论 -
JS:想做购物车?先学好加、减、乘、除的计算!
我的代码有多短,本文章就有多短!(ㅍ_ㅍ)※ 思路分析对于整数的运算,不会出错;而带了小数点的运算,直接计算容易出错。推荐的做法是,带了小数点的计算,都要经过处理。因此,对于带小数的加、减、乘、除运算,先变为整数的运算,再将得到的结果变回去(由中间值处理),得到最终的结果。一、加法运算1. 先看直接计算:console.log(0.1 + 0.2);// 打印结果 0.300000000000000042. 代码实现function calcPlus(num1, n.原创 2020-07-02 09:50:02 · 308 阅读 · 0 评论 -
JS:获取格式化的日期时间,自定义分隔符
小小的需求:获取当前时间,格式为:2020/06/3017:00(此时此刻) 获取指定时间,格式为:2020/07/0117:00(一天后,即明天的此时此刻)一、思路由一个方法处理后返回结果,这里直接贴上代码:// 格式化 日期时间function formatDateTime(date = new Date()) { //不传date则默认当前时间 let year = date.getFullYear(); let month = date.getMonth() + 1;..原创 2020-06-30 21:58:51 · 2104 阅读 · 0 评论 -
CSS样式库:特殊节日,网站变成灰色
抗击疫情仍未结束,将一切打理好,如果仍要小心翼翼的等到明年,我们必须等得起。1. 实现原理:CSS的Filter属性,再加上各浏览器的兼容性代码,就完成了。这里直接贴上代码:body{ -webkit-filter:grayscale(100%); -moz-filter:grayscale(100%); -ms-filter:grayscale(100%); -o-filter:grayscale(100%); filter:grayscale.原创 2020-06-24 16:04:54 · 624 阅读 · 0 评论