1.点击某个按钮跳转到该页面
这个时候就不可以简单的在button,submit按钮中添加标签<a>属性了,具体使用如下:
如果我们要给button 按钮增加跳转事件我们可以在它的确onclick事件上点击跳转js来实现,下面我来给大家介绍一些常用的方法。
这样的效果可以:οnclick="window.location=’新页面’" 来实现。
在原来的窗体中直接跳转用
如果要在点击按钮提交时验证输入款是否填入了内容,要怎么做呢?当用户名输入或者其它的为空的时候,点击按钮不提交,可以按下列的方法做。
JS跳转页面参考代码
2.如何设置网页自动刷新<input type=button value=刷新 οnclick="history.go(0)">
<input type=button value=刷新 οnclick="location.reload()">
<input type=button value=刷新 οnclick="location=location">
<input type=button value=刷新 οnclick="location.assign(location)">
<input type=button value=刷新 οnclick="document.execCommand('Refresh')">
<input type=button value=刷新 οnclick="window.navigate(location)">
<input type=button value=刷新 οnclick="location.replace(location)">
<input type=button value=刷新 οnclick="window.open('自身的文件','_self')">
<input type=button value=刷新 onClick=document.all.WebBrowser.ExecWB(22,1)>
1)
<meta http-equiv="refresh"content="10;url=跳转的页面">
10表示间隔10秒刷新一次
2)
<script language=’’javascript’’>
window.location.reload(true);
</script>
如果是你要刷新某一个iframe就把window给换成frame的名字或ID号
3)
<script language=’’javascript’’>
window.navigate("本页面url");
</script>
4>
function abc()
{
window.location.href="/blog/window.location.href";
setTimeout("abc()",10000);
}
刷新本页:
Response.Write("<script language=javascript>window.location.href=window.location.href;</script>")
刷新父页:
Response.Write("<script language=javascript>opener.location.href=opener.location.href;</script>")
转到指定页:
Response.Write("<script language=javascript>window.location.href=’yourpage.aspx’;</script>")
刷新页面实现方式总结(HTML,ASP,JS)
’by aloxy
定时刷新:
1,<script>setTimeout("location.href=’url’",2000)</script>
说明:url是要刷新的页面URL地址
2000是等待时间=2秒,
2,<meta name="Refresh" content="n;url">
说明:
n is the number of seconds to wait before loading the specified URL.
url is an absolute URL to be loaded.
n,是等待的时间,以秒为单位
url是要刷新的页面URL地址
3,<%response.redirect url%>
说明:一般用一个url参数或者表单传值判断是否发生某个操作,然后利用response.redirect 刷新。
4,刷新框架页
〈script language=javascript>top.leftFrm.location.reload();parent.frmTop.location.reload();</script〉
弹出窗体后再刷新的问题
Response.Write("<script>window.showModalDialog(’../OA/SPCL.aspx’,window,’dialogHeight: 300px; dialogWidth: 427px; dialogTop: 200px; dialogLeft: 133px’)</script>");//open
Response.Write("<script>document.location=document.location;</script>");
在子窗体页面代码head中加入<base target="_self"/>
刷新的内容加在 if (!IsPostBack) 中
在框架页中右面刷新左面
//刷新框架页左半部分
Response.Write("<script language=javascript>");
Response.Write("parent.left.location.href=’PayDetailManage_Left.aspx’");
Response.Write("</script>");
页面定时刷新功能实现
有三种方法:
1,在html中设置:
<title>xxxxx</title>之后加入下面这一行即可!
定时刷新:<META HTTP-EQUIV="Refresh" content="10">
10代表刷新间隔,单位为秒
2.jsp
<% response.setHeader("refresh","1"); %>
每一秒刷新一次
3.使用javascript:
<script language="javascript">
setTimeout("self.location.reload();",1000);
<script>
一秒一次
页面自动跳转:
1,在html中设置:
<title>xxxxx</title>之后加入下面这一行即可!
定时跳转并刷新:<meta http-equiv="refresh" content="20;url=http://自己的URL">,
其中20指隔20秒后跳转到http://自己的URL 页面。
点击按钮提交表单后刷新上级窗口
A窗口打开B窗口
然后在B里面提交数据至C窗口
最后要刷新A窗口
并且关闭B窗口
几个javascript函数
//第一个自动关闭窗口
<script language="javascript">
<!--
function clock(){i=i-1
document.title="本窗口将在"+i+"秒后自动关闭!";
if(i>0)setTimeout("clock();",1000);
else self.close();}
var i=2
clock();
//-->
</script>
//第二个刷新父页面的函数
<script language="javascript">
opener.location.reload();
</script>
//第三个打开窗口
<script language="javascript">
function show(mylink,mytitle,width,height)
{mailwin=window.open(mylink,mytitle,’top=350,left=460,width=’+width+’,height=’+height+’,scrollbars=no’)}
</script>
3.如何强制要求文本框中输入的内容只能是数字
1、直接在文本域中写入οnkeypress="if (event.keyCode < 45 || event.keyCode > 57) event.returnValue = false;"
2、另外写函数
<script>
var str="0123456789";
function press()
{
var str1=document.all.fundsname.value;
for(int i=0; i<str1.length; i++){
if (str.indexOf(str1)==-1){
alert("只能输入数字!");
document.all.b1.value="";
return false; } }
}
</script>
3、以上两种形式不能防止中文的输入,防止中文可以采用如下的形式
<input οnclick="document.all.WebBrowser.ExecWB(1,1)" type="button" value="打开" name="Button1">
<input οnclick="document.all.WebBrowser.ExecWB(4,1)" type="button" value="另存为" name="Button2">
<input οnclick="document.all.WebBrowser.ExecWB(10,1)" type="button" value="属性" name="Button3">
<input οnclick="document.all.WebBrowser.ExecWB(6,1)" type="button" value="打印" name="Button">
<input οnclick="document.all.WebBrowser.ExecWB(8,1)" type="button" value="页面设置" name="Button4">
<input οnclick="window.location.reload()" type="button" value="刷新" name="refresh">
<input onClick="window.external.ImportExportFavorites(true,'');" type="button" value="导入收藏夹" name="Button5">
<input onClick="window.external.ImportExportFavorites(false,'');" type="button" value="导出收藏夹" name="Button32">
<input onClick="window.external.AddFavorite(location.href, document.title)" type="button" value="加入收藏夹" name="Button22">
<input onClick="window.external.ShowBrowserUI('OrganizeFavorites', null)" type="button" value="整理收藏夹" name="Submit2">
<input οnclick='window.location="view-source:" + window.location.href' type="button" value="查看源文件" name="Button7">
<input onClick="window.external.ShowBrowserUI('LanguageDialog', null)" type="button" value="语言设置" name="Button6">
<input onClick="document.execCommand('Cut')" type="button" value="剪切">
<input onClick="document.execCommand('Copy')" type="button" value="拷贝">
<input onClick="document.execCommand('Paste')" type="button" value="粘贴">
<input onClick="document.execCommand('Undo')" type="button" value="撤消">
<input onClick="document.execCommand('Delete')" type="button" value="删除">
<input onClick="document.execCommand('Bold')" type="button" value="黑体">
<input onClick="document.execCommand('Italic')" type="button" value="斜体">
<input onClick="document.execCommand('Underline')" type="button" value="下划线">
<input onClick="document.execCommand('stop')" type="button" value="停止">
<input onClick="document.execCommand('SaveAs')" type="button" value="保存">
<input onClick="document.execCommand('Saveas',false,'c:\\Autorun.inf')" type="button" value="另存为">
<input onClick="document.execCommand('FontName',false,fn)" type="button" value="字体">
<input onClick="document.execCommand('FontSize',false,fs)" type="button" value="字体大小">
<input onClick="document.execCommand('refresh',false,0)" type="button" value="刷新">
<input οnclick="window.location.reload()" type="button" value="刷新">
<input οnclick="history.go(1)" type="button" value="前进">
<input οnclick="history.go(-1)" type="button" value="后退">
<input οnclick="history.forward()" type="button" value="前进">
<input οnclick="history.back()" type="button" value="后退">
<input type="button" value="弹出固定窗口" onClick="javascript:window.open('#','','scrollbars=yes,width=600,height=200')" >
<input type="button" value="没有提示关闭" οnclick="window.opener=null;window.close();" />
<input type="button" value="点击进入另一页面" οnclick="window.location.href=''" />
<input type="button" value="返回上一页" οnclick="javascript:history.go(-1);" />
5使用css的时候,如何将导航栏设为居中
一开始使用的时候,导航栏都是默认靠右,代码如下:
<!DOCTYPE html>
<html>
<head>
<style >
.clear{clear:both;}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
</style>
</head>
<body align="center">
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
效果如下图:
非常难看,所以需要设置为居中,分别在style标签和ur标签里面加入代码:
<!DOCTYPE html>
<html>
<head>
<style >
.clear{clear:both;}
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#bebebe;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#cc0000;
}
.navbar {
display:table;
margin:0 auto;
}
.navbar li {
display:table-cell;
}
.navbar li + li {
padding-left:20px;
}
</style>
</head>
<body align="center">
<ul class="navbar">
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</body>
</html>
最终效果如下图:
下面具体介绍几种使标题栏居中的方法:
CSS导航菜单水平居中的多种方法:
- 方法1:display:inline-block
- 方法2:position:relative
- 方法3:display:table
- 方法4:display:inline-flex
- 方法5:width:fit-content / width:intrinsic
方法1:display:inline-block
这个方法比较简单,是将容器转成「display:inline-block」行内块级元素,然后就可以直接用「text-align:center」使其达到水平居中效果。
HTML代码:
这里我们需要一个div来包围这个导航菜单。
CSS代码:
给外面的div添加「text-align:center」,然后将菜单容器设成「display:inline-block」行内块级元素,菜单浮左「float:left」
这里浏览器兼容只能是IE8或更高版本,所以如果要兼容IE7的话,请加入以下代码
方法2:position:relative
这是使用「position:relative」定位方法来让元素水平居中,我不是很推荐这方法,因为代码多了个div去包住,当然这些是根据情况来使用的。
HTML代码:
CSS代码:
将定位div设为浮动,再定位「left:50%」,然后导航定位至「left:-50%」,这方法很有意思吧。可能表达不是很清楚,自己看代码吧^^
如果要兼容IE7,请添加以下样式:
方法3:display:table
如果你喜欢简洁的代码,哪么这个方法就非常适合你了。
HTML代码:
CSS代码:
浏览器兼容:这方法代码精简,但不支持IE7及以下版本……
方法4:display:inline-flex
有关flex layout的知识自己查下吧>_<
HTML代码:
CSS代码:
浏览器兼容:不支持IE7及以下版本的IE浏览器。
方法5:width:fit-content
HTML代码:
CSS代码:
浏览器兼容:这个兼容比较低,只支持Firefox或chrome、Opera 12这些较新的浏览器。