分类 前端 下的文章

自从网易博客玩球后，改用 Typecho 写日志已经有一段时间。可能我要求比较低，一直满意。

心血来潮想加个日历插件在右侧栏上, 搜了下现有的插件emmm ...只有一个2016年的版本，功能比较简陋就真的只显示个月历而已。
眼看博客程序已经3年没有更新，估计是指望不上别人自己动手改造一个。
看了一下 Typecho的插件开发说明，嫌麻烦。还是按自己熟悉的粗暴手法来强行嫁接吧！

最终效果如图（如果没出错的话应该在页面右边已经看到实物了）

QQ截图20201010034140.png

我要实现的功能不多

  1. 要能显示月历，能前后翻月
  2. 样式要简洁，不突兀，与界面低调融合在一起
  3. 要标记有博客的日期，点上去的话要切换到当天
  4. 如果从下面按月归档的链接点进去的话，日历要跟随切换到当前月份

想了下，我用过的layDate日历插件应该能满足这个需求，也是一个已经3、4年没有更新的项目正好凑一对。
下面开干！




- 阅读剩余部分 -

用chrome从甲方提供的网页上保存了一批图片素材用于制作H5活动页。发布后反馈iOS上部分图片不显示，自己测试确实如此，找微信客服也抓头没办法解决只给了一些常规套路让我检查是不是文件太大，路径有中文、文件名大小写之类的问题。

最离谱的是 图片url直接在微信里也是打不开的，用图像处理软件处理过（tinypng压缩）也还是不显示。但是在安卓和PC端的开发工具上显示则正常。

情况实在太诡异，最后用文本工具直接打开图片，看到头部 RIFF ... WEBPVP8 ！！！ 恍然大悟

QQ截图20200928151342.png

Chrome保存的时候帮我转换成了 webp?!

试试直接在 Safari 里打开有问题的素材url ，果然是iOS自身不支持webp，也不能显示。

解决办法无他，webp-> jpeg/png 替换掉原素材，完事！

接了个H5小游戏的需求，用到一个第三方的开源代码，其中用到了名为 lufylegend 的canvas框架。

上手难度不高，唯一遇到的问题是发现它和 jQuery配合使用时 .click() .bind() 交互事件时无法触发。
看了控制台并没有报错，怀疑是 lufylegend 对象初始化时为了避免触摸拖拽点击等交互的一些用户行为冲突所以屏蔽了。

结论很简单就网上搜到了，确实如此，解决的办法也不难，只需要在js初始化控件的时候加上一行

LGlobal.preventDefault = false; //允许jquery点击事件

我的项目UI只有一屏高，不涉及滚屏滑动，所以设置前后没有感觉到对原来的游戏交互影响

问题解决。

演示地址： https://gen8.orz.com.cn/beta/bg180/

应需求方的要求，在页面增加一些动态元素增加引导交互效果。

关键在于 CSS的animation(keyframes) 和 background-position 两个属性组合

animation: anibg 13s ease-in-out infinite;

……

@keyframes anibg {
    0% {background-position: left center;}
    50% {background-position: right center;}
    100% {background-position: left center;}
}

是的你没看错，是从https切换回http。这个开倒车的奇怪需求是由于

腾讯云直播API生成 HLS拉流地址默认是 http （尽管文档声称支持 https 但依然会触发证书与域名的不匹配，显示更难看的红色警告标签，而且同样会导致资源加载失败）
QQ截图20200520092043.jpg

控制台报警：

已拦截跨源请求：同源策略禁止读取位于 https://XXXXXX.com/live/XXXXXX.m3u8 的远程资源。（原因：CORS 请求未能成功）。
无法加载视频文件，请检查网络，以及视频文件是否允许跨域请求访问，m3u8文件是否存在

而在https协议下调用http资源这种做法，主流浏览器是被拦截禁止的，可参考
Firefox浏览器的安全说明 与截图：

QQ截图20200520085519.jpg

  • 但是！目前在移动端（微信）下暂时还可以偷鸡这样搞，直播视频依然可以正常加载。

因此我需要：

判断当前用户是PC端浏览器访问且访问的是HTTPS时跳转到HTTP，回避所有的问题！

以下是简单实现方法：




- 阅读剩余部分 -

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6