复制代码 代码如下:

javascript文本框内输入文字倒计数的方法,javascript文本框

本文实例讲述了javascript文本框内输入文字倒计数的方法。分享给大家供大家参考。具体实现方法如下:

复制代码 代码如下:

<html>
<head>
<title>文本框内输入文字倒计数效果</title>
<SCRIPT LANGUAGE=”JavaScript”>
<!– Begin
maxLen = 100; //定义用户可以输入的最多字数
function checkMaxInput(obj) {
if (obj.value.length > maxLen){ //如果输入的字数超过了限制
obj.value = obj.value.substring(0, maxLen); //就去掉多余的字
remLen.innerText = ‘您输入的内容超出了字数限制’
}
else{
remLen.innerText = ‘还剩下’ + (maxLen – obj.value.length) +
‘字’;//计算并显示剩余字数
}
}
//  End –>
</script>
</head>
<body>
<table border=”1″ width=”40%” cellspacing=”0″ cellpadding=”0″
bordercolorlight=”#000000″ bgcolor=”#808080″ height=”0″>
 <tr>
  <td width=”100%”><b><font
color=ffffff>倒计数文本框</font></b></td>
 </tr>
 <tr>
  <td width=”100%” height=”110″>
   <form name=tickform>
    <p align=”center”>
     <textarea name=msgbox rows=5 cols=31
onKeyDown=”checkMaxInput(this)” onKeyUp=”checkMaxInput(this)”
style=”background-color: #000000; color:
#FFFFFF;overflow:auto”></textarea>
    </p>
   </td>
  </tr>
</form>
 <tr>
  <td width=”100%”>
   <font align=”right”
