客户端脚本-在浏览器中限制用户的操作 2-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_14477/article/details/81681287
本文汇集了前端开发中的实用技巧，包括调整IFRAME高度、自动计算表单数值、创建适应图片大小的弹窗等，还介绍了如何使用CSS的Cursor属性改变鼠标样式及实现圆角表格的方法。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
Js:根据内容扩大IFRAME的高度

<table><tr> 
     <td id="mainview">
     <iframe src="http://192.168.0.44/announce.asp?boardid=25"; width="100%" height="100%" name="main" scrolling="no" border="0" frameborder="0">
     这里是内框架，如果看不到请升级你的IE。</iframe></td>
    </tr></table>
<script language="javascript" for="main" event="onload">
mainview.height=main.document.body.scrollHeight+10;
</script> 


JS:自动计算数值

单价：20<br>
数量：<input type=text onKeyUp="javascript:total.value=20*this.value;"><br>
金额：<input type=text name=total><br> 

 
 JS:弹出式窗口自动适应图片大小的代码！

<script>
str1=window.open('javascript:document.write("<body style=margin:0><img src=http://192.168.0.44/images/logo.gif>");window.resizeTo(document.images(0).width,document.images(0).height+20)',"win1","toolbar=0")
</script> 

JS:如何把选定的文本内容复制到剪贴板！

<Script Language=Jscript>
alert(clipboardData.getData('text'))  //取得当前的剪切版内容
window.clipboardData.setData('text','指定数据') //自定义剪切版中的内容
alert(clipboardData.getData('text')) //在次取得当前剪切版内容
</Script> 


Js:判断radio多个单选按纽中是否有被选中的按纽 

<script language="javascript">
<!--
function test() {
for (i=0;i<document.all('test').length;i++) {
if (document.all('test')[i].checked) {alert ('有选');return false;}
}
alert ('没选');
return false;
}
//-->
</script>
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="radio" name="test">
<input type="button" value="test" onClick="test()"> 




Css:关于Cursor属性提供的各种鼠标形状
 Email 2003-10-23 23:25:10  

<center>应用时只需<TD style='cursor:表格所列出的字母;'>即可,当然TD可以是其他HTML标签</center><p>
<table cellSpacing="1" cellPadding="0" width="280" bgColor="#fefafa" border="0" align=center>
<tr>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: crosshair; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  crosshair</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: default; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  default</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: hand; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  hand</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: pointer; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#ffc080">
  pointer</td>
</tr>
<tr>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: move; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  move</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: help; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  help</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: wait; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  wait</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: text; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  text</td>
</tr>
<tr>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: w-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  w-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: s-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  s-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: n-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  n-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: e-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  e-resize</td>
</tr>
<tr>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: ne-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  ne-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: sw-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  sw-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: se-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  se-resize</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: nw-resize; PADDING-TOP: 5px" align="center"" width="25%" bgColor="#cccfff">
  nw-resize</td>
