其实,还有其他编辑器也还可以,比如 vs code atom sublime text 这些,而且这些主题还多!好看
sena4654 发布的最佳帖子
-
RE: Hbuilder 打开,内部运行环境 java空指针异常,目前没找到好的解决方式
sena4654 发布的最新帖子
-
使用 vue 创建一个多功能计算器
先来一张效果图
代码
html
<div id="app"> <div class="calculator"> <button @click="changeModeEvent" class="toggle-button"> <p v-if="changeMode">切换高级模式 ⚈</p> <p v-else>切换简单模式 ⚆</p> </button> <div class="results"> <input class="input" v-model="current" /> </div> <div class="mode" v-if="changeMode"> <button class="button" @click="press">7</button> <button class="button" @click="press">8</button> <button class="button" @click="press">9</button> <button class="button" @click="press">*</button> <button class="button" @click="press"><=</button> <button class="button" @click="press">C</button> <button class="button" @click="press">4</button> <button class="button" @click="press($event)">5</button> <button class="button" @click="press">6</button> <button class="button" @click="press">/</button> <button class="button" @click="press">(</button> <button class="button" @click="press">)</button> <button class="button" @click="press">1</button> <button class="button" @click="press">2</button> <button class="button" @click="press">3</button> <button class="button" @click="press">-</button> <button class="button" @click="press">x ²</button> <button class="button" @click="press">±</button> <button class="button" @click="press">0</button> <button class="button" @click="press">.</button> <button class="button" @click="press">%</button> <button class="button" @click="press">+</button> <button class="button equal-sign" @click="press">=</button> </div> <div class="mode" v-else> <button class="button" @click="press">sin</button> <button class="button" @click="press">cos</button> <button class="button" @click="press">tan</button> <button class="button" @click="press">x^</button> <button class="button" @click="press"><=</button> <button class="button" @click="press">C</button> <button class="button" @click="press">log</button> <button class="button" @click="press">ln</button> <button class="button" @click="press">e</button> <button class="button" @click="press">∘</button> <button class="button" @click="press">rad</button> <button class="button" @click="press">√</button> <button class="button" @click="press">7</button> <button class="button" @click="press">8 </button> <button class="button" @click="press">9</button> <button class="button" @click="press">/</button> <button class="button" @click="press">x ²</button> <button class="button" @click="press">x !</button> <button class="button" @click="press">4</button> <button class="button" @click="press">5</button> <button class="button" @click="press">6</button> <button class="button" @click="press">*</button> <button class="button" @click="press">(</button> <button class="button" @click="press">)</button> <button class="button" @click="press">1</button> <button class="button" @click="press">2</button> <button class="button" @click="press">3</button> <button class="button" @click="press">-</button> <button class="button" @click="press">%</button> <button class="button" @click="press">±</button> <button class="button" @click="press">0</button> <button class="button" @click="press">.</button> <button class="button" @click="press">π</button> <button class="button" @click="press">+</button> <button class="button equal-sign" @click="press">=</button> </div> </div> </div> <script src='js/vue.min.js'></script> <script src="js/index.js"></script>
css
@import "https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css"; body { background: linear-gradient(to right, #85D8CE, #085078); } #app { font-family: 'Microsoft Yahei', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; display: flex; flex-wrap: wrap; justify-content: center; align-item: center; margin-top: 80px; } .calculator { width: 440px; padding: 20px; border-radius: 5px; margin: 20px auto; font-size: 16px; background-color: #333333; } .input { width: 420px; height: 50px; border-radius: 0px; border: 1px solid black; background-color: #333333; color: #d9d9d9; padding: 0 5px 0 5px; margin: 0 0px 10px 0px; font-size: 30px; } .input:focus, .input:active { border-color: #03a9f4; box-shadow: 0 0 4px #03A9F4; outline: none 0; } .button { margin: 3px; width: 63px; border: 1px solid #0d0d0d; height: 30px; border-radius: 4px; color: #d9d9d9; background-color: #1a1a1a; cursor: pointer; outline: none; } .mode { display: flex; flex-wrap: wrap; justify-content: space-evenly; } .equal-sign { background-color: green; width: 133px; } .toggle-button { border: none; background-color: #333333; cursor: pointer; outline: none; font-size: 1rem; color: #fff; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.35); } p { margin-top: 0; } button::-moz-focus-inner { border-color: transparent; }
js
'use strict'; var app = new Vue({ el: '#app', data: function data() { return { current: '', changeMode: true }; }, methods: { press: function press(event) { var me = this; var key = event.target.textContent; if (key != '=' && key != 'C' && key != '*' && key != '/' && key != '√' && key != "x ²" && key != "%" && key != "<=" && key != "±" && key != "sin" && key != "cos" && key != "tan" && key != "log" && key != "ln" && key != "x^" && key != "x !" && key != "π" && key != "e" && key != "rad" && key != "∘") { me.current += key; } else if (key === '=') { if (me.current.indexOf('^') > -1) { var base = me.current.slice(0, me.current.indexOf('^')); var exponent = me.current.slice(me.current.indexOf('^') + 1); me.current = eval('Math.pow(' + base + ',' + exponent + ')'); } else { me.current = eval(me.current); } } else if (key === 'C') { me.current = ''; } else if (key === '*') { me.current += '*'; } else if (key === '/') { me.current += '/'; } else if (key === '+') { me.current += '+'; } else if (key === '-') { me.current += '-'; } else if (key === '±') { if (me.current.charAt(0) === '-') { me.current = me.current.slice(1); } else { me.current = '-' + me.current; } } else if (key === '<=') { me.current = me.current.substring(0, me.current.length - 1); } else if (key === '%') { me.current = me.current / 100; } else if (key === 'π') { me.current = me.current * Math.PI; } else if (key === 'x ²') { me.current = eval(me.current * me.current); } else if (key === '√') { me.current = Math.sqrt(me.current); } else if (key === 'sin') { me.current = Math.sin(me.current); } else if (key === 'cos') { me.current = Math.cos(me.current); } else if (key === 'tan') { me.current = Math.tan(me.current); } else if (key === 'log') { me.current = Math.log10(me.current); } else if (key === 'ln') { me.current = Math.log(me.current); } else if (key === 'x^') { me.current += '^'; } else if (key === 'x !') { var number = 1; if (me.current === 0) { me.current = '1'; } else if (me.current < 0) { me.current = NaN; } else { var _number = 1; for (var i = me.current; i > 0; i--) { _number *= i; } me.current = _number; } } else if (key === 'e') { me.current = Math.exp(me.current); } else if (key === 'rad') { me.current = me.current * (Math.PI / 180); } else if (key === '∘') { me.current = me.current * (180 / Math.PI); } }, changeModeEvent: function changeModeEvent() { var me = this; me.changeMode = !me.changeMode; } } });
参考来源:
https://www.jsdaima.com/Uploads/js/201803/1520473098/index.html
-
设计师地位不及程序员?
作为软件开发公司来说,设计师和程序员都是不可或缺的专业人士。在整个软件开发的过程中的作用一样重要,不分彼此。但是,总有一种倾向认为设计师的地位不如程序员。
影响力不如程序员是取决于当前的大环境,因为目前国内的知识产权意识还是低下的,人民普遍认为肢体劳动比脑力劳动更辛苦,相对而言程序员比设计师有更多的物理劳动,这是大家能显而易见的。
一个出色的设计师,其实就是软件的美工设计,他应该具备相当的美术基础和艺术素养。在与客户的交流中,首先是由设计师用自己艺术手法进行创作和加工,将软件的基本雏形用平面的方式呈现给客户。在客户基本满意之后,再由程序员使用编程语言将软件的功能进行实现。这里我们可以看到,没有谁的地位高于谁的问题,就是合作关系,目的在于设计制作和完成最好的软件给客户。虽说从表象上看,「技术是里,视觉和交互是外」,然而事实上,「设计」对于产品价值的实现,以及塑造差异性、传递品牌价值等更高层面的要求是具有核心意义的。但设计终究是面向普通用户的工作,其最终的产出(不管是平面广告,还是用户界面)必然会直接面对用户。而他们中的绝大多数,只会对设计的直观表现作出感性的认识。在这种感性认识的影响下,人们很容易误以为设计的全部内容就是塑造他们所感知到的直观表现。这就造成了对于设计「谁都可以指指点点」的事实。
而开发人员不同。他们的工作主要是关于产品内部的技术细节,而这些技术细节对于普通人是不可见的,于是普通人自然也就无从评判这些内容。这一点是由职业特性决定的、无法改变的事实,然而我认为这正是设计的魅力所在:我们为普通人服务,而普通人可能不理解我们。
那么如何将我们认为好的、优美的东西在这些普通人中推行出去?这是一项非常有趣的挑战,它需要的不仅仅是设计师自身的技巧、美感和品位,还有对人群、社会和文化的理解。 -
操作系统内核seL4
seL4 是一个安全操作系统内核,旨在确保现实世界中关键计算机系统的机密性、安全性和可靠性。
seL4 是 L4 微内核家族的成员,它为系统中运行的应用之间的隔离提供了最高级别保障,可以遏制系统某一部分的危害,并防止损害系统中其它可能更关键的部分。
seL4 是世界上第一个通过数学方法被证明安全的操作系统内核,并且是世界上最快、最先进的 OS 微内核。它对于嵌入式计算系统的安全可信赖方面将会有极大意义,具体来看可能影响到航空电子、自动驾驶汽车、医疗设备、关键基础设施与国防等行业。
理论上,SeL4 可以用作 Linux 和其它类 Unix 操作系统的底层基础,甚至此前曾被考虑用于 GNU/Linux “真内核” GNU Hurd。
嵌入式计算系统的可靠性对于提高世界各地关键系统的安全性以保护它们免受网络威胁至关重要。这一点在航空电子、自动驾驶汽车、医疗设备、关键基础设施和国防等行业尤为重要。seL4微内核是世界上第一个验证了实现正确性的操作系统,它将保证、通用性和性能完美地结合在一起,是构建安全关键系统的理想基础。seL4基金会为开发人员提供了一个论坛来协作开发和集成seL4生态系统。
“Linux基金会将通过提供专业知识和服务来支持seL4基金会和社区,以增加社区参与、贡献者和采纳者,帮助将操作系统的生态系统提升到一个新的水平。”Linux基金会战略项目副总裁Michael Dolan说:“开放管理和基于标准的模型将提供一个中立、成熟和值得信赖的框架,以帮助推进一个易于部署和安全优化的操作系统。”
项目地址: http://sel4.systems/
-
Java并发流库SimpleReact
Simple-React 为 Java 8 增加了高级异步 Streams 和数据结构。这是一个 Java 8 的并发流库,提供三中 Stream 类型(LazyFutureStream、SimpleReactStream、EagerFutureStream)和三种异步数据结构(Queue、Topic、Signal)。
SimpleReact来自AOL的一个小型的支持并发的库包,其直接基于Java 8的CompletableFuture, JDK函数接口和Streams API构建,它的Fluent API能够提供解决90%的Reactive使用场景,重要的是没有带入任何复杂性。可以实现Functional Reactive Programming范式(简称:FRP,函数式响应编程)。
使用SimpleReact能够方便扩展微服务,它能用于管理微服务的远程调用,能够应付高并发大型高性能平台的要求。使用SimpleReact能够建立非堵塞的微服务和REST客户端。
SimpleReact启动于Supplier数组,其主要产生其他函数需要响应的数据,每个supplier会传递给Executor执行,都是以单独的线程执行方式。
React then允许事件reactor能够被串联,不像"React with",只返回一个Future集合,React then是一个fluent接口,能够返回React builder,允许以后的reactor能够被加入串联链条中,React then不会堵塞,React with能够在React then以后调用,只要React then提供访问完整的CompleteableFuture API,CompleteableFuture 能通过 SimpleReact.react(streamOfCompleteableFutures)被传递回SimpleReact。
项目地址: https://github.com/huangjie2016/reacts
-
Markdown编辑器Typora的增强插件VLOOK
VLOOK
是针对由 Typora导出的 HTML 文件进行增强的插件。VLOOK
属于开源软件,遵从 MIT 许可证。
VLOOK
已为你内置了多套原创、独具风格的主题样式,能满足日常大多不同的应用场景和视觉偏好。同时VLOOK
项目也现已开放了主题的 私人定制服务。
如果你也有以下一个或多个需求或痛点,就可以放心地尝试基于 Markdown 的解决方案进行文档的编辑、发布、管理:团队或项目的文档须统一模板与输出,并能随时切换不同模板;只关注文档内容的撰写,排版这种工作希望能自动化完成;以网络作为主要的发布渠道,要发布为 HTML 格式,同时能发布为 PDF 等其它常用格式;减少在文档、制图等软件工具方面的购买支出;需要支持跨平台进行文档的编辑的与输出的软件工具;文档排版、交互、个性化主题等功能方面,具备可持续升级的能力和开放性。
VLOOK
充分挖掘和扩展了 Markdown 和 Typora 的语法和功能,并结合现代网络化的文档编辑和出版中涉及的文档的 格式排版、文档导航、演示辅助、内容交互 等方面的需求,为你提供基于 Markdown 的文档编辑、文档发布、文档阅读者提供 一致、简洁、友好 的体验。
你只需要按 GFM 添加图片的 Markdown 语法,VLOOK
就会自动为你的图片添加图注。 如果你要为表格、mermaid 图表,甚至还要同时支持两个题注,这些都可以使用 VLOOK
扩展的类似添加图片的语法就能轻松实现。
项目地址: https://gitee.com/madmaxchow/VLOOK
-
Android日历CalendarView-huanghaibin
CalendarView-huanghaibin 是Android上一个非常优雅、高度自定义、性能高效的日历控件,完美支持周视图,支持标记、自定义颜色、农历等,任意控制月视图显示、任意日期拦截条件、自定义周起始等。
Canvas绘制,极速性能、占用内存低,支持简单定制即可实现任意自定义布局、自定义UI,支持收缩展开、性能非常高效,这个控件内存和效率优势相当明显,而且真正做到收缩+展开,适配多种场景,支持同时多种颜色标记日历事务,支持多点触控,你真的想不到日历还可以如此优雅!
CalendarView-huanghaibin采用插拔式设计。插拔式设计就好比插座一样,插上灯泡就会亮,插上风扇就会转,看用户电器需求是什么而不是看插座有什么,只要是电器即可。
为了让日历更加开放,此框架使用热插拔式设计,既可以在编译时指定年月日视图,也可在运行时动态更换年月日视图,从而达到UI即插即用的效果,只需遵守插拔式接口即可随意定制,自由化程度非常高。
CalendarView的终极特性是基于 Canvas 绘制,极速性能;采用热插拔思想,任意定制周视图、月视图,即插即用!支持单选、多选、范围选择、国内手机日历默认自动选择等选择模式;支持静态、动态设置周起始,一行代码搞定;支持静态、动态设置日历项高度、日历填充模式;支持设置任意日期范围、任意拦截日期;支持多点触控、手指平滑切换过渡,拒绝界面抖动类 NestedScrolling 特性,嵌套滚动;既然这么多支持,那一定支持英语、繁体、简体,任意定制实现。
项目地址: https://gitee.com/huanghaibin_dev/CalendarView
-
巧用node快速搭建一个本地服务器,前端调试首选
node是前端的福音,可以帮助前端做一些服务端才能做的事情,关键是只需要会写js就可以做到
我们在开发前端的时候,有些比较简单的项目并没有用到 webpack 、PACEL 这一类的工具,但是又要模拟服务器环境调试ajax怎么办呢? 有些同学会把代码拷贝到 apache这一类的服务器中调试
这样操作起来很麻烦下面教大家一种比较简单的方式
注:在确保已经安装好node环境的前提下操作全局安装 anywhere
npm install -g anywhere
进入调试的目录中运行 anywhere 命令
PS E:\work> anywhere 3000
看到下方结果,证明咱们搭建的静态服务器已经运行成功啦!
在浏览器输入地址查看效果吧!PS E:\work> anywhere 3000 Running at http://10.8.0.90:3000/ Also running at https://10.8.0.90:3001/
-
requestSubscribeMessage:fail can only be invoked by user TAP gesture.
在使用微信订阅消息服务的时候,调用 wx.requestSubscribeMessage 提示如下错误
VM180:1 Uncaught (in promise) thirdScriptError {"errMsg":"requestSubscribeMessage:fail can only be invoked by user TAP gesture."} Object
求解!
-
RE: 小程序 live-player 无法播放视频流
-
确保视频流地址可播放
rtmp 视频流可以在网上搜索,找一个现成的测试,比如电视台的视频流一般都是常年可用的 -
live-player 对使用方有资质要求,需要使用方有网络文化经营许可证,然后在后台添加好相应的服务类目
-
在小程序后台开发中找到接口设置,把实时音视频录制何播放功能打开
按照上述步骤操作完成后,在页面中直接使用 live-player 就可以播放啦!
-