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 相关文章推荐
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
基于JavaScript实现移动端点击图片查看大图点击大图隐藏
Nov 04 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
JS中dom0级事件和dom2级事件的区别介绍
May 05 Javascript
jQuery文本框得到与失去焦点动态改变样式效果
Sep 08 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
JS常用算法实现代码
Nov 14 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
Dec 27 Javascript
浅谈regExp的test方法取得的值变化的原因及处理方法
Mar 01 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
webpack5 联邦模块介绍详解
Jul 08 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下通过伪造http头破解防盗链的代码
2010/07/03 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
为javascript添加String.Format方法
2020/08/11 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
jQuery中校验时间格式的正则表达式小结
2013/09/22 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
2015/02/10 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
AngularJS基础 ng-readonly 指令简单示例
2016/08/02 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
如何制作幻灯片(代码分享)
2017/01/06 Javascript
简单谈谈require模块化jquery和angular的问题
2017/06/23 jQuery
Vue中计算属性computed的示例解读
2017/07/26 Javascript
webpack 样式加载的实现原理
2018/06/12 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
python抓取网页图片并放到指定文件夹
2014/04/24 Python
python抓取网页中链接的静态图片
2018/01/29 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
WIn10+Anaconda环境下安装PyTorch(避坑指南)
2019/01/30 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Django搭建项目实战与避坑细节详解
2020/12/06 Python
运动会领导邀请函
2014/02/05 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
心理健康日活动总结
2014/05/08 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
预备党员党支部意见
2015/06/02 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
python实现web邮箱扫描的示例(附源码)
2021/03/30 Python
CSS中Single Div 绘图技巧的实现
2021/06/18 HTML / CSS
JavaScript 原型与原型链详情
2021/11/02 Javascript
MySQL实现配置主从复制项目实践
2022/03/31 MySQL