id=remLen><b></b></font>
  </td>
 </tr>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文实例讲述了javascript文本框内输入文字倒计数的方法。分享给大家供大家参考。…

  1图片 1<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>
  2图片 2<HTML>
  3图片 3<HEAD>
  4图片 4<TITLE> New Document </TITLE>
  5图片 5<META NAME=”Generator” CONTENT=”Microsoft FrontPage 5.0″>
  6图片 6<META NAME=”Author” CONTENT=”zhaoweiwei”>
  7图片 7<META NAME=”Keywords” CONTENT=”birthday_input”>
  8图片 8<META NAME=”Description” CONTENT=”日起输入控件”>
  9图片 9图片 10<script>图片 11
 10图片 12function showdb() //显示控件/隐藏空间
 11图片 13图片 14图片 15{
 12图片 16var CurrentDate=new Date();
 13图片 17var CYear=CurrentDate.getFullYear();
 14图片 18var CMonth=CurrentDate.getMonth();
 15图片 19var CDay=CurrentDate.getDay();
 16图片 20
 17图片 21var a=document.getElementById(“input_birth”);
 18图片 22
 19图片 23var obj_year=document.getElementById(“year”); //当展开控件时自动取到当前时间(客户端)
 20图片 24obj_year.innerText=CYear;
 21图片 25var obj_month=document.getElementById(“month”);
 22图片 26obj_month.innerText=CMonth+1;
 23图片 27
 24图片 28var s=new Date(CYear,CMonth,1);
 25图片 29var startDay=s.getDay(); //日期起始数字
 26图片 30var numDays=numberOfDays(CMonth,CYear); //本月天数
 27图片 31var day=document.getElementsByName(“day”);
 28图片 32for(var j=1;j<=numDays;j++) //插入日期
 29图片 33图片 34图片 35{
 30图片 36day[startDay+j-1].innerText=j;
 31图片 37}
 32图片 38
 33图片 39
 34图片 40if(a.style.visibility==’visible’)
 35图片 41图片 42图片 43{
 36图片 44a.style.visibility=’hidden’;
 37图片 45}
 38图片 46else
 39图片 47图片 48图片 49{
 40图片 50a.style.visibility=’visible’;
 41图片 51}
 42图片 52
 43图片 53
 44图片 54}
 45图片 55function addyear()
 46图片 56图片 57图片 58{
 47图片 59
 48图片 60var obj_year=document.getElementById(“year”);
 49图片 61var obj_month=document.getElementById(“month”);
 50图片 62
 51图片 63var num_year=obj_year.innerText;
 52图片 64obj_year.innerText=parseInt(num_year)+1; //年数增加
 53图片 65
 54图片 66displayCalendar(obj_month.innerText-1,obj_year.innerText);
 55图片 67
 56图片 68
 57图片 69
 58图片 70}
 59图片 71function plusyear()
 60图片 72图片 73图片 74{
 61图片 75
 62图片 76var obj_year=document.getElementById(“year”);
 63图片 77var obj_month=document.getElementById(“month”);
 64图片 78
 65图片 79var num_year=obj_year.innerText;
 66图片 80obj_year.innerText=parseInt(num_year)-1; //年数减少
 67图片 81
 68图片 82displayCalendar(obj_month.innerText-1,obj_year.innerText);
 69图片 83
 70图片 84
 71图片 85
 72图片 86}
 73图片 87function addmonth()
 74图片 88图片 89图片 90{
 75图片 91
 76图片 92var obj_month=document.getElementById(“month”);
 77图片 93var obj_year=document.getElementById(“year”);
 78图片 94
 79图片 95if(parseInt(obj_month.innerText)>=12) //月数增加到12时,年数相应增加1,月数从1开始
 80图片 96图片 97图片 98{
 81图片 99obj_month.innerText=”0″;
 82图片 100obj_year=document.getElementById(“year”);
 83图片 101var num_year=obj_year.innerText;
 84图片 102obj_year.innerText=parseInt(num_year)+1;
 85图片 103}
 86图片 104
 87图片 105var num_month=obj_month.innerText;
 88图片 106obj_month.innerText=parseInt(num_month)+1; //月数增加
 89图片 107
 90图片 108displayCalendar(obj_month.innerText-1,obj_year.innerText);
 91图片 109
 92图片 110
 93图片 111
 94图片 112
 95图片 113}
 96图片 114function plusmonth()
 97图片 115图片 116图片 117{
 98图片 118
 99图片 119var obj_month=document.getElementById(“month”);
100图片 120var obj_year=document.getElementById(“year”);
101图片 121
102图片 122if(parseInt(obj_month.innerText)<=1) //月数减少到1时,年数相应减少1,月数从12开始
103图片 123图片 124图片 125{
104图片 126obj_month.innerText=”13″;
105图片 127obj_year=document.getElementById(“year”);
106图片 128var num_year=obj_year.innerText;
107图片 129obj_year.innerText=parseInt(num_year)-1;
108图片 130}
109图片 131
110图片 132var num_month=obj_month.innerText;
111图片 133obj_month.innerText=parseInt(num_month)-1; //月数减少
112图片 134
113图片 135displayCalendar(obj_month.innerText-1,obj_year.innerText);
114图片 136
115图片 137
116图片 138
117图片 139}
118图片 140
119图片 141function numberOfDays(month,year) //取得每月天数,判断平年闰年
120图片 142图片 143图片 144{
121图片 145var numDays=new Array(31,28,31,30,31,30,31,31,30,31,30,31);
122图片 146n=numDays[month];
123图片 147if(month==1&&year%4==0) ++n;
124图片 148return n;
125图片 149}
126图片 150
127图片 151function displayCalendar(month,year)
128图片 152图片 153图片 154{
129图片 155
130图片 156var d=new Date(year,month,1);
131图片 157var startDay=d.getDay(); //日期起始数字
132图片 158var numDays=numberOfDays(month,year); //本月天数
133图片 159
134图片 160var day=document.getElementsByName(“day”);
135图片 161for(var i=0;i<day.length;i++)
136图片 162图片 163图片 164{
137图片 165day[i].innerText=””;
138图片 166}
139图片 167for(var j=1;j<=numDays;j++) //插入日期
140图片 168图片 169图片 170{
141图片 171day[startDay+j-1].innerText=j;
142图片 172}
143图片 173
144图片 174}
145图片 175function writeDate(n)
146图片 176图片 177图片 178{
147图片 179document.writeln(“<H3 ALIGN=’CENTER’>”+n+”</H3>”);
148图片 180}
149图片 181
150图片 182function add_day(year,month,day)
151图片 183图片 184图片 185{
152图片 186bd.birthdate.value=year+”-“+month+”-“+day;
153图片 187}
154图片 188</script>
155图片 189</HEAD>
156图片 190
157图片 191
158图片 192<BODY>
159图片 193<form name=”bd”>
160图片 194<input type=”text” name=”birthdate” size=”20″ readOnly><input type=”button” value=”图片 195” onclick=”showdb()”>
161图片 196</form>
162图片 197<div id=”input_birth” name=”input_birth” style=”visibility:hidden; width:239; height:128″>
163图片 198<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”border-collapse: collapse” style=”cursor:hand” bordercolor=”#111111″ width=”100%” height=”26″>
164图片 199<tr>
165图片 200<td width=”100%” colspan=”3″ height=”26″>   <input type=”button” value=”<<” onclick=”plusyear()” name=”plusyear”> 
166图片 201<input type=”button” value=”<” onclick=”plusmonth()” name=”plusmonth”>  <font id=”year”>
167图片 202</font>年<font id=”month”></font>月 
168图片 203<input type=”button” value=”>” onclick=”addmonth()” name=”addmonth”> 
169图片 204<input type=”button” value=”>>” name=”addyear” onclick=”addyear()”></td>
170图片 205</tr>
171图片 206<tr>
172图片 207<td width=”100%” colspan=”3″ height=”119″ valign=”top”>
173图片 208<table border=”0″ cellpadding=”0″ cellspacing=”0″ style=”border-collapse: collapse” bordercolor=”#111111″ width=”100%”>
174图片 209<tr>
175图片 210<td width=”14%” align=”center”><b><font color=”#FF0000″>日</font></b></td>
176图片 211<td width=”14%” align=”center”><b>一</b></td>
177图片 212<td width=”14%” align=”center”><b>二</b></td>
178图片 213<td width=”14%” align=”center”><b>三</b></td>
179图片 214<td width=”14%” align=”center”><b>四</b></td>
180图片 215<td width=”15%” align=”center”><b>五</b></td>
181图片 216<td width=”15%” align=”center”><b><font color=”#FF0000″>六</font></b></td>
182图片 217</tr>
183图片 218<tr>
184图片 219<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”></td>
185图片 220<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
186图片 221<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
187图片 222<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
188图片 223<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
189图片 224<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
190图片 225<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
191图片 226</tr>
192图片 227<tr>
193图片 228<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
194图片 229<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
195图片 230<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
196图片 231<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
197图片 232<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
198图片 233<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
199图片 234<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
200图片 235</tr>
201图片 236<tr>
202图片 237<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
203图片 238<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
204图片 239<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
205图片 240<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
206图片 241<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
207图片 242<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
208图片 243<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
209图片 244</tr>
210图片 245<tr>
211图片 246<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
212图片 247<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
213图片 248<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
214图片 249<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
215图片 250<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
216图片 251<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
217图片 252<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
218图片 253</tr>
219图片 254<tr>
220图片 255<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
221图片 256<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
222图片 257<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
223图片 258<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
224图片 259<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
225图片 260<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
226图片 261<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
227图片 262</tr>
228图片 263<tr>
229图片 264<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
230图片 265<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
231图片 266<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
232图片 267<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
233图片 268<td width=”14%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
234图片 269<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
235图片 270<td width=”15%” align=”center” id=”day” onclick=”add_day(year.innerText,month.innerText,this.innerText)”> </td>
236图片 271</tr>
237图片 272</table>
238图片 273</td>
239图片 274</tr>
240图片 275<tr>
241图片 276<td width=”33%” height=”1″></td>
242图片 277<td width=”33%” height=”1″></td>
243图片 278<td width=”34%” height=”1″></td>
244图片 279</tr>
245图片 280</table>
246图片 281</div>
247图片 282</BODY>
248图片 283</HTML>

