JS实现自动变化的导航菜单效果代码


Posted in Javascript onSeptember 09, 2015

本文实例讲述了JS实现自动变化的导航菜单效果代码。分享给大家供大家参考。具体如下:

自动变化的JS导航菜单,按照时间自动切换,有需要的参考一下。

运行效果截图如下:

JS实现自动变化的导航菜单效果代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>导航菜单</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
site = "http://www.qq.com"; // Do not include the final "/"
function combineMenus(frm, menu1, menu2) {
with (frm) {
str = menu1.options[menu1.selectedIndex].value;
str += menu2.options[menu2.selectedIndex].value;
url = site + "/" + str + ".htm";
window.location.href = url;
  }
}
// End -->
</script>
<form name=menufrm>
<select name=menu1>
<option value="">时间类</option>
<option value="time">time</option>
</select>
<select name=menu2>
<option value="">哪个</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type=button value="Select" onClick="combineMenus(this.form, this.form.menu1, this.form.menu2)">
</form> 
<SCRIPT LANGUAGE="JavaScript">
function makeArray(q){
for(i=1 ; i < q ; i++){this[i]=0}}
w=1;
howmanysites=4; // How many sites are listed below?
Sites = new makeArray(howmanysites);
Sites[1] = "https://3water.com.com~JavaScript Planet|Hundreds of JavaScripts!";
Sites[2] = "http://www.baidu.com/dhtml~dHTML Scripts|Free dHTML Scripts!";
Sites[3] = "http://www.163.com~Altavista|The best search engine";
Sites[4] = "http://www.qq.com~Dynamic Drive|More dHTML Scripts";
function showSites() {
if (w > howmanysites) { w=1; };
var string=Sites[w] + "";
var split1=string.indexOf("~");
var split2=string.indexOf("|");
var url=string.substring(0,split1);
var name=string.substring(split1 + 1,split2);
var word=string.substring(split2 + 1,string.length);
document.form.url.value=url;
document.form.name.value=name;
document.form.word.value=word;
w+=1;
window.setTimeout('showSites()',3000);
}
function visitSite() {
window.location=document.form.url.value;
}
</SCRIPT>
<form name=form>
<table><tr><td align=center>
<input type=button name=name value="Visit" onClick="visitSite()" size=25>
<input type=hidden name=url value="">
<input type=text name=word value="" size=40>
</td></tr></table>
</form>
</center>
<script>
showSites();
</script>
</body>
</html>

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

Javascript 相关文章推荐
一个js写的日历(代码部分网摘)
Sep 20 Javascript
利用jquery的获取JS文件中的字符串内容
Feb 14 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
jquery文字填写自动高度的实现方法
Nov 07 Javascript
JS双击变input框批量修改内容
Dec 12 Javascript
Angularjs实现搜索关键字高亮显示效果
Jan 17 Javascript
JS 调试中常见的报错问题解决方法
May 20 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
使用百度地图实现地图网格的示例
Feb 06 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
Aug 07 Javascript
如何对react hooks进行单元测试的方法
Aug 14 Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
JavaScript中实现Map的示例代码
Sep 09 #Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
Sep 09 #Javascript
javascript实现日期时间动态显示示例代码
Sep 08 #Javascript
You might like
PHP COOKIE设置为浏览器进程
2009/06/21 PHP
php 无限级数据JSON格式及JS解析
2010/07/17 PHP
php数组函数序列之array_flip() 将数组键名与值对调
2011/11/07 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
解析php中array_merge与array+array的区别
2013/06/21 PHP
php上传excel表格并获取数据
2017/04/27 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
jquery获取被勾选的checked(选中)的那一行的3列和4列的值
2013/07/04 Javascript
用box固定长宽实现图片自动轮播js代码
2014/06/09 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
简单的js计算器实现
2016/10/26 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
2017/03/23 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
ES6 Symbol在对象中的作用实例分析
2020/06/06 Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
2020/10/02 Javascript
[01:10]DOTA2次级职业联赛 - EP战队宣传片
2014/12/01 DOTA
python通过post提交数据的方法
2015/05/06 Python
python实现两个文件合并功能
2018/04/01 Python
pygame实现雷电游戏雏形开发
2018/11/20 Python
python使用minimax算法实现五子棋
2019/07/29 Python
python异常处理和日志处理方式
2019/12/24 Python
Python datetime模块使用方法小结
2020/06/18 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
物流管理专业职业生涯规划书
2014/01/06 职场文书
参赛口号
2014/06/16 职场文书
亮剑观后感600字
2015/06/05 职场文书
培训班开班主持词
2015/07/02 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Django一小时写出账号密码管理系统
2021/04/29 Python