分类目录归档:Web 服务器类别

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

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服务器的随机选择

CNAME与A记录的解释与选择

在我们搭建网站中最重要的一步就是设定好域名与服务器之间的解析记录,解析就是“引导”,解析记录选择的好与不好,多少都会影响到访问流量访问到服务器的时间效率。

先讲一个小场景:有一天,你邀请你的朋友到你的新家做客,分享乔迁之喜,你首先就是要打电话告诉你的朋友尽可能详细的新家地址。

聪明的你想了两种方案:① A方案;②CNAME方案

① A方案:告诉你的朋友,我的新家地址在 12142小区 104211户(即主机IP地址是:121.42.104.211),你朋友会按照详细的地址找到你的新家。

② CNAME方案:只告诉你的朋友自己家的小区名称和地址,当朋友来到小区大门的时候,给保安登记,说要到 nousbuild.org 家,保安会把你领到我家的门口,或者直接告诉你我家的详细地址 104211户,再自己找到地址。

解释:
A记录:将域名指向一个IPv4地址(例如:10.10.10.10),需要增加A记录。
CNAME记录:如果将域名指向一个域名,实现与被指向域名相同的访问效果,需要增加CNAME记录。

我们可以发现,CNAME 值时仍要使用主机IP,这比直接连接主机IP多走了一步。但这对于域名服务器来说,只是稍微占了点内存,CPU多运算一点。

所以,A记录解析适合解析固定IP,一般都采用 A 记录解析。但是如果你的网站使用了CDN加速服务,那么就需要改成 CNAME 解析记录,并且指定到服务商给你提供的CDN加速服务器地址上。

继续阅读CNAME与A记录的解释与选择