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

JavaScript更改Copyright年份

随着站点的慢慢发展和变更,网站的结构必将趋于复杂,一个小小的站点最初可能就只有两三个页面,而几年后的规模肯定不止于此。每年的元旦假期前夕,总是最痛苦的时候,因为在12月31日,要将所有页面底部的 Copyright 的年份 +1,相当于每个页面都要发生边个更,并更新到服务器上,并刷新缓存。

利用 JavaScript 代码,可以获取当前服务器上的时间(与访问设备时间无关),来自动更新年份时间。

核心的 JavaScript 语法是:

dateObject.getFullYear()

getFullYear() 方法可返回一个表示年份的 4 位数字。该方法总是结合一个 Date 对象来使用,用 Date() 函数替代 dateObject 即可。

Date().getFullYear()

核心的 JavaScript 代码已经完成,接下来需要将其引入到 HTML代码中,并在合适的位置使用,可以利用  <span></span> 确定使用位置。(设定 id = footerYear

执行代码是:

document.getElementById(id) 方法可返回对拥有指定 ID 的第一个对象的引用。

document.getElementById(id)

这里定义了 id = footerYear,所以该写代码:

document.getElementById(‘footerYear’)

tablerowObject.innerHTML=HTML。innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。仔执行 innerHTML即可,改写代码:

document.getElementById(‘footerYear’).innerHTML

即,单独的JavaScript代码如下:

document.getElementById('footerYear').innerHTML = new Date().getFullYear() + '';

还可以引入到 HTML文件中 </body> 之前:

<script type="text/javascript"> 
document.getElementById('footerYear').innerHTML = new Date().getFullYear() + '';
</script>

然后在 Copyright 年份位置引入<span></span>

Copyright <span id="footerYear">2014</span> Scenery Architecture. All rights reserved.

就会输出(2017年):

Copyright 2017 Scenery Architecture. All rights reserved.

继续阅读JavaScript更改Copyright年份

Pitch Perfect

Pitch Perfect 是一款简单的 iOS应用,能够将你的声音处理成6中不同风格的文件并播放出来。共有 Fast /  Slow, High / Low Pitch, Echo / Reverb 6种。

Pitch Perfect 的诞生离不开 Swift 3.x 以及 Cocoa Touch。我的第一款 iOS App 已经编写完成,虽然这不太可能拿上 Apple Design Awards,但也总是迈出了第一步了,成为了一名小小的 iOS 开发者 :-)

IDE

Xcode 8.3.3

macOS Sierra 10.12.6

Pitch Perfect 是一个只有2个View的简单 iOS App,在 Main.storyboard 文件中,是这样 segue 链接的。

当录制完⏺️一段声音之后,App 会自动的跳转到 View 2,进一步操作,将声音转换为 6种风格并播放。Fast /  Slow, High / Low Pitch, Echo / Reverb.

运行图片:

源代码已经发布至 Github:点击跳转

继续阅读Pitch Perfect

录制Windows内部声音

我们在不经意间听到了自己想要的一段儿音乐;或者再看直播时候,想要录取一段音频;亦或是想要电影中的几句台词录音。为了实现这样的功能,我们可以利用 Windows 内置的一些组建完成。

在今年的5月份,微软举办的 Build 2017 大会,在大会开始前,Channel 9 会有很长的一段时间播放音乐,而直播又因为技术原因,直播视频并未生成完成的多媒体文件,故不好通过抓包或者源代码分析视频地址。

但如果等 Build 2017 结束,等微软整理好发布会视频后,就不会再有机会拿到背景音乐了。

就会成为这样:

虽然有 Build 2017 的视频和字幕文件下载链接,但是我要的背景音乐不会再出现。我要的背景音乐是在直播前插入的:

声音已经在播放,但我们不好找到资源,这时,我们要利用 Windows 声卡的作用来从输出端口录制声音。

录制方法:

打开声音设置,找到录音设备,里面有一个立体声混音

立体声混音 就是我们要用的东西,将其设置为默认:

此刻,准备工作就完成了,直接使用 Windows 内置的录音软件进行录音就好啦。

录制过程中,可以将音量调大一些,这样录制出来的音频振幅大一些。

或者,直接录制完,后期用 Audition 后期处理也行。

拓展:

Build 2017 音频文件:点击查看

继续阅读录制Windows内部声音