前端笔记:一些前端方便的小心得

Html多个引号重叠使用冲突解决办法

今天写个按钮,传递参数时,遇到个障碍,代码如下<a onclick="insertAtCursor('[btn url=""][/btn]');">按钮</a>url="" 中的引号,会导致解释错误,正常来说遇到引号冲突都是加 / 解决,然而并不适合这种情况。解决方法用html实体字符替换掉冲突引号, " 换成 &quot; 即可如<a onclick="insertAtCursor('[btn url=&quot;&quot;][/btn]');">按钮</a>如果是但引号冲突, ' 换成 &apos; 即可,ie 好像不支持建议使用数字形式的如 &#39;。什么是html实体字符?实体字符是 html 预留的一些字符,因为在 html 语法中有些你想输出符合会被浏览器判定为标签进行渲染,所以为了避免这种情况,就有了实体标签。比如有的时候你在 html 中使用了很多空格,但是html渲染出来就只有一个有效空格,这时候就可以用空格的实体字符 &nbsp; 解决,还有个实际用途,比如在 markdown 编辑器下,两个空格可能会被识别成markdown语法,那么你想段前空两格就可以放两个 &nbsp;&nbsp;引用实体字符,可以引用实体字符的字符名字,如 &apos; ,也可以引用实体编号如 &#39; ,实体编号各个浏览器兼容比较好,但是不利于记忆。更多实体字符可以参考w3c https://www.w3school.com.cn/tags/html_ref_entities.ht...

阅读文章
网站夜间模式的实现

整体流程夜间模式开关按钮:用来手动切换夜间模式的,会存储cookie。自动夜间模式:当cookie为空时,浏览器时间大于22点小于6点时会自动进入夜间模式,并存储cookie。后端配合:php判断是否有cookie,有的话直接输出夜间css,避免切换页面时网页闪烁。具体操作引入黑夜 css <link href="dark.css" rel="alternate stylesheet" type="text/css" title="dark">有title熟悉rel属性值同时包含alternate stylesheet的<link>作为备选样式CSS文件加载,默认不渲染。切换夜间模式的 js 函数function switchNightMode(){ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.querySelector('link[title="dark"]').disabled = true; document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } }指定时间进入夜间模式(function(){ if(document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === ''){ if(new Date().getHours() > 22 || new Date().getHours() < 6){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; document.cookie = "night=1;path=/" console.log('夜间模式开启'); }else{ document.cookie = "night=0;path=/" console.log('夜间模式关闭'); } }else{ var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || '0'; if(night == '0'){ document.querySelector('link[title="dark"]').disabled = true; console.log('夜间模式关闭'); }else if(night == '1'){ document.querySelector('link[title="dark"]').disabled = true; document.querySelector('link[title="dark"]').disabled = false; console.log('夜间模式开启'); } } })();php 后端判断 cookie 进行加载 css<link href="dark.css" rel="<?php if($_COOKIE['night'] != '1'){echo 'alternate ';} ?>stylesheet" type="text/css" title="dark">适配 Mac 的 Dark Mode因为没有js的判断方法,所以需要插入段,css然后用js判断css的变化,来监控是否进入夜间模式插入 csshtml { content: ""; } /* Light mode */ @media (prefers-color-scheme: light) { html { content: "light"; } } /* Dark mode */ @media (prefers-color-scheme: dark) { html { content: "dark"; } }前端使用 JS 检查const mode = getComputedStyle(document.documentElement).getPropertyValue('content'); if(mode == '"dark"'){alert('进入夜间模式');}最后在dark.css里重写一些元素的背景色文字色等等。参考1,link rel=alternate网站换肤功能最佳实现2,给博客添加夜间模式3,prefers-color-scheme: CSS Media Que...

阅读文章
纯CSS显示JS/HTML等源代码行数