</tr>
<tr>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: auto; PADDING-TOP: 5px" align="middle" width="25%" bgColor="#cccfff">
  auto</td>
  <td style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 5px; CURSOR: url('http://www.lshdic.com/img/mouse2.cur&#39;); PADDING-TOP: 5px" align="middle" width="75%" bgColor="#ffc080" colSpan="3">
  url(http://www.lshdic.com/img/mouse2.cur)</td>
</tr>
</table>  


Html:绝对与浏览器边框无缝隙的网页效果

<body bgcolor=menu style="border:none" scroll=no>  


Dhtml:制作的一个完美仿真的window选项卡

<HTML>
<HEAD>
<script language="javascript1.2">
// All Codez Modifed & Writen By Windy_sk,
// You Can Use It Freely , But You Must Hold This Item !

var Card_list = new Array();

function Cardz(title,content) {
this.title = title;
this.content = content;
}

//You can add the url list you wanted, format as below;

Card_list[0] = new Cardz("表单","<form action=''>性别：<input type=radio checked name=sex>男<input name='sex' type=radio>女<br>姓名：<input name='name'><br>工作：<select name='job'><option>待业</option><option>在学</option><option>工作</option></select><br><input type=submit><form>");
Card_list[1] = new Cardz("图片","<img src=http://www.agriffchina.com/pic/banner1.gif width=350 height=60>");
Card_list[2] = new Cardz("iFrame","<iframe style='filter:flipV()' src='http://www.sina.com.cn&#39; width=400 height=90% marginwidth=0 marginheight=0 hspace=0 vspace=0 frameborder=0 scrolling=1></iframe>");
Card_list[3] = new Cardz("表格","<table border=1 width=100%><td>表格</td></tr><tr><td>111111111111</td></tr><tr><td>222222222222</td></tr></table>");
Card_list[4] = new Cardz("滚动字幕","<marquee> 滚动字幕 </marquee>");

var Num = Card_list.length;
var cur_card = 1;

function document.onmousedown(){
var obj=event.srcElement
var pobj=obj.parentElement.id;
if(obj.className=="span"){
for(i=1;i<=Num+1;i++){

if(pobj==("btn"+i)){
document.all("td"+i).style.backgroundColor = "menu";
document.all("btn"+i).style.height = 20;
if(i!=cur_card)content(i)
cur_card = i;
}else{
if(i<=Num){
document.all("td"+i).style.backgroundColor = "white";
document.all("btn"+i).style.height = 18;
}
}
}
} 
}


function content(i){
Content.innerHTML = Card_list[i-1].content
}

function init(){
for(i=1;i<=Num;i++)
document.all("MenuName"+i).innerText = Card_list[i-1].title;
content(1);
}

</script>

<style>
td{font-size:9pt}
.span{
cursor:default;
padding-left:5;
padding-top:2;
padding-right:5;
padding-bottom:0;
width:70px;
height:100%;
TEXT-ALIGN: center;
}
</style>
<TITLE>Table_Card</TITLE>
<META http-equiv="content-type" content="text/html;charset=gb2312">
</HEAD>
<BODY bgcolor=#FFFFFF onload=init()>
<p>
<table width=0 align=center><tr><td>
<table cellpadding=0 cellspacing=0>
<tr height=20 onselectstart="return false">
<script language="javascript1.2">
for(i=1;i<=Num;i++){
tdBody="<td valign=bottom>"
tdBody+="<table cellspacing=0 cellpadding=0 bgcolor='menu'>"
tdBody+="<tr>"
tdBody+="<td width=1 height=1><\/td><td width=1 height=1><\/td>"
tdBody+="<td bgcolor=white><\/td><td></td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 height=1><\/td><td width=1 height=1 bgcolor=white><\/td>"
tdBody+="<td></td><td bgcolor=black><\/td><td></td>"
tdBody+="<\/tr>"
tdBody+="<tr><td width=1 bgcolor=white><\/td><td width=1 height=1><\/td>"
tdBody+="<td id=btn"+i+" height=18><span class=span id=MenuName"+i+">title<\/span></td><td width=1 bgcolor=gray><\/td><td bgcolor=black width=1><\/td>"
tdBody+="<\/tr>"
tdBody+="<tr><td bgcolor=white><\/td><td colspan=4 height=1 bgcolor=white id=td"+i+"><\/td>"
tdBody+="<\/tr>"
tdBody+="<\/table>"
tdBody+="<\/td>";
document.write(tdBody)
}
document.all("td1").style.backgroundColor = "menu";
document.all("btn1").style.height = 20;
</script>
<td style="border-bottom:1 white solid" width="50"></td>
</tr>
</table>
<div style="BACKGROUND-COLOR: menu;padding:10;width:100%;height:200;border-left:1 white solid;border-right:2 outset;border-bottom:2 outset">
<span id=Content>Content</span>
</div>
</td></tr></table>
</BODY>
</HTML> 




如何做圆角的表格？

<HTML xmlns:v>
<STYLE>
v\:*{behavior:url(#default#VML);} //声明变量v为VML对象
</STYLE>
<BODY>
<v:RoundRect stroked='false' fillcolor='green' style='width:180;height:100'/> 


保持刷新文本框中的值 

<HTML>
<HEAD>
<META NAME="save" CONTENT="history">
<STYLE>
   .saveHistory {behavior:url(#default#savehistory);}
</STYLE>
<title>保持刷新文本框中的值</title></HEAD>
<BODY>
<INPUT class=saveHistory type=text id=oPersistInput>
</BODY>
</HTML>


汉字判断（js判断）

//=====================js判断====================
//这样更简单
for(i=0;i<realname.length;i++){
  char=realname.charCodeAt(i);  
  if(!(char>255)){  
   alert("真实姓名应为汉字!");
   userform.realname.focus();
   return false;
   }
  }