【个人网站设计】【2】【javascript特效】

效果图：

 

 

 

步骤：

1.获取本机的北京时间document.getElementById("myclock").

innerHTML="<h1>你好，现在是北京时间：<br/>"+yy+"年"+tt+"月"+dd+"日"+"  "+hh+":"+mm+":"+ss+" "+apn+"  星期"+ww+"<h1>";

2.轮播图片<img id="myimg" src="image/1.PNG" height="280" width="180"></li></ul>

3.随机码的获取与验证  <div>验证码：  

    <input type = "text" id = "input"/>  

    <input type="button" id="code" οnclick="createCode()" style="width:60px" title='点击更换验证码' />

    <input type = "button" value = "验证" onclick = "validate()"/>

  </div>  

4.菜单各种按钮功能//<ul class="navbar-nav mx-auto">

<li class="nav-item">

<a class="nav-link page-scroll" href="#home">首页 <span class="sr-only">(current)</span></a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#about">初次见面</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#experience">就学经历</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#education">实时动态</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#skills">简历</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#services">爱好</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#testimonials">相册</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#portfolio">作品</a>

</li>

            <li class="nav-item">

<a class="nav-link page-scroll" href="#contact">留言板</a>

</li>

<li class="nav-item">

<a class="nav-link page-scroll" href="#contact">联系方式</a>

</li>

</ul>

代码如下：

//获取本机的北京时间function disptime(){
	var today=new Date();
	var yy=today.getFullYear();
	var tt=today.getMonth()+ 1;
	var dd=today.getDate();
	var hh=today.getHours();
	var mm=today.getMinutes();
	var ss=today.getSeconds();
	var ww=today.getDay();
	var apn="AM";
	if(hh>12){
		hh=hh-12;
		apn="PM";	
		}
	switch (today.getDay()){
		case 0:ww="星期日";break;
		}
	document.getElementById("myclock").
	innerHTML="<h1>你好，现在是北京时间：<br/>"+yy+"年"+tt+"月"+dd+"日"+"&nbsp;&nbsp;"+hh+":"+mm+":"+ss+"&nbsp;"+apn+"&nbsp;&nbsp;星期"+ww+"<h1>";	
	var mytime=setTimeout("disptime()",1000);//递归实现隔一秒调用一次	
	}
//var mytime=setInterval("disptime()",1000);
var count=1;
function shudan(){
	document.getElementById("myimg").src="shudan/"+count+".JPG";
	if(count<=3)
	count++;
	else{
		count=1;
		}
	var mytime=setTimeout("shudan()",1000);	
	}
//轮播图片function show1(){
	if(document.getElementById("art1").style.display=="none"){	
	document.getElementById("art1").style.display="block";
	}
else{
	document.getElementById("art1").style.display="none";	
	}	
}

function show2(){
	if(document.getElementById("art2").style.display=="none"){	
	document.getElementById("art2").style.display="block";
	}
else{
	document.getElementById("art2").style.display="none";	
	}
}
function show3(){
	if(document.getElementById("art3").style.display=="none"){	
	document.getElementById("art3").style.display="block";
	}
else{
	document.getElementById("art3").style.display="none";	
	}
}

//留言板功能 function checkusername(){
        var username=document.getElementById("username");
        var usernameerror=document.getElementById("usernameerror");
        var unamevalue=username.value;
        if(unamevalue.length<6||unamevalue.length>20){
            usernameerror.innerHTML="<font color='red'>用户格式不对</font>";
            return false;
        }else{
           usernameerror.innerHTML="正确";
            return true;
        }  
   }  
function checkuserphone(){
       var userphone=document.getElementById("userphone");
        var userphoneerror=document.getElementById("userphoneerror");
        var useruserphonevalue=useruserphone.value;
        var reg=/^[1][3,4,5,7,8,9][0-9]{9}$/;;
        if(!reg.test(userphonevalue)){
  userphoneerror.innerHTML="<font color='red'>号码格式不对</font>";
      return false;
        }else{
           userphoneerror.innerHTML="正确";
           return true;
        }
   }
   
   function checkuseremail(){
       var useremail=document.getElementById("useremail");
        var useremailerror=document.getElementById("useremailerror");
        var useremailvalue=useremail.value;
        //liubao@tom.com  
        //js  /正则表达式/
        var reg=/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
        if(!reg.test(useremailvalue)){
            useremailerror.innerHTML="<font color='red'>邮箱格式不对</font>";
            return false;
        }else{
           useremailerror.innerHTML="正确";
           return true;
        }
   }
 function formsub(){
      if(checkusername()&checkuserphone()&checkuseremail()){
           return true;
      }else{
          return  false;
      }
   }
//各种按钮的实现$(function () {
    // init typist
    new Typist(document.querySelector(".typist"), {
        letterInterval: 60,
        textInterval: 1000
});

    // init feather icons
    feather.replace();

    //scrollspy init
    $('body').scrollspy({target: '#beleme-navbar'});

    // init tooltip & popovers
    $('[data-toggle="tooltip"]').tooltip();
    $('[data-toggle="popover"]').popover();

    //page scroll
    $('a.page-scroll').bind('click', function (event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1000);
        event.preventDefault();
    });

    //toggle scroll menu
    $(window).scroll(function () {
        var scroll = $(window).scrollTop();
        //adjust menu background
        if (window.innerWidth < 768) {
            $('.sticky-navigation').removeClass('sticky-top').addClass('fixed-top');
        } else {
            $('.sticky-navigation').removeClass('fixed-top').addClass('sticky-top');
        }

        // adjust scroll to top
        if (scroll >= 600) {
            $('.scroll-top').addClass('active');
        } else {
            $('.scroll-top').removeClass('active');
        }
        return false;
    });

    // scroll top top
    $('.scroll-top').click(function () {
        $('html, body').stop().animate({
            scrollTop: 0
        }, 1000);
    });

    // init slick slider
    $('.slick-slider').slick({
        slidesToShow: 2,
        slidesToScroll: 1,
        dots: true,
        arrows: false,
        responsive: [
            {
                breakpoint: 768,
                settings: {
                    slidesToShow: 1,
                }
            }
        ]
    });

    $('.slick-users').slick({
        slidesToShow: 1,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 3000,
        dots: true,
        arrows: false
    });

    /**Theme switcher - DEMO PURPOSE ONLY s*/
    $('.switcher-trigger').click(function () {
        $('.switcher-wrap').toggleClass('active');
    });
    $('.color-switcher ul li').click(function () {
        var color = $(this).attr('data-color');
        $('#theme-color').attr("href", "css/" + color + ".css");
        $('.color-switcher ul li').removeClass('active');
        $(this).addClass('active');
    });
});
//随机码的获取与验证var code ; //在全局定义验证码         
function createCode(){ 
  code = "";  
  var codeLength = 4;//验证码的长度  
  var checkCode = document.getElementById("code");  
  var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',  
                         'S','T','U','V','W','X','Y','Z');//随机数  
  for(var i = 0; i < codeLength; i++) {//循环操作  
    var index = Math.floor(Math.random()*36);//取得随机数的索引（0~35）  
    code += random[index];//根据索引取得随机数加到code上  
  }  
  checkCode.value = code;//把code值赋给验证码  
} 
//校验验证码  
function validate(){  
  var inputCode = document.getElementById("input").value.toUpperCase(); //取得输入的验证码并转化为大写     
  if(inputCode.length <= 0) { //若输入的验证码长度为0  
    alert("请输入验证码！"); //则弹出请输入验证码  
  }else if(inputCode != code ) { //若输入的验证码与产生的验证码不一致时  
    alert("验证码输入错误！@_@"); //则弹出验证码输入错误  
    createCode();//刷新验证码  
    document.getElementById("input").value = "";//清空文本框  
  }else { //输入正确时  
    alert("合格！^-^"); 
  } 
}