首页
Search
1
解决visual studio code (vscode)安装时没有选择安装路径问题
320 阅读
2
如何在 Clash for Windows 上配置服务
215 阅读
3
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
150 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
149 阅读
5
uniapp打包app提示通讯录权限问题,如何取消通讯录权限
113 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
1,195
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
1195
篇与
的结果
2024-10-21
2015年1月份总结
2015 年的第一个月就在我们期待着春节的心情中度过了,在年初的时候指定了一些计划,要在 2015 年改变下自己,不能说是彻底改变吧,总是要有一些新的变化。在刚过去的一月份里,自我感觉应该是变化了,需要继续努力坚持。自己的网站在 12 月份正式上线了,那就得努力的充实自己的博客,多写点文章。小蚊在 1 月份一共写了 9 篇文章,争取在 2 月份能够完成 10 篇文章的目标!当然了,不能单纯的追求数量上的目标,也要追求质量上的要求。在前几天给屋里添了盆长寿花,屋里摆放着点绿色植物,心情自然就好了很多,同时也在每天地期待着能开更多的花。我 2015 年的目标是成功养活 3 个盆栽,养植物不仅仅是净化空气,也能净化心灵。工作方面的事情,比之间有更多的加班了,虽然有些不情愿,不过还是一个人住着,倒也是无所谓,反正回家之后也没什么事情做。在 1 月份的月底正式转正了,转正之后带来的直接变化就是工资比试用期的时候高了,其他的也没感觉出来,因为都已经工作三个月了嘛! 更新了自己网站的样式,,努力让自己的博客变得更好; 元旦和周末的时候,和同学朋友一起出去玩,去前门逛街,去牛街吃饭,去首体滑冰; 添加了一盆长寿花; 因为 2 月份中间有个春节假期,关于目标这方面完成不了多少,但是依然还是有目标的: 在保证质量的情况下,完成 5 篇文章; 多与其他同学朋友交流。
2024年10月21日
8 阅读
0 评论
0 点赞
2024-10-21
博客正式放弃IE6~IE8浏览器
蚊子觉得,每一个关注中国互联网发展的人都应该行动起来,放弃IE6~IE8、放弃外壳浏览器!!!如果当前用户使用IE6~IE8访问本博客时,博客会自动跳转到高浏览器下载页面,给出chrome, firefox, opera和IE11的官方下载链接。http://www.xiabingbao.com/explore.html 连微软都宣布放弃IE6~IE8,并且弄了个“IE6丧钟”的网站,给IE6倒计时。你还等什么呢!!!IE6丧钟这个网站首页就有一张世界地图,上面用不同颜色标识世界各地的IE6占有率,毫无意外,中国这次是第一名,占有率高达2.33%。其实高占有率地区都在东南亚部分,中国就连政府主要还在用IE6呢!IE6丧钟地址:http://ie6countdown.com/
2024年10月21日
5 阅读
0 评论
0 点赞
2024-10-21
CSS实现小三角
今天研究了纯 CSS 实现的气泡效果: 用小图片实现气泡效果不难,但图片一费流量,二难修改,改边框颜色、大小均要重新生成图片,一个普通的前端设计师和一个优秀的前端设计师的差距就在这里:前者完成任务,后者追求极致。当然,我作为一个非专业的前端设计师,以上效果也是经若干次 Google 后总结得出。预备知识:用 CSS 实现三角形。实现三角形之前,我们用 CSS 实现不同颜色的边框: 代码:.css1 { display: block; margin: 10px; width: 30px; height: 30px; border-style: solid; border-width: 20px; border-color: #f00 #00f #0f0 #f0f; background-color: #fff; } 把 div 的 border 加粗,四边颜色不同,就出现了神奇的效果,每一边都变成了梯形。如果把 div 的 width 和 height 都设为 0,会出现什么情况? 代码:.css2 { display: block; margin: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: #f00 #00f #0f0 #f0f; background-color: #fff; } 三角形出现了!但是是 4 个三角形,而气泡只需要一个!怎么办?把不需要的边框设置为透明: 代码:.css3 { display: block; margin: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #00f transparent transparent; } 三角形初步完成!但是气泡的尖角不是三角形,而是斜线,怎么办?也有办法,找两个三角形叠在一起,线条就出来了: 代码:CSS 代码:.container { position: relative; display: block; width: 50px; height: 50px; } .div1 { display: block; position: absolute; left: 10px; top: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #00f transparent transparent; } .div2 { display: block; position: absolute; left: 16px; top: 10px; width: 0; height: 0; border-style: solid; border-width: 20px; border-color: transparent #fff transparent transparent; } 为了让大家看清楚,两个三角形距离为 6px,如果把距离设为 1px,那就是两条细线了。但是第二个三角是白色的,怎么办?没关系,我们假定气泡的背景色是白色,第二个三角的颜色就正好融入背景色,如果气泡的背景色是其他颜色,就把第二个三角设定成一样的背景色。同样的道理,第一个三角的颜色要和气泡的边框色一致,通过相对定位,一个完美的气泡就出现了!最后一步,把样式整理到 CSS 文件中,写成简洁的形式: 提示内容... 大功告成!如果气泡的方向不是向左怎么办?只要叠加出正确方向的三角就行。最后看看新浪微博的转发气泡是如何实现的:哈哈,用了特殊字符“◆”,很明显没有我们的实现好,因为字符样式是固定的,而我们的三角可以调尖角!至于怎么调,把上下左右的 border-width 设置成不一样的宽度看看就知道了。原文地址: 廖雪峰-纯 CSS 气泡效果
2024年10月21日
15 阅读
0 评论
0 点赞
2024-10-21
Javascript的严格模式
在严格模式下,能够在函数内部选择进行较为严格的全局或局部的错误条件检测。使用严格模式的好处是可以提早知道代码中存在的错误,即使捕获一些可能导致编程uowu的ECMAScript行为。理解严格模式的规范非常重要,ECMAScript的下一个版本将以严格模式为基础指定。支持严格模式的浏览器包括IE10+,Firefox4+, Safari5.1+和Chrome。 1. 选择使用 # 要选择进入严格模式,可以使用严格模式的编译指示,实际上就是一个不会赋给任何变量的字符串:use strict;在老版本的浏览器里,会把它当做一行普通的字符串,加以葫芦。如果在全局作用域中(函数外部)给出这个编译知识,则整个脚本都将使用严格模式。换句话说,如果把带有这个编译指示的脚本放到其他文件中,则该文件中的Javascript代码将处于严格模式下。也可以只在函数中打开严格模式,就像下面这样:function doSomething(){ "use strict"; // 其他代码 } 如果你没有控制页面中所有脚本的权利,建议只在需要测试的特定函数中开启严格模式。 2. 变量 # 在严格模式下,什么时候创建变量以及怎么创建变量都是有限制的。首先,不允许意外创建全局变量。在非严格模式下,可以像下面这样创建全局变量。// 未声明变量 // 非严格模式:创建全局变量 // 严格模式:抛出错误 message = "hello wenzi"; 即使message前面没有var关键字,即使没有将它定义为某个全局对象的属性,也能将message为全局变量。但在严格模式下,如果给一个没有声明的变量赋值,那代码在执行时就会抛出错误。其实不能对变量调用delete操作符。非严格模式允许这样操作,单户静默失败(返回false),而在严格模式下,删除变量也会导致错误。// 删除变量 // 非严格模式:静默失败 // 严格模式:抛出错误 var color = "red"; delete color; 严格模式下对变量名也有限制。特别地,不能使用implements, interface, protected, public, static和yield作为变量名。这些都是保留字,将来的ES版本中可能会使用到他们。在严格模式,用以上的标识符作为变量会导致语法错误。 3. 对象 # 在严格模式下操作对象比在非严格模式下更容易导致错误。一般来说,非严格模式下会静默失败的情形,在严格模式下就会抛出错误。因此在开发中使用严格模式更能发现错误。在下列情形下操作对象的属性会导致错误: 为只读属性进行赋值; 为不可配置的属性使用delete操作符; 为不可扩展的对象添加谁能够 使用对象的另一个限制与通过对象字面量声明对象有关。在使用对象字面量时,属性名必须唯一。例如: // 重名属性 // 非严格模式:没有错误,以第二个属性为准 // 严格模式:抛出语法错误 var student = { name : 'wenzi', name : 'bing' } 这里的对象student有两个属性,都叫name。在非严格模式下,student对象的name属性值是第二个,而在严格模式下,这样的代码会导致语法错误。 4. 函数 # 首先,严格模式下要求明明函数的参数必须唯一。以下面这个函数为例:// 重名参数 // 非严格模式:没有错误,只能访问第二个参数 // 严格模式:抛出语法错误 function doSomething(num, num){ // 其他代码 } 在非严格模式下,这个函数声明不会抛出错误。通过参数名只能访问第二个参数,要访问第一个参数必须通过arguments对象。在严格模式下,arguments对象的行为也有所不同,在非严格模式下,修改明明参数的值也会反应到arguments对象中,而严格模式下这两个值是完全独立的。如:// 修改命名参数的值 // 非严格模式:修改会反应到arguments中 // 严格模式:修改不会反应到arguments中 function doSomething(value){ value = 7; console.log(value, arguments[0]); // 非严格模式下,输出:7, 7 // 严格模式下,输出:7, 10 } doSomething(10); 另一个变化是淘汰了arguments.callee和arguments.caller。在非严格模式下,这两个属性一个引用函数本身,一个引用调用函数。而在严格模式下,访问哪个属性都会抛出TypeError。例如:// 访问arguments.callee // 非严格模式:正常 // 严格模式:抛出错误 function factorial(num){ if(num
2024年10月21日
7 阅读
0 评论
0 点赞
2024-10-21
chrome的console讲解
Chrome 的开发者工具已经强大到没朋友的地步了,特别是其功能丰富界面友好的 console,使用得当可以有如下功效: 更高「逼格」更快「开发调试」更强「进阶级的 Frontender」 Bug 无处遁形「Console 大法好」 console.log # 大家都会用 log,但鲜有人很好地利用console.error?,?console.warn? 等将输出到控制台的信息进行分类整理。他们功能区别不大,意义在于将输出到控制台的信息进行归类,或者说让它们更语义化。各个所代表的语义如下: console.log:普通信息 console.info:提示类信息 console.error:错误信息 console.warn:警示信息 当合理使用上述 log 方法后,可以很方便地在控制台选择查看特定类型的信息。console.log('一颗红心向太阳', '吼吼~'); console.info('楼上药不能停!'); console.warn('楼上嘴太贱!'); console.error('楼上关你毛事?'); 如果再配合console.group? 与console.groupEnd,可以将这种分类管理的思想发挥到极致。这适合于在开发一个规模很大模块很多很复杂的 Web APP 时,将各自的 log 信息分组到以各自命名空间为名称的组里面。console.group('app.foo'); console.log('来自foo模块的信息 blah blah blah...'); console.groupEnd(); console.group('app.bar'); console.log('来自bar模块的信息 blah blah blah...'); console.groupEnd(); 而关于console.log,早已被玩儿坏了。一切都源于 Chrome 提供了这么一个 API:第一个参数可以包含一些格式化的指令比如%c。比如给hello world做件漂亮的嫁衣再拉出来见人:console.log('%chello world', 'font-size:25px;color:red;'); 如果你觉得不够过瘾,那就把你能写出来的最华丽的 CSS 样式都应用上吧,比如渐变。于是你可以得到如下华丽丽的效果:console.log( '%chello world', 'background-image:-webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );color:transparent;-webkit-background-clip: text;font-size:5em;' ); 各种招大招的节奏啊~看着上面密集的代码不用惊慌,上面console.log()第二个参数全是纯 CSS 用来控制样式的,你不会陌生。而第一个参数里可以带用百分号开头的转义指令,如上面输出带样式的文字时使用的%c指令。更详细的指令参见官方 API 文档的这个表格。如果还不够过瘾,那咱们来 log 一些图片吧,甚至。。。动图?对,你得先有图,我们拿这张图为例。console.log( '%c', "padding:50px 300px;line-height:120px;background:url('http://wayou.github.io/2014/09/10/chrome-console-tips-and-tricks/rabbit.gif') no-repeat;" ); 看着上面摇摆的豆比兔是不是有种抽它一脸的冲动。除此,console.table? 更是直接以表格的形式将数据输出,不能赞得太多! 借用之前写过的一篇博文里的例子:var data = [ { 品名: '杜雷斯', 数量: 4 }, { 品名: '冈本', 数量: 3 }, ]; console.table(data); 另外,console.log()? 接收不定参数,参数间用逗号分隔,最终会输出会将它们以空白字符连接。console.log('%c你好', 'color:red;', '小明', '你知道小红被妈妈打了么'); console.assert # 当你想代码满足某些条件时才输出信息到控制台,那么你大可不必写if或者三元表达式来达到目的,cosole.assert便是这样场景下一种很好的工具,它会先对传入的表达式进行断言,只有表达式为假时才输出相应信息到控制台。var isDebug = false; console.assert(isDebug, '开发中的log信息。。。'); console.count # 除了条件输出的场景,还有常见的场景是计数。当你想统计某段代码执行了多少次时也大可不必自己去写相关逻辑,内置的console.count可以很地胜任这样的任务。function foo() { //其他函数逻辑blah blah。。。 console.count('foo 被执行的次数:'); } foo(); foo(); foo(); console.dir # 将 DOM 结点以 JavaScript 对象的形式输出到控制台而console.log是直接将该 DOM 结点以 DOM 树的结构进行输出,与在元素审查时看到的结构是一致的。不同的展现形式,同样的优雅,各种体位任君选择反正就是方便与体贴。console.dir(document.body); console.log(document.body); console.time & console.timeEnd # 输出一些调试信息是控制台最常用的功能,当然,它的功能远不止于此。当做一些性能测试时,同样可以在这里很方便地进行。比如需要考量一段代码执行的耗时情况时,可以用console.time与 ?console.timeEnd来做此事。这里借用官方文档的例子:console.time('Array initialize'); var array = new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); } console.timeEnd('Array initialize'); 当然,我们也可以选择自己写代码来计时:var start = new Date().getTime(); var array = new Array(1000000); for (var i = array.length - 1; i >= 0; i--) { array[i] = new Object(); } console.log(new Date().getTime() - start); 相信你也看到了,用内置的console.time是多么地方便,省去了自己写代码来计算的工作量。另外值得一提的是,通过调用内置的console.time得到的结果要比自己手动计算的时间差更精确可靠。 console.profile & console.timeLime # 当想要查看 CPU 使用相关的信息时,可以使用console.profile配合 ?console.profileEnd来完成这个需求。这一功能可以通过 UI 界面来完成,Chrome 开发者工具里面有个 tab 便是Profile。与此类似的功能还有console.timeLine配合 ?console.timeLineEnd,它的作用是开始记录一段时间轴,同样可以通过 Chrome 开发者工具里的Timeline? 标签来进行相应操作。所以在我看来这两个方法有点鸡肋,因为都可以通过操作界面来完成。但至少他提供了一种命令行方式的交互,还是多了种姿势供选择吧。 console.trace # 堆栈跟踪相关的调试可以使用console.trace。这个同样可以通过 UI 界面完成。当代码被打断点后,可以在Call Stack面板中查看相关堆栈信息。上面介绍的都是挂在window.console这个对象下面的方法,统称为Console API,接下来的这些方法确切地说应该叫命令,是 Chrome 内置提供,在控制台中使用的,他们统称为Command Line API。 $ # 似乎美刀总是被程序员及各种编程语言所青睐「你看看 PHP 代码就知道 PHPer 有多爱钱了」,在 Chrome 的控制台里,$用处还真是蛮多且方便的。$\_命令返回最近一次表达式执行的结果,功能跟按向上的方向键再回车是一样的,但它可以做为一个变量使用在你接下来的表达式中:2 + 2; //回车,再 $_ + 1; //回车得5 上面的$_需要领悟其奥义才能使用得当,而$0~$4 则代表了最近 5 个你选择过的 DOM 节点。 什么意思?在页面右击选择审查元素 ,然后在弹出来的 DOM 结点树上面随便点选,这些被点过的节点会被记录下来,而$0会返回最近一次点选的 DOM 结点,以此类推,$1 返回的是上上次点选的 DOM 节点,最多保存了 5 个,如果不够 5 个,则返回undefined。另外值得一赞的是,Chrome 控制台中原生支持类 jQuery 的选择器,也就是说你可以用$加上熟悉的 css 选择器来选择 DOM 节点,多么滴熟悉。$('body'); $(selector)返回的是满足选择条件的首个DOM元素。剥去她伪善的外衣,其实$(selector)是原生JavaScript document.querySelector() 的封装。 同时另一个命令$$(selector)返回的是所有满足选择条件的元素的一个集合,是对document.querySelectorAll()? 的封装。$$('div'); copy # 通过此命令可以将在控制台获取到的内容复制到剪贴板。copy(document.body); 然后你就可以到处粘了:看完此条命令行,机智的你是不是跟脑洞全开的我一样,冒出了这样一个想法:那就是通过这个命令可以在 JavaScript 里进行复制操作从而不用依赖 Flash 插件了。But 现实是残酷的,如之前所述的,这里的控制台命令只能在控制台中环境中执行,因为他不依附于任何全局变量比如window,所以其实在 JS 代码里是访问不了这个copy方法的,所以从代码层面来调用复制功能也就无从谈起。但愿有天浏览器会提供相应的 JS 实现吧~ keys & values # 这是一对基友。前者返回传入对象所有属性名组成的数据,后者返回所有属性值组成的数组。具体请看下面的例子:var tboy = { name: 'wayou', gender: 'unknown', hobby: 'opposite to the gender', }; keys(tboy); values(tboy); monitor & unmonitor # monitor(function),它接收一个函数名作为参数,比如function a,每次a被执行了,都会在控制台输出一条信息,里面包含了函数的名称a及执行时所传入的参数。而 unmonitor(function)便是用来停止这一监听。function sayHello(name) { alert('hello,' + name); } monitor(sayHello); sayHello('wayou'); unmonitor(sayHello); sayHello('wayou'); debug & undebug # debug 同样也是接收一个函数名作为参数。当该函数执行时自动断下来以供调试,类似于在该函数的入口处打了个断点,可以通过 debugger 来做到,同时也可以通过在 Chrome 开发者工具里找到相应源码然后手动打断点。 而undebug? 则是解除该断点。而其他还有好些命令则让人没有说的欲望,因为好些都可以通过 Chrome 开发者工具的 UI 界面来操作并且比用在控制台输入要方便。 REFERENCE # Styled console logging in the Chrome DevTools (Canary) Chrome Console API Chrome Console Command Line API Feel free to repost but keep the link to this page please!原地址:Chrome 控制台不完全指南
2024年10月21日
11 阅读
0 评论
0 点赞
1
...
35
36
37
...
239