您可能感兴趣的文章:

  • Node.js利用Net模块实现多人命令行聊天室的方法
  • 玩转NODE.JS(四)-搭建简单的聊天室的代码
  • Node.js中使用socket创建私聊和公聊聊天室
  • AngularJS+Node.js实现在线聊天室
  • JavaScript仿聊天室聊天记录
  • Ajax PHP JavaScript
    MySQL实现简易无刷新在线聊天室
  • 基于javascript、ajax、memcache和PHP实现的简易在线聊天室
  • PHP聊天室技术
  • PHP实现简单聊天室(附源码)
  • Node.js制作简单聊天室

您可能感兴趣的文章:

  • js/jquery获取文本框输入焦点的方法
  • js限制文本框只能输入数字方法小结
  • js判断文本框剩余可输入字数的方法
  • js实现文本框中输入文字页面中div层同步获取文本框内容的方法
  • js实现文本框输入文字个数限制代码

复制代码 代码如下:

<html>
<head>
<title>文本框内输入文字倒计数效果</title>
<SCRIPT LANGUAGE=”JavaScript”>
<!– Begin
maxLen = 100; //定义用户可以输入的最多字数
function checkMaxInput(obj) {
if (obj.value.length > maxLen){ //如果输入的字数超过了限制
obj.value = obj.value.substring(0, maxLen); //就去掉多余的字
remLen.innerText = ‘您输入的内容超出了字数限制’
}
else{
remLen.innerText = ‘还剩下’ + (maxLen – obj.value.length) +
‘字’;//计算并显示剩余字数
}
}
//  End –>
</script>
</head>
<body>
<table border=”1″ width=”40%” cellspacing=”0″ cellpadding=”0″
bordercolorlight=”#000000″ bgcolor=”#808080″ height=”0″>
 <tr>
  <td width=”100%”><b><font
color=ffffff>倒计数文本框</font></b></td>
 </tr>
 <tr>
  <td width=”100%” height=”110″>
   <form name=tickform>
    <p align=”center”>
     <textarea name=msgbox rows=5 cols=31
onKeyDown=”checkMaxInput(this)” onKeyUp=”checkMaxInput(this)”
style=”background-color: #000000; color:
#FFFFFF;overflow:auto”></textarea>
    </p>
   </td>
  </tr>
</form>
 <tr>
  <td width=”100%”>
   <font align=”right”
id=remLen><b></b></font>
  </td>
 </tr>
</table>
</body>
</html>

<html>
<head>
<title>
聊天室
</title>
</head>
<META HTTP-EQUIV=Refresh CONTENT=”5; URL=_b.php”>
<body bgcolor=”#EFEFEF”>
<?php
$handle=fopen(“msg.txt”,”r”);
//$oldmsg = array();
while ($content = fgets($handle)){
//$oldmsg[] = $content;
//++$tot;
echo $content;
}
?>
</body>
</html>

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注