启用树莓派FTP传输协议

树莓派搭建好了,想要远程播放歌曲?想要树莓派连电视看电影?想要树莓派下载文件并取回?这些都不用反复插拔 TF/SD卡,直接打开FTP 21号端口,进行极速的局域网传输吧~

FTP Server安装:

安装指令:

sudo apt-get install vsftpd

使用指令启动FTP服务:

sudo service vsftpd start

这样,树莓派的 FTP 服务就正式运转了。

FTP连接的账号为 pi / root / 你的树莓派账户名称;密码为树莓派对应账户的密码。

允许树莓派写入权限:

安装好 FTP 服务后,你会发现,只能将树莓派的文件拷贝到终端上,而不能将文件写入树莓派。vsftp 默认关闭了写入权限,因为当你的树莓派暴露在互联网中,易受到攻击。

550 permission denied

修改配置文件即可,输入指令:

sudo nano /etc/vsftpd.conf

找到 write_enable=YES 的,将前面的 # 号删除即可。

#write_enable=YES   →    write_enable=YES

删除注释符号后,按 Ctrl + X 保存,输入 Y 确认:

使用 FTP客户端进行文件传输

Windows下建议选择 FlashFXP 
macOS下建议选择 Transmit 

继续阅读启用树莓派FTP传输协议

树莓派Windows远程桌面连接

对于购买  Raspberry Pi 而没有配备屏幕的树莓派使用者/开发者来说,远程桌面连接可谓是一个很好的替代方案,这样可以摆脱对显示器和电视的依赖,随时随地使用智能设备进行连接。

这里有两种比较通用的方法。第一种方法是使用Windows自带的远程桌面连接,这种方法支持所有Windows 7以上的操作系统,覆盖范围广,无需额外安装,传输质量高。

一、XRDP服务(Windows 远程桌面连接)

想要使用Windows远程桌面连接进行屏幕传输,你需要在树莓派上先安装 XRDP 服务,这是支持远程桌面连接的必备组件。

登陆 SSH 或者 在树莓派的命令行里执行。

安装方法:
1.首先必须安装 tightvncserver

如果你直接安装 XRDP,总共11个安装包中,可能会有2个安装包老是提示download failed,所以首先先要安装 tightvncserver

sudo apt-get install tightvncserver
2.然后在安装XRDP组件
sudo apt-get install xrdp
3.解除防火墙的限制(可选)

你的树莓派系统可能启动了防火墙UFW,它可能会阻止远程连接端口。如果你没有遇到此问题,可以忽略该步。

sudo ufw allow 3389

然后再重启防火墙UFW服务

sudo service ufw restart
4. 重启服务即可生效
sudo service xrdp restart
5.使用Windows远程桌面连接

账户:pi(默认,如果你更改请使用新账户)

6.iOS/Android 移动端桌面远程连接

  

iPhone运行截图:

二、VNC服务(需要VNC Viewer支持)
1.安装VNC组件

由于 Raspbian 内置了 VNC 服务,只需要转到配置文件打开即可:

sudo raspi-config

找到 Interfacing Options 回车进入:

找到 VNC 服务,回车进入,选择 <enable>,即自动开始更新相关组件并打开服务。

VNC 服务启动后,就可以使用 VNC Viewer 进行连接。

2.使用 VNC Viewer 连接

VNC Viewer 下载地址:点击进入

继续阅读树莓派Windows远程桌面连接

树莓派的第一步:NOOBS

树莓派安装好啦,下来就要检验树莓派的质量啦,能不能运行呢,下来就要装入系统,正式“点亮”树莓派啦,开启树莓派之旅。

准备工作:

准备格式化工具(可选),一般来说可以使用系统自带的格式化工具,只要能够将储存卡格式化成FAT32格式就可以。额外的格式化工具可以使用 SD Formatter

写入工具暂时不用准备。因为建议第一步使用 Noobs 工具。

下载系统:

进入树莓派官方网站,下载最新的操作系统

地址:https://www.raspberrypi.org/downloads/

可以看见,官方有两种操作系统:NOOBS 和RASPBIAN。你可以选择任意一个进行下载。NOOBS 内置了包括 RASPBIAN 在内的系统和部分工具。

写入SD/TF卡:

这里的“写入”真的是写入(Write),不是烧录,直接将下载的文件解压缩拷贝到目录即可。插入到树莓派中,准备通电了。

