分类 其他 下的文章
-
React组件间通信
近期为了练习react，自己写了一个Demo，功能很简单，展示员工信息列表，支持按性别和姓名筛选。效果如下： 默认： 筛选： 删除： 引用的文件如下： <script src="js/react.js"></script> <script src="js/react-dom.js"></script> <script src="js/browser.min.js"></script> 核心代码： <body&g......
-
移动端一段小动画竟影响了苹果机文字无法复制？
昨天做了一项目，添加礼包，以及礼包弹窗，弹出序列号以供用户手动复制，而坑便在这深埋了，苹果机竟然无法复制，安卓机挺正常的。项目 git链接在此 ，效果如下图： 无奈，最后在组长与军爷合力排查完美解决了，再次献上我的膝盖(～ o ～) 解决过程：把样式全部去掉，发现页面是可以复制的，接着一步步添加样式，这个过程也挺心累的！最后定位在一段小动画上 一个下拉指示按钮的动画上 @-webkit-keyframes upDown2 { 0% { bottom: 0.4rem; } 100% { bottom: 0.6rem; ......
-
自定义命令行工具基于Nodejs
每个人都会做一些简单的小工具去方便自己平时的工作，比如批处理文件。写个有界面的工具吧，有点费劲和没必要；如果能在命令行里面敲几个简单命令就能完成，就方便很多了，而我们又是前端开发，基于nodejs，学习的门槛就更低了 一、前期准备 需要下载两个node的插件 liftoff （执行命令行插件） minimist （读取命令行参数插件） 二、文件夹结构 需要将文件内容保存在指定文件夹才有效：windows用户一般为在C:\Users\用户名\AppData\Roaming\npm npm |--hello.cwd //windows下的命令入口文件(自定......
-
关于“新闻发布系统”旧模板，产生“业务异常”提示弹窗情况
项目过程中，新闻文发布系统（用旧模板）操作时，遇到过两次，业务异常提示弹窗情况，这里简单列一下。 1、模板代码出现特殊字符 比如：如下代码，移动端底部通用的公众号弹窗代码，含有特殊字符򠀂与򠀅，导致保存模板的时候提示”业务异常“而无法保存。（这里有个疑惑，为什么他人建这个模板的时候，能保存成功。我在这个模板的基础修改，因特殊字符-（模板原有的）导致提示异常弹窗。知道原因的小伙伴扣下我哈） <!-- 公众号弹窗--> <div class="mask" id="md_attention&......
-
记使用新模板语言踩的坑
最近有个项目是用新cms语言来做的，因为是第一次使用，所以总会遇到一些小问题，在这里跟大家分享下。链接在此； 1、在使用新CMS模板语言之前记得安装cms插件 2、在发布系统添加新项目时，CMS类型记得勾选“是”，否则该项目就是普通项目，不会同步东西到CMS那边； 3、在项目中，include要用相对路径（否则在发布系统发布不了，会报错）。比如： global_include/config.html 4、使用新CMS模板语言的项目在发布系统发布后，会在六马系统自动生成相对应的模板和相对应的页面。 在项目中，我们需要在cms_config.js这个文件配置相对应的页面信息。如下......
-
这片云加了特效，Duang Duang Duang
首先，看下效果页面，感受一下。点我 是不是有点炫咧，这就是运用WebGL简单实现的效果，下面我们一起来看看代码吧。 Three.js 一个优秀的WebGL开源框架，官网地址https://github.com/mrdoob/three.js。点进去你会发现有好多酷炫的效果，而且基于这个库可以快速地写出3d程序。上面的镇魔曲手游官网的云海效果就是基于three.js实现的。 刚开始接触到Three.js，好多东西都是一头雾水的，然后官网的文档说明又是英文，阅读起来实在困难。在此强烈推荐一个中文基础教程，个人觉得对各种术语以及图形的构造和渲染理解起来相对简单些。英语厉害的同学可以忽略。......
-
分享到qq好友的问题
我们的分享组件，有一个很少用的分享按钮——分享给qq好友，如下图： 非常少用，一用就有坑。 设置分享信息问题 qq官方文档里面提到是可以自定义分享信息的，而我们组件也有设置的，但是实际测试发现有点问题： 分享弹窗时信息是正确的，如下图： 但真正分享后，显示在聊天窗口的是这样的： 测试地址体验： 第一个测试地址可以通过第二个例子体验，因为其它例子都是没有设置自定义分享信息的： 测试DEMO1》》 测试DEMO2》》 注意，这种分享测试是有缓存的，建议每次测试，地址加上不同的参数 如何解决 测试大半天，发现除了分享图片成功设置外，分享标题和分享描述都无法真正设置成功。 但是......
-
移动端300ms点击延迟和点击穿透问题
闲暇中get到一点小知识，整理一下与大伙分享。 一、移动端300ms点击延迟 一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。 原因 早些时候为了应对小屏幕浏览桌面端站点的问题，于是有了双击缩放，也是上述300 毫秒延迟的主要原因。 双击缩放与300ms延迟的联系： 假定这么一个场景。用户在移动端浏览器点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还......
-
bootstrap3入门运用
相信大家对于bootstrap并不陌生，但是对于传说中优先兼容移动端的bootstrap3，则不一定很熟悉。对此我进行了一番入门实践。 引用的文件如下： <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <script src="js/jquery-2.0.3.min.js"></script> <script src="js/bootstrap.min.js&quo......
-
浅谈跨域的几种方式
跨域，在平常工作中经常遇到，也经常被一些人问到跨域的处理方式。虽然处理跨域的几种方式都有用过，但是每次提到跨域的时候经常晕乎一下先，所以在这里总结一下平时用过的几种跨域方式 1、通过jsonp跨域 在js中，我们直接用XMLHttpRequest请求不同域上的数据是不可以的，而在html中，能够实现跨域的就几种： link属性（css） href属性（a标签） src（img标签、script标签） 为了解决跨域的问题，结合script能够发起跨域请求的原理，产生了jsonp，即：动态的创建script标签，跨域的地址加上需要传送的数据和回调函数为script标签的src地......
-
上传图片样式统一及注意事项小结
本文主要介绍上传图片样式统一及注意事项 参考页面：梦幻西游手游广州见面会专题 前言： 首先我们了解一下各浏览器的浏览按钮的样式是不一样的，以下借用网上常用浏览器下上传文件样式的各种截图。 但是他们有以下几点共同特性： 1.都可以设置整体的宽度和高度，但在IE，火狐，opera中设置宽度是不影响浏览按钮的宽度。 2.谷歌中只要是input的区域都可以单击弹出窗口；IE中，单击浏览按钮可以弹出。 3、设置input字体大小，IE、火狐、Opera的浏览按钮都变大了（宽与高）（这点很重要）。 实现上传图片样式统一具体步骤： 效果预览图： 以下是实现的html代码: <a......
-
分享几个在开发中遇到的一些小问题
1、修改chrome记住密码后自动填充表单的黄色背景 主要通过input : -webkit-autofill来进行修改！ input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000; } 2、修改输入框placeholder文字默认颜色-webkit-input-placeholder input标签的placeholder 属性我们都常用到，它用来显示提示信息。提示会在输入字段为空时显示，并会在字段获得焦点时消失。这很好用。但placeholder 属性对于的样......
-
index总结和移动兼容问题
做项目经常要用到index，关于index的几种用法，常常感到困惑。总结了一下，在这里列出来分享下。 1、index索引问题 <div id="nav"> <a href="#">建站素材</a> <p>建站素材</p> <a href="#">jquery特效</a> <a href="#">懒人主机</a> <a href="#&qu......
-
weui+react实践
继上个月使用weui以后，我把react和weui结合起来做了一个表单，对输入的内容进行检验，检验内容有姓名、学号、手机号。 引用的文件如下，均为weui或react的文件： <link rel="stylesheet" href="css/weui.css"/> <link rel="stylesheet" href="css/example.css"/> <script src="js/react.js"></sc......
-
小白带你探索WebP（下集）
上回说到如何判断浏览器是否支持webp。 可以通过加载一张比较小的webp格式的图来达到目的。 function check_webp_feature(callback) { var kTestImages = 'UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA=='; var img = new Image(); img.onload = function () { var result = (img.width > 0) && (img.h......
