分类目录归档:JavaScript 类别

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实现可重复倒数读秒

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年份

PHP基于Linux服务器的随机选择

和朋友们一起聚会、参加活动,有时候想制作一个小小的抽奖程序来分法纪念品?不知道午饭或晚餐吃什么?你需要一个随机选择工具,来帮助解决你的困难选择症 :-)

展示效果:Demogithub_link

为了基于Linux服务器实现可以实时调取摄像头并上传照片的效果,编写时采用了PHP嵌套HTML的方法,在HTML主页面框架的先前插入了以下的PHP代码:

<?php
 $dir = "images/";
 $img = "";
 if (is_dir($dir)){
     if ($dh = opendir($dir)){
         while (($file = readdir($dh))!= false){
         if( $file<>'' && strlen($file)>2 ){
             $img .= '"'.$file.'",';
                                            }
                                                }
                             }
  $img = substr($img, 0, ( strlen($img)-1));
                  }
?>

一、基于Linux服务器的实时采集图片

你可以访问演示Demo页面的下一个目录  /camera/index.php 来启用摄像头的功能。

二、JavaScript实现随机选择

原理上是使用了JavaScript来实现对 /images 目录下的所有照片参与随机的选择:

$(function(){
  
  var alldata = new Array(<?php echo $img;?>);
  var num = alldata.length - 1;
  var show = $("#show");
  var btn = $("#btn");
  var open = false;
 
  function change(){
   var randomVal = Math.round(Math.random() * num);
   var prizeName = alldata[randomVal];
   show.html("<img src='images/"+prizeName+"' />");
  }
  
  function run(){
   if(!open){
    timer=setInterval(change,50);
    btn.removeClass('start').addClass('stop').text('Stop');
    open = true;
   }else{
    clearInterval(timer);
    btn.removeClass('stop').addClass('start').text('Start');
    open = false;
   }
  }
  
  btn.click(function(){run();})
  
 })

以上代码中用深绿色标注出来的就是timer计时器,用这段代码来控制变换的速度;用红色标注出来的就是选择目录。

random-selection-page 继续阅读PHP基于Linux服务器的随机选择

使用视频做网页背景

使用简短的视频来替换以往的静态图片,可以使信息展现的更为丰富,也能给人们留下比较深刻的印象。

展示效果:Demogithub_link

 

注意考虑因素:
1) 视频应该设置为autoplay,但默认情况下应设为静音,或者不应该包括声音

2) 视频应该显示是回落至浏览器不支持 HTML5 的静态背景图像的图像占位符。占位符图像也将在移动设备上使用背景,因为大多数的手机和平板电脑都不支持autoplay

3) 长度需要注意:太短视频能感觉到重复(像大多数这类的视频将设置为循环播放),时间太长而成为叙事归本身,因此值得要一个单独的设计元素。建议大约12-30秒的时长。

4) 可访问性是很重要:在视频上放置任何文本应在高对比度。用户应当能够轻松访问到 UI 控件以暂停视频;理想情况下,视频播放所要经过只有一次。

5) 带宽是一个大问题视频需要较小,而且尽可能有效地压缩。同时,它需要在不同的设备和他们相关的屏幕之间进行缩放。尽量保持视频大小小于 5 MB,理想情况下500KB左右为佳。

一、使用HTML5代码插入视频

<video autoplay loop poster="images/moon.jpg" id="moon"> <!--id保持一致-->
<source src="images/moon.webm" type="video/webm">
<source src="images/moon.mp4" type="video/mp4"> </video>

 二、全屏视频代码,引入CSS中

video#moon { /*id保持一致*/
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(polina.jpg) no-repeat;
    background-size: cover; 
}

注意:

对于不支持 HTML5 的浏览器,使用判断:

<!--[if lt IE 9]> 
<script> 
     document.createElement('video'); 
</script>
<![endif]-->

 之后还需将 video 标签插入到CSS中,来声明 video 是元素:

video { display: block; }

三、对于移动端的优化

特别是 iOS系统的设备,会拒绝HTML5视频的播放,需要用图片缩放来处理

将以下代码插入至CSS:

@media screen and (max-device-width: 800px) {
    html {
         background: url(moon.jpg) #000 no-repeat center center fixed;
    }
    #bgvid {
        display: none;
    }
}

这样就完成视频做网页背景的任务了!

继续阅读使用视频做网页背景

利用JavaScript给网页添加口令

给静态网页添加访问密码,不是不可能的。利用JavaScript的判定功能,就可以实现给网页添加访问口令。

代码实现:github_link

<script LANGUAGE="JAVASCRIPT">
<!--
loopy()
function loopy() {
var sWord =""
while (sWord != "Password") {
sWord = prompt("Your Question")
}
}
//-->
</script>
<script language="javascript">
</script>

这是实际上是一个判断语句,密码也是明码,为了达到限制发现密码,则加入 loop 循环语句,来阻碍他人获得源代码来破解密码。

例如:

替换 Your Question = 请输入密码
替换 Password = code

点击查看效果页面

如果再配合使用 JavaScript 实现禁用右键效果,可以达到更好的限制效果。点击此处查看 利用 JavaScript 实现禁用右键。

继续阅读利用JavaScript给网页添加口令