代码如下.code { padding: 10px 10px 10px 40px; font-size: 13px; line-height: 18px; background-color: #eee; font-family: "Lucida Console", Consolas, Monaco; white-space: pre-wrap; word-break: break-all; position: relative; overflow: hidden; } .code::before { content: '01.\A 02.\A 03.\A 04.\A 05.\A 06.\A 07.\A 08.\A 09.\A 10.\A 11.\A 12.\A 13.\A 14.\A 15.\A 16.\A 17.\A 18.\A 19.\A 20.\A 21.\A 22.\A 23.\A 24.\A 25.\A 26.\A 27.\A 28.\A 29.\A 30.\A 31.\A 32.\A 33.\A 34.\A 35.\A 36.\A 37.\A 38.\A 39.\A 40.\A 41.\A 42.\A 43.\A 44.\A 45.\A 46.\A 47.\A 48.\A 49.\A 50.\A 51.\A 52.\A 53.\A 54.\A 55.\A 56.\A 57.\A 58.\A 59.\A 60.\A 61.\A 62.\A 63.\A 64.\A 65.\A 66.\A 67.\A 68.\A 69.\A 70.\A 71.\A 72.\A 73.\A 74.\A 75.\A 76.\A 77.\A 78.\A 79.\A 80.\A 81.\A 82.\A 83.\A 84.\A 85.\A 86.\A 87.\A 88.\A 89.\A 90.\A 91.\A 92.\A 93.\A 94.\A 95.\A 96.\A 97.\A 98.\A 99'; position: absolute; top: 10px; bottom: 10px; left: 0; text-align: right; background-color: #fbfbfb; color: #333; outline: 100px solid #fbfbfb; clip: rect(-100px 2em 9999px 0); /* IE9+ */ clip: rect(-100px 3.5ch 9999px 0); overflow: hidden; }CSS构建代码行数的原理如下:使用::before伪元素content属性生成,这样不用担心网页框选复制代码的时候行数序号会污染。使用A控制字符的换行。::before伪元素绝对定位在左侧,祖先元素设置overflow:hidden隐藏多余的行数。核心CSS代码示意如下:.code { position: relative; overflow: hidden; } .code::before { content: '01.\A 02.\A 03.\A 04.\A 05.\A 06.\A 07.\A 08.\A 09.\A 10.\A 11.\A 12.\A 13.\A 14.\A 15.\A 16.\A 17.\A 18.\A 19.\A 20.\A 21.\A 22.\A 23.\A 24.\A 25.\A 26.\A 27.\A 28.\A 29.\A 30.\A 31.\A 32.\A 33.\A 34.\A 35.\A 36.\A 37.\A 38.\A 39.\A 40.\A 41.\A 42.\A 43.\A 44.\A 45.\A 46.\A 47.\A 48.\A 49.\A 50.\A 51.\A 52.\A 53.\A 54.\A 55.\A 56.\A 57.\A 58.\A 59.\A 60.\A 61.\A 62.\A 63.\A 64.\A 65.\A 66.\A 67.\A 68.\A 69.\A 70.\A 71.\A 72.\A 73.\A 74.\A 75.\A 76.\A 77.\A 78.\A 79.\A 80.\A 81.\A 82.\A 83.\A 84.\A 85.\A 86.\A 87.\A 88.\A 89.\A 90.\A 91.\A 92.\A 93.\A 94.\A 95.\A 96.\A 97.\A 98.\A 99'; position: absolute; }对,方法比较傻,就是一口气把99行序号在CSS中埋伏好。CSS方法实现的优缺点优点:简单,高效,性能十足,即使代码变来变去布局也OK。缺点:支持的行数有限,例如上面的demo最多支持99行代码。如果代码行数惊人,例如上千行,则建议辅助JS去生成序号,例如构建一段包含content内容的<style>插入到页面中。兼容性方法至少IE9+浏览器支持,IE8浏览器理论上支持。声明:以上内容转自http://www.zhangxinxu.com/wordpress/2018/02/pure-css-js-html-code-line-number/下面说说我是如何将其投入使用的吧!1,如何解决上文提到的→支持的行数有限,例如上面的demo最多支持99行代码?我是直接用php循环语句写了个循环,直接输出了个支持到8000行的css代码,理论上足够够用了【因为基本上没人会在网页上写上万行代码!】,css文件最终定格60多k的大小(捂脸)。2,为什么想用纯css的?在给博客代码高亮换成prismjs时,prismjs官网虽然可以选择行号组建,但是总会出现些问题(博主忘记问题是啥了,毕竟过去好几天了),然后就百度纯css的看看有没有前辈折腾过,没想到还真有,而且文章还挺新鲜的(2018年发表的),于是就想尝鲜3,感受文章开始处的padding-left 40px参数是给行号挪位置的,最初弄时可以设置的小一点,这样就方便看行号是否和代码对应上,没有错位!.code::before的top参数和bottom参数和.code的padding的top和bottom参数一...

阅读文章
css视口单位vw,vh的妙用(embed篇)

视频demo 如上视频[av9214469],使用的是embed标签,大家都知道embed的播放器很难自适应,不是过分拉伸改变视频比例,就是写死播放器长宽,导致不能随网页大小的变化自由变换尺寸。前天,在往博客上折腾B站视频时,无意间灵机一动,想到了个好主意,就是使用vw单位,配合使用calc。只需级行css就解决了核心css代码,锁死视频比例16:9embed { height: calc(9 * 100vw/ 16);width: 100%; }宽度设置为100%,宽度铺满父级div【假设父级div就是真个屏幕】,高度设置为屏幕的宽度乘以9/16。因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了对应的css就是这样@media only screen and (min-width:768px){ embed{height: calc(9 * (100vw - 330px)/ 16); width: 100%;} } @media only screen and (max-width:767px){ embed{ height: calc(9 * 100vw/ 16);width: 100%;} }其实就是对于电脑端设备,在宽度设置上,提前减去330px,然后在乘9/16。原理就是这样,因为我也没有去仔细计算我的模板边距测栏宽度总和是多少,所以比例不可能特别精准,还有就是现在iframe同样可以用上述方法。本来,文章写道这里就应该结束了,但是突然想到了香菇社长那个超宽的屏幕,仅仅是上述代码肯定会导致一个问题,视频高度可能会超出屏幕的高度。怎么办呢?想了一下,觉得这样比较简单!在电脑端css加入下面的东东max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度的16/9*/这样不管屏幕多奇葩,应该也能保证视频播放器尺寸16:9了哈!如果想要其他尺寸对应的数字改一下就好了。至于有黑边问题,这个原因有很多,视频素材比例问题?embed播放器尺寸问题?...

阅读文章
CSS视口单位的一次深度使用

什么是视口单位?在CSS规范中,有4种类型的可用视口单位:vw — 1vw 等于视口宽度的 1%vh — 1vh 等于视口高度的 1%vmin — vw 和 vh 中的较小值vmax — vw 和 vh 中的较大值视口,即浏览器屏幕大小,1vw 等于浏览器宽度的 1%,100vw 即整个浏览器的宽度。简单来说,它和px,rem一样就是个单位,适当的使用这种单位有时候能出奇效。注:IE9使用vm代替vmin。它不支持vmax。澄清:1vmax等于1vh在纵向模式,而在横向模式下,1vmax将等于1vw。个人建议:使用视口给元素设置宽高时,为了避免比例不协调,使用同一个单位比较好,如vmin、vmax。兼容性IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome for android39支持博主使用情况我在 https://tool.qqdie.com/ 上就深度使用了这个单位,甚至字体大小都用这个设置的。费了很久的时间去调试,现在在我电脑上看已经感觉可以了但是,如果你的显示器很大,那么字体也会超乎寻常的大还有就是高度设置成100vh在一些手机浏览器上显示上有些奇怪,100vh应该是铺满全屏,但是在手机浏览器上却可以滚动,相当于高度设置多了,猜测原因是视口可能计算了手机整个屏幕的视口,而不是浏览器视口。yodu模板上只有一处使用了视口单位,因为写模板时已经忘记这个单位了,后来因为模板有个地方不是很美观求助香菇时,他提到了这个才想起来,于是用上了下。博主评价正常写模板建议还是主要用px,rem等传统单位,视口单位作为辅助单位比较好。视口单位,解决某些问题会有奇效,但是如果作为主要单位使用时会很坑....

阅读文章
1/1