Clara_G的博客

因为2020年4月4号的特殊需求，网站需要进行全部变灰显示，以下代码可在多数浏览器试用滤镜 ：filterhtml{ -webkit-filter:grayscale(100%); filter:grayscale(100%);}ie暂时没有解决方案，尝试了下ie滤镜，没实现相应效果，欢迎大家在评论区交流...

上代码,亲测有效document.title='\u200E';document.title=' ',这个方法我试过不可以.效果图如下:但是,在右键检查网页源代码时,title中还是有内容的,截图如下:笔者这边还是会出现闪动一下才清空,在手机浏览器跟app上的h5界面都这样子,如有更好的方法欢迎交流参考文章:https://www.jianshu.com/...

前段时间笔者跟同事一起开发移动端H5界面,后来在测试时,发现一些界面的onclick事件在苹果ios上不管用,因为笔者跟同事之前一直做PC端开发,不太清楚怎么回事,于是在网上找到如下几种方案:一.修改css方法将绑定事件的span元素添加 z-index 跟cursor:pointer,这个没管用二.修改onclick的绑定直接把onclick事件换成$('span').on...

一、css3实现文字渐变（不兼容ie低版本）p{ font-size: 26px; background: linear-gradient(to right,#63bd78,#36a28e,#1e8fab,#047bcb); -webkit-background-clip: text; color: transparent;}加上底部渐变横线代码如...

笔者近期在开发移动端h5界面,发现每次改完样式 js都需要强制清除下手机浏览器的缓存,才显示效果,但是通过微信浏览器进行查看时没找到清除缓存的按钮,于是乎,自己上网上找了写方法,又在学习群里交流了下,总结出以下方法1.添加版本号或者标识号在引用的css 跟js 后面,添加一个版本号,至于怎么使用规则,可以跟组内小伙伴约定好,这样子升级到正式环境的时候,就不用用户自己清理缓存了.（原理：增加...

本例介绍《vue.js实战》第五章最后的购物车练习一,练习1:在当前示例基础上扩展商品列表,新增一项是否选中该商品的功能,总价变为只选中商品的总价,同时提供一个全选按钮截图如下:html: <div id="app" v-cloak> <template v-if="list.length"> <table> ...

本例介绍《vue.js实战》第五章最后的购物车练习二,练习2:将商品列表list改为一个二维数组来实现商品的分类,比如分为"电子产品","生活用品","果蔬",同类商品聚合在一起.提示,你可能用到两次v-for.提醒:二维数组可以采用这种方式[ { name:'电子产品', productList:[ { id:1, name:'...

设想一个场景,使用v-if实现div的隐藏和显示,并且在显示时获取div里面的内容,div默认不显示,代码如下:html: <div id="app"> <div id="demo" v-if="showDemo">这是一段文本</div> <button @click="getText"&...

最近笔者在写界面时遇到一个问题,给li添加border边框选中效果的时候,发现它的兄弟元素一直抖动.发现时浏览器的盒模式计算增加了元素的width找了很多资料,说是给li元素添加box-sizing属性,结果还是不行box-sizing属性是css3为了改善盒模型定义的,该属性能事先定义盒模式的尺寸解析方式,box-sizing:content-box|border-box|i...

最近做过一道笔试题js实现判断字符串中是否出现重复字符，如果有，输出第一个重复字符的位置，如果没有，返回-1（注，时间复杂度越低越好，不要使用indexof 和正则表达式）回来上网查资料,很多都是用indexof 和正则实现的,后来问了几位好友,现将整理的结果如下思路一:代码如下//先转化成对象，把单个字符为属性，出现次数为值let str = 'tbolbdkkeslgadg...

自适应是个很长久的话题,尤其是在做PC端界面时,考虑到自适应的过程,图片也不能定高宽.现在来讲一下.一般图片我们用一个div来当容器.里面放置我们要设置的来自服务器或者本地的静态资源图片.结构一般如下所示:<div class="imgContainer"> <img src="images/a.jpg"/></div>这时候有两种方案来...

要向实现下图文章首字下沉的效果，需要使用css3中的：first-letter属性代码如下：css代码： .first::first-letter { font-size: 50px; float: left; color: #333; text-indent: 0; padding: 2px;...

在iphone和ipod touch中使用的Safari浏览器会出现媒体查询失效这是为什么呢这是因为在iphone中使用Safari浏览器在进行页面显示时，将窗口宽度当做980px像素进行显示。所以即使在界面中已经写好了页面在小尺寸窗口中运行时的样式，iphone中的Safari浏览器也不会使用这个样式，而是选择窗户宽度为980px时所使用的样式。在这种情况下，可以使用<meta>...

@media screen and 不起作用原因汇总。首先确认是不是css本身的问题，而不是媒体查询没有生效；例如div{display:flex;}/*那么div所有的display效果都将无法生效*/第一种错误：格式书写错误and后面必须有空格例如下面代码；@media screen and (max-width:500px){ }第二种错误：样式冲突；@m...

css样式编码规范通常大家在进行css编码时,都是想到什么写什么,尤其是命名的时候,更是千变万化.笔者最近在项目中和同事共同编写css时遇到一些坑.css的规范在团队配合和多人协作的情况下显得尤为重要.本文只是个人体会,希望大家多多提意见,共同完善css的编码规范.编码设置通常我们采用utf-8的编码规范,在css文件的头部使用 @charset “utf-8” 注意 @ch...

iframe根据子界面高度自适应的情况--子界面table异步最近笔者遇到一个问题,需要在后台管理系统界面中右侧区域iframe根据子界面的高度进行自适应.开始用的方法是这样的&amp;lt;iframe scrolling=&quot;no&quot; frameborder=&quot;0&quot; name=&quot;mainFrame&quot; id=&quot;mainFrame&quot; src=&quo

今天用自己编写的小程序时发现,地图一直在拼命加载中,然后看了下代码,报错如下app referer校验失败于是找到上网找到两种解决方法1.更改百度地图白名单内容为*2.查看自己授权的小程序appId是否发生改变如果有其他的方法,欢迎大家留言,一起交流...

前端中的hack,很多人的回答如下:由于不同的浏览器，比如Internet Explorer 6,Internet Explorer 7,Mozilla Firefox等，对CSS的解析认识不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。这个时候我们就需要针对不同的浏览器去写不同的CSS，让它能够同时兼容不同的浏览器，能在不同的浏览器中也能得到我们想要的页面效果总之....

最近有个需求,用户在上传图片预览时,需要显示大小为2M一下,大于2M的需要压缩后上传,小于2M的原图显示一.先说下限制图片大小的好处直接上传特别占用带宽，上传速度慢,对程序考验以及影响用户的体验 图片资源直接上传,占用的服务器空间过大,容易造成空间浪费二.实现思路只要是借用canvas和FileReader函数,以下是代码,其中添加了需求,大于2M的图片才进行压缩,小于的原图显示...

最近在开发注册界面的时候,发现了一个问题,chorme浏览器中账号和密码老是回填到input框中(浏览器保存的用户名和密码自动填充).刚开始给input框添加autocomplete="off",没管用给form 加这个也没管用最终通过这个方法解决的阻止浏览器自动回填表单功能&lt;form role="form" autocomplete="off"&gt; &l...

由于有些浏览器并不支持HTML5中新增的元素（header,footer, section,article,nav等），如早期的IE8或更早版本。为了让其支持新增的HTML5元素，可以使用document.createElement 的方法思路：先判断浏览器--ie8及以下使用该方法创建元素 var DEFAULT_VERSION = 8.0; var ua = navigat...

一、 创建canvas元素如果要向界面中添加canvas元素，可以使用以下代码<canvas id="myCanvas" style="border:1px solid;" width="300" height="150"></canvas> <script> var c = document.getElementById("myCan...

要使用JavaScript检测浏览器支持哪些音频格式可使用下面代码，使用audio元素的canPlayType方法该方法粗涂鸦板MIME类型与编码/解码器参数，并返回下列三个字符串之一：1.probably，2.maybe，3.空字符串function checkAudio() { var myAudio = document.createElement('audio'); ...

一般我们在构建表单的时候，会用到label标签，label标签页通常是下面两种用法：1.for绑定的时name属性里面的值，<div class="form-group"> <label for="name">用户名：</label> <input type="text" id="userName" name="name"/>&...

浅谈webpack入门学习本文主要介绍webpack入门以及笔者对webpack的一些理解：一.为什么要使用webpack现在的前端界面具有丰富的JavaScript代码和很多依赖包,为了简化开发的复杂度,通常采用以下思路:模块化开发,把复杂的程序细分成小的模块类似于TypeScript这种在JavaScript基础上拓展的开发语言,我们采取将其转化为JavaScript文...