连接显示器:

如果你要连接显示器,请注意,在给树莓派通电之前,务必将显示器的信号源调整过来,然后再启动树莓派。因为树莓派再启动后是不会检测已连接的显示器的,一定要确保先准备好显示器,在启动树莓派

启动树莓派:

通电吧 :)。通电之后,会自动启动到一个系统安装界面,你选择你需要的系统进行安装即可。

继续阅读树莓派的第一步:NOOBS

JavaScript实现可重复倒数读秒

动态提示能很好的提高一个网站的人性化程度。比如下载页面,很多网站都有倒数秒的功能 “5..4..3..2..1秒钟后即将开始下载”等这样动态提示语。有时候的需求只需执行一次不用清零,而有时我们需要反复的执行倒数秒的功能。

利用 JavaScript 代码,可以重复实现倒数读秒功能。

核心的 JavaScript 语法是:

setInterval(code,millisec[,”lang”])

setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

对于只需一次调用的倒数读秒:

对于下载页面,跳转页面等,只需一次倒数读秒的,可以直接使用一次性代码即可:

在需要引用的地方插入HTML代码:

<p><span id="count-down">5</span>秒钟后自动返回文章页面</p>

其次,在网页底部引用 JavaScript:

<script type="text/javascript">
var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
    if (seconds > 0) { //若要倒数至0秒 seconds >= 0
        document.getElementById("count-down").innerHTML = seconds; //打印秒
        seconds-=1;
    } else {
        clearInterval(timer); //防止多次累加
        return;
    }
}, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数 
</script>

演示 Demo

对于#需要重复调用的倒数读秒:

在需要引用的地方插入HTML代码:

<a onclick="t54321()"><span id="count-down">5</span>秒钟后自动关闭</a>

然后,在网页底部引用 JavaScript:

<script type="text/javascript">
    function t54321() {
    var seconds = 4; //倒数5秒 4=5-1
    setInterval(function() {
        if (seconds > 0) { //若要倒数至0秒 seconds >= 0
           document.getElementById("count-down").innerHTML = seconds; //打印秒
           seconds-=1;
        } else {
           clearInterval(timer); //防止多次累加
           seconds = 4; //重置倒数秒变量
           return;
        }
    }, 1000); //每1000毫秒=1秒钟执行一次 t54321()函数
 }
</script>

演示 Demo

通过 onclick=“t54321()” 点击反复调用该函数。当然,你也可以使用其他交互方式进行调用操作。

继续阅读JavaScript实现可重复倒数读秒

根据宽度选择CSS

自适应站点的核心,就是一套代码可以在任何尺寸屏幕的设备上,恰当的展示信息。如何根据屏幕的宽度来选择性的使用 css,就尤为重要了。

总共有三种方法可以应用媒体查询:

1.样式表链接的媒体查询属性

直接在 HTML文件头部引入以下代码:

<link rel="stylesheet" media="screen and (max-width:500px)" href="1.css" />
<link rel="stylesheet" media="screen and (min-width:501px) and (max-width:599px)" href="2.css" />
<link rel="stylesheet" media="screen and (min-width:600px)" href="3.css" />

(max-width: 500px) 是指:屏幕尺寸 500px,即使用此 css。

(min-width:501px) and (max-width:599px) 是指:501px≤ 屏幕尺寸 ≤599px ,即使用此 css。

(max-width: 600px) 是指:600px≤ 屏幕尺寸,即使用此 css。

演示 Demo

1.css 的背景设置为  bisque 

即 当 屏幕尺寸 ≤500px,为      

2.css 的背景设置为  aquamarine 

即 当 501px ≤ 屏幕尺寸 ≤ 599px,为      

3.css 的背景设置为  aqua 

即 当 600px ≤ 屏幕尺寸,为      

按照代码,可以得到如下效果:

除此之外,还有以下两种方法可以实现。

2.在 @tag 标签嵌入

@media screen and (min-width: 500px) {
  body { background-color: green; }
}

3.在 @import 标签嵌入

@import url("1.css") only screen and (min-width: 500px);

但是因为性能的原因,我们应该避免使用 @import,这是一个代价和优先级都非常高的标签。

在网页设计中,你也要考虑 css 与 @media 的权衡,css引入的多了,HTTP请求次数也会增加,拖累整个网站的加载速度。要根据实际情况,合理的选择方法。

继续阅读根据宽度选择CSS