微博输入字数作业

Original 2019-04-20 18:28:56 233
abstract:var itext,count,sendwindow.onload = function(){ // 页布加载后再进行javascript语句 itext = document.getElementById("text"); //获取TextArea句柄,通过x.value.length获取其字符长度 count = document.

var itext,count,send

window.onload = function(){ // 页布加载后再进行javascript语句

itext = document.getElementById("text"); //获取TextArea句柄,通过x.value.length获取其字符长度

count = document.getElementById("count"); //获取span.#count的句柄

send = document.getElementById("send"); //获取发布按钮的句柄

itext.style.resize="none";

remain = 150;

count.innerHTML = remain;  //初始数量

// $count.innerHTML = $num; //通过pan.#count的句柄.innerHTML调整其内容

// console.log(num); //调试


//点击textarea后,改变其边框样式

itext.onclick =function changeborder(){

itext.style.border='5px solid #CCFFFF'; //改变边框颜色

itext.style.backgroundColor="#FFFFCC" //改变背景颜色

}


//焦点脱离textarea后,恢复其边框样式

itext.onblur =function changeborder(){

itext.style.border='5px solid #FF9999'; //改变边框颜色

itext.style.backgroundColor="#FFF" //改变背景颜色

}



//先定义TextArea的某个键盘的键被松开事件,获取textarea已输入字符个数,并插入"到".count";

itext.onkeyup = function shuru(){

num = itext.value.length;

remain = 150 - num; //定义最大支持输入字符数,目前仍可输入多少个字符

count.innerHTML = remain; //x.innerHTML改变.count内容

// console.log(remain) //调试

}



//定义[发布]按钮的触发事件

send.onclick = function fabu(){

num = itext.value.length;

if(num == 0){

alert("不能发布空内容,请录入相关内容!"); //重新给textarea赋予焦点

itext.focus();

}else{

alert("此次发布的内容字符数有"+num+",发布成功啦!");

console.log(itext.value) //调试获取itext.value内容

itext.value=""; //清空textarea

itext.focus(); //重新给textarea赋予焦点


}

}

}作业00000000000002.png


作业00000000000002.png


// 总结:此节课很有意义,对javascript控制标签属性、内容有了更深刻的理解,于是在作业中自己扩展测试了另外一些事件和根据textarea的value属性调试获取textarea的内容;

Correcting teacher:西门大官人Correction time:2019-04-22 09:57:26
Teacher's summary:作业完成的非常好,只是没有看到html代码。还有尝试优化一下代码,不用全局变量的话,如何处理?

Release Notes

Popular Entries