1,只带下划线的输入框
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
只有下划线的输入框<input type="text" name="txt1" size="25" style=" border:1px; border-bottom-style: solid;border-top-style: none;border-left-style:none;border-right-style:none;">
<br />
默认的输入框 <input id="Text1" size="25" type="text" />
</body>
</html>
2,文字过长,用省略号代替
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script Language="javascript">
var sText="这是一段很长的文本,希望通过省略号实现";
var content;
function OmitText()
{
content="<nobr>" +sText +"</nobr>";
document.getElementById("mydiv").innerHTML=content;
}
</script>
</head>
<body>
<input type=button value=加载 οnclick="OmitText()">
<DIV STYLE="width: 150px; height: 50px; border: 1px solid black;
overflow: hidden; text-overflow:ellipsis" id="mydiv">
</DIV>
</body>
</html>
3,textarea 自适应行数
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<textarea rows=1 name=txt1 cols=27 onpropertychange="this.style.posHeight=this.scrollHeight">
</textarea></body>
</html>
4,禁止文本框的拷贝粘贴
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<textarea cols=50 rows=5 οncοpy="document.selection.empty()" οnpaste="return false">
测试是否可以拷贝粘贴</textarea>
</body>
</html>
5,文本框获取汉字
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<script language="JavaScript">
function cal(str)
{
re=/[\u4E00-\u9FA5]/g; //测试中文字符的正则
if(re.test(str)) //使用正则判断是否存在中文
return str.match(re).length //返回中文的个数
else
return 0
}
</script>
<input οnblur="alert(cal(this.value))"></body>
</body>
</html>
6,随意改变大小的文本框
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<div contenteditable="true">
<input type='text'><button>改变这个本框试验试验</button>
</div></body>
</html>
7,文本框获取焦点 弹出下拉框
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>所属区域</td>
<td><input type="text" id="txtRegion" />
<div id="divList" style="display: none; border: 1px solid #0000aa; overflow: hidden; height: 150px; position: absolute; background-color: #ccffff;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="overflow: auto; width: 100%; height: 132px; background-color: ##ffffcc;">
<ul><b>中国</b>
<ul><b>华北地区</b>
<li>北京</li>
<li>天津</li>
<li>内蒙古</li>
<li>河北</li>
<li>河南</li>
</ul>
<ul><b>华东地区</b>
<li>上海</li>
<li>江西</li>
<li>江苏</li>
<li>浙江</li>
</ul>
</ul>
</div>
</td>
</tr>
<tr>
<td align="right" id="tdClose" style="cursor: hand; background-color: #ff8888;">Close</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script LANGUAGE="JavaScript">
var oRegion = document.getElementById("txtRegion"); //需要弹出下拉列表的文本框
var oDivList = document.getElementById("divList"); //要弹出的下拉列表
var oClose = document.getElementById("tdClose"); //关闭div的单元格,也可使用按钮实现
var colOptions = document.getElementsByTagName("li"); //所有列表元素
var bNoAdjusted = true;
oClose.onclick = function()
{
oDivList.style.display = "none"; //隐藏div,实现关闭下拉框的效果
};
//设置下列选择项的一些事件
for (var i=0; i<colOptions.length; i++)
{
colOptions[i].style.cursor = "hand";
colOptions[i].onclick = function() //为列表项添加单击事件
{
oRegion.value = this.innerText;
};
colOptions[i].onmouseover = function() //为列表项添加鼠标移动事件
{
this.style.backgroundColor = "#ffff00";
};
colOptions[i].onmouseout = function() //为列表项添加鼠标移走事件
{
this.style.backgroundColor = "";
};
}
//文本获得焦点时的事件
oRegion.onfocus = function()
{
oDivList.style.display = "block";
if (bNoAdjusted) //控制div是否已经显示的变量
{
bNoAdjusted = false;
//设置下拉列表的宽度和位置
oDivList.style.width = this.offsetWidth + 50;
oDivList.style.posTop = oDivList.offsetTop + this.offsetHeight;
oDivList.style.posLeft = oDivList.offsetLeft - this.offsetWidth - 8;
}
};
</script>
</body>
</html>
8,文字的打字效果出现
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>标题页</title>
<script language=javascript>
var layers =document.layers;
var style=document.all;
var both=layers||style;
var idme=908601;
if(layers)
{ layerRef='document.layers';styleRef ='';}
if(style)
{ layerRef='document.all';styleRef = '.style';}
//开始参数的定义
function writeOnText(obj,str)
{
if(layers)with(document[obj])
{ document.open();document.write(str);document.close();}
if(style)eval(obj+'.innerHTML=str');
}
var dispStr=new Array("证监会称将严查利用内幕信息牟取不当利益行为!"); //要出现的文本
var overMe=0;
//逐字显示的方法
function txtTyper(str,idx,objId,objStyle,color1,color2,delay,plysnd)
{
var mystr='',strchar='';
var skip=200;
if (both && idx<=str.length) {
if (str.charAt(idx)=='<'){ while(str.charAt(idx)!='>') idx++;}
if (str.charAt(idx)=='&'&&str.charAt(idx+1)!=' '){ while (str.charAt(idx)!= ';')idx++;}
mystr = str.slice(0,idx); //返回数组从开始到指定位置的字符串
strchar = str.charAt(idx++);//当前地址的字符
if (overMe==0 && plysnd==1)
{
//针对浏览器的不同,调用不同的显示方法
if (navigator.plugins[0]){
if(navigator.plugins["LiveAudio"][0].type=="audio/basic" && navigator.javaEnabled())
{document.embeds[0].stop();
setTimeout("document.embeds[0].play(false)",100);}
} else if (document.all){
ding.Stop();
setTimeout("ding.Run()",100);}
overMe=1;}else overMe=0;
writeOnText(objId, "<span class="+objStyle+"><font color='"+color1+"'>"+mystr+"</font><font color='"+color2
+"'>"+strchar+"</font></span>");
setTimeout("txtTyper('"+str+"', "+idx+", '"+objId+"', '"+objStyle+"', '"+color1+"', '"+color2+"', "+delay+" ,"+plysnd+")",delay);}}
function init()
{txtTyper(dispStr[0], 0, 'div1', 'style1', '#66CCBB', '#000000', 400, 0);}
</script>
<BODY οnlοad=init()>
<DIV class=style1 id=div1></DIV>
</BODY>
</html>
9,滚动的文字
<html>
<head>
<title>无标题文档</title>
<style>
div { font-size:12px; }
</style>
</head>
<body>
<div id="mydiv" style="width:100%;height:100px;overflow:hidden" οnmοuseοver="iScrollAmount=0"
οnmοuseοut="iScrollAmount=1">
轻轻的我走了,正如我轻轻的来;<br/>
我轻轻的招手,作别西天的云彩。<br/>
<br/>
那河畔的金柳,是夕阳中的新娘;<br/>
波光里的艳影,在我心头荡漾。<br/>
<br/>
软泥上的青荇,油油的在水底招摇;<br/>
在康河的柔波里,我甘心作一条水草。<br/>
<br/>
那榆荫下的一潭,不是清泉是天上的虹;<br/>
揉碎在浮藻间,沉淀彩虹似的梦。<br/>
<br/>
寻梦,撑支长篙,向青草更青处漫溯;<br/>
满载一船星辉,在星辉斑烂里放歌。<br/>
<br/>
但我不能放歌,悄悄是别离的笙箫;<br/>
夏虫也为我沉默,沉默是今晚的康桥。<br/>
<br/>
悄悄的我走了,正如我悄悄的来;<br/>
我挥一挥衣袖,不带走一片云彩。<br/>
<br/>
</div>
<script language="javascript">
var oMarquee = document.getElementById("mydiv"); //滚动对象
var iLineHeight = 42; //单行高度,像素
var iLineCount = 7; //实际行数
var iScrollAmount = 1; //每次滚动高度,像素
function play()
{
oMarquee.scrollTop += iScrollAmount;
if ( oMarquee.scrollTop == iLineCount * iLineHeight )
oMarquee.scrollTop = 0;
if ( oMarquee.scrollTop % iLineHeight == 0 ) {
window.setTimeout( "play()", 2000 );
} else {
window.setTimeout( "play()", 50 );}
}
oMarquee.innerHTML += oMarquee.innerHTML;
window.setTimeout( "play()", 2000 ); //定时器用来循环滚动
</script>
</body>
</html>
10,文字的滑动效果
<html>
<head>
<script type="text/javascript">
function $(id) {
return document.getElementById(id); //获取控件的ID
}
function marquee(time, oDiv, oLtd, oRtd) //制作一个marquee类
{
/*
time 值越大速度越慢
oDiv最外层div
oLtd左边的td
oRtd右边的td
*/
var timer, width = oLtd.offsetWidth;
function move() {
if (oDiv.scrollLeft >= width) //当滚动条移动到最后时,重新开始
oDiv.scrollLeft = 0;
else
oDiv.scrollLeft ++; //一直滚动
}
oRtd.innerHTML = oLtd.innerHTML; //左侧内容转移动到右侧
oDiv.style.overflow = "hidden"; //隐藏最外层div
oRtd.style.width = oLtd.offsetWidth; //右侧td的宽度
oDiv.onmouseover = function () { //鼠标移动过来的事件
window.clearInterval(timer); //清空定时器-停止滚动
};
oDiv.onmouseout = function () {
timer = window.setInterval(move, time); //鼠标移走便开始滚动
};
timer = window.setInterval(move, time); //开始滚动
};
window.onload = function () {
new marquee(25, $("myDiv"), $("myTd1"), $("myTd2"));
}
</script>
</head>
<body>
<div id="myDiv" style="border:#CCCCCC 1px dashed; width:300px;"><!--设置显示的宽度-->
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="myTd1">
<table width="342" cellpadding="0" cellspacing="0"><!--注意这里的宽度必须设置,并且要设置为具体值-->
<tr align="center">
<td>左边</td>
<td>右边</td>
<td>左边</td>
<td>右边</td>
</tr>
</table>
</td>
<td id="myTd2"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>