基于HTML5的网络课堂前端开~ - 图文(6)

洛阳师范学院2016届本科生毕业设计

}

}

alert('密码格式错误');

else if(inn[0].value.length<8||inn[0].value.length>12){ }

alert('密码由8-12位纯数字组成');

Php部分对数据库的操作：

header('Content-type:text/html;charset=utf-8'); mysql_connect('localhost','root',''); mysql_query('set names utf8'); mysql_select_db('student'); $pnu=$_GET['phonenumber']; $newpswd=$_GET['newpassword'];

$opt=\student SET password='{$newpswd}' WHERE phonenumber='{$pnu}'\$res=mysql_query($opt); //if(mysql_query($opt)){

echo '{cod:1,msg:\密码修改成功\//} ?>

4.4.2 网络课堂前端设计的主界面

1. 打开此网络课堂的首页

头部效果：大图滚动

实现图片渐变轮换：

var tim=null;

var num=0;

20

基于HTML5的网络课堂前端设计

var tim1=null; function auto(){ }

function mov(){ }

tim1=setInterval(mov,3000); for(var i=0;i

lis2[i].onclick=function(){

clearInterval(tim1);

for(var i=0;i

lis2[i].className='li2'; if(lis2[i]==this){ }

21

clearInterval(tim); var nm=0;

tim=setInterval(function(){

nm+=0.02; if(nm>=1){ }

lis[num].style.opacity=nm; lis2[num].className='li1';

clearInterval(tim); nm=1;

},20)

for(var i=0;i

lis[i].style.opacity=0; lis2[i].className='li2';

num++;

if(num>=lis.length){ } auto();

num=0;

num=i; auto();

洛阳师范学院2016届本科生毕业设计

}

tim1=setInterval(mov,3000);

}

未登录界面的主题部分

现在去登陆的onclick事件：

您现在还没登陆!

实现页面的基本跳转

2.已登录界面

登录后页面和未登录页面基本类似，但实现了未登录页面实现不了的基本功能： 一句话介绍自己，可修改： ipt[0].onfocus=function(){ ') {

}

if(ipt[0].value=='一句话介绍自己，让别人更了解你'){ }

else if(ipt[0].value.length>=20){

ipt[0].value=''; }///判断字体的个数?

ipt[0].value='';

ipt[0].style.border='1px solid #ccc';

ipt[0].onblur=function(){

if (ipt[0].value!=''&&ipt[0].value!='一句话介绍自己，让别人更了解你

ipt[0].style.textAlign='center';

22

基于HTML5的网络课堂前端设计

}

}

ipt[0].style.border='';

else if(ipt[0].value==''){ }

ipt[0].value='一句话介绍自己，让别人更了解你'; ipt[0].style.border='';

查看更多功能的代码：

but.onclick=function(){

var ds=bd2l21.cloneNode(true);//true深复制 bd2l2.appendChild(ds); if(bd2l2.offsetHeight>=400){ }

bd2l2.style.overflow='scroll'; bd2l2.style.overflowX='hidden'; bd2l2.style.height=300+'px';

}

实现提问及提交问题代码：

input.onclick=function(){

if(txt.value!=''){ } else{

23

var p=document.createElement('p'); p.style.marginLeft=20+'px';

p.innerHTML='提问:'+txt.value+'

var ipp=document.onclick=function(){ }

var div=bd1_21.cloneNode(true); bd1_2.appendChild(div); txt.value='';

ul3.style.borderBottom='1px solid #eee'; dii1.style.display='none';

ipt1.value='已回答';

value=\回答\

洛阳师范学院2016届本科生毕业设计

}

}

alert('您的评论为空');

bd2r2.style.height=(bd2r2.offsetHeight-h)+'px'; dii1.style.display='none';

}

实现评论及提交（功能类似）：

lis3[0].onclick=function(){

}

dii1.style.display='block'; var h=dii1.offsetHeight; var bd2h=bd2r2.offsetHeight; bd2r2.style.height=h+bd2h+'px'; input.onclick=function(){ }

if(txt.value!=''){ } else{ }

alert('您的提问为空');

bd2r2.style.height=(bd2r2.offsetHeight-h-4)+'px'; dii1.style.display='none';

var p=document.createElement('p'); p.style.marginLeft=20+'px'; p.innerHTML='提问:'+txt.value; dii2.appendChild(p);

var div=bd1_21.cloneNode(true); bd1_2.appendChild(div); txt.value='';

ul3.style.borderBottom='1px solid #eee'; dii1.style.display='none';

bd2r2.style.height=bd2r2.offsetHeight-40+'px';

lis3[1].onclick=function(){

dii1.style.display='block'; var h=dii1.offsetHeight;

24