标签归档:JavaScript

(使用 HTML、JavaScript、Flask 或 Nginx)为丢失的图片显示默认图片

当在 HTML 页面上显示图片时,如果图片不存在,我们通常需要显示一个默认图片。

假设我们的图片路径在 /imgs 下,默认图片为 /imgs/default.jpg,下面是一些常见的处理方法示例。

Solution 1: HTML / JavaScript

最简单的,你可以使用 <img> 元素的 onerror 属性来设置默认图片:

<img src="/imgs/cat.jpg" onerror="this.src='/imgs/default.jpg'">

类似的,你也可以使用 JavaScript(jQuery)监听 img 元素的 error 事件(当图片地址无效时浏览器会触发这个事件):

$('img').on("error", function() {
  $(this).attr('src', '/imgs/default.jpg');  // 替换为默认图片
});

Solution 2: Flask

除此之外,你也可以在服务器端处理,以 Flask 为例,你可以写一个自定义视图函数来加载图片:

import os
from flask import send_from_directory

# ...

@app.route('/img/<path:filename>')
def get_image(filename):
    img_path = os.path.join(images_path, filename)  # 获取图片路径

    if not os.path.exists(img_path):  # 判断图片文件是否存在
        return send_from_directory(os.path.join(images_path, '/imgs/default.jpg'))
    return send_from_directory(img_path)

在模板里,使用这个视图函数获取图片 URL:

<img src="{{ url_for('get_image', filename='imgs/' + image.filename) }}" >

Solution 3: Nginx

在生产环境下,出于性能的考虑,我们通常会使用 Web 服务器(比如 Nginx / Apache) 来服务(serve)静态文件。以 Nginx 为例,你可以使用 try_files 指令来设置默认图片:

location /imgs/ {
    try_files $uri /imgs/default.jpg;
}

附注:本文改写自我的SO 回答

JavaScript计算器

用JavaScript做了一个计算器,大部分时间都花在完善样式和交互上了,现在还想着再给它添加一个主题。我发现,我喜欢把一个东西从丑变美的过程,好看比好用更吸引我。这不是一个好习惯……calculator
Demo:https://greyli.github.io/calculator/
源码:https://github.com/greyli/calculator

 

优化交互、美化样式

在这个计算器里,用到了一些处理技巧,可以让它看起来更真实和漂亮。

计算器边缘阴影

这里使用box-shadow的inset方法,也就是把阴影内嵌到元素里,让计算器看起来是有厚度的:

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), inset -1px -6px 12px 0.1px #89847e;

参考内容:https://css-tricks.com/snippets/css/css-box-shadow/

按钮按下效果

其实是设置按钮的box-shadow,按下时把box-shadow设为none,同时按钮向下移动

button {
  box-shadow: 1px 2px #666;
}

button:active {
  box-shadow: none;
  transform: translateY(4px);
}

按钮上的字不可选择

双击按钮或是拖动按钮选择会出现蓝色背景色,设置user-select去掉这个特性

.un-selectable {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

去掉按钮被选中后的蓝色边线

button:focus {outline:0;}  /* 设为none效果相同,或加上 !important */

 

typing.js——打字机效果

前一段时间,无意间在某个人的个人页面看到一个很有趣的打字机效果,可以自动的打出一段文字,删掉,然后打出另一段文字。经过半天的尝试,自己写了一个出来。因为没有系统学过JavaScript(只看过一本JavaScript编程精解……),写出来的代码不够简洁和优雅,嵌套了太多if语句。欢迎到Github上提交修改。

GitHub项目地址: https://github.com/greyli/typing.js

DEMO

打字机效果很适合用在个人页面和主页的头部,下面是几个示例。

用法

首先把CSS和JS文件放到相应的目录下,然后在HTML文件里分别引入这两个文件:

CSS

<link href="typing.css" rel="stylesheet">

JS

<script src="typing.js"></script>

在需要放置的地方插入下面这行

<span id="words"></span><span id="cursor">|</span>

cursor是文字后面闪烁的光标,你可以更换它。

最后在末尾设置你要定义的字段和相关的设置。首先你需要定义一个数组,然后写入单个或多个字段。

<script>
  var strings = new Array("一段文字"); // 单个字段
</script>
<script>
  var strings = new Array("文段1", "文段2"); // 多个字段
</script>

可选的设置有打字速度和删除速度,是否循环(默认为循环)等。

<script>
  var strings = new Array("文段1", "文段2") ; // multi words
  var typingSpeed = 100; // 打出每个字的间隔时间
  var deleteSpeed = 40; // 删除每个字的间隔时间
  var isLoop = true; // 是否循环,true/false
  var waitTime = 800; // 打完一个字段后的等待时间
</script>

最后

如果你在使用这个JS库,那么请让我知道,我会把你加入DEMO里。