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 相关文章推荐
JavaScript Tips 使用DocumentFragment加快DOM渲染速度
Jun 28 Javascript
ie浏览器使用js导出网页到excel并打印
Mar 11 Javascript
JS实现鼠标点击展开或隐藏表格行的方法
Mar 03 Javascript
分享几种比较简单实用的JavaScript tabel切换
Dec 31 Javascript
JavaScript简单实现鼠标移动切换图片的方法
Feb 23 Javascript
一个极为简单的requirejs实现方法
Oct 20 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
Nov 01 Javascript
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
Node接收电子邮件的实例代码
Jul 21 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
Jul 09 jQuery
vue实现学生录入系统之添加删除功能
Jul 11 Javascript
vue router 动态路由清除方式
May 25 Vue.js
使用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
DOTA2游戏同人动画《龙之血》导演接受采访
2021/03/05 欧美动漫
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
php获取当前时间的毫秒数的方法
2014/01/26 PHP
windows下apache搭建php开发环境
2015/08/27 PHP
ThinkPHP3.2.1图片验证码实现方法
2016/08/19 PHP
PHP与SQL语句常用大全
2016/12/10 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
JavaScript中的this实例分析
2011/04/28 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
基于cropper.js封装vue实现在线图片裁剪组件功能
2018/03/01 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
Vue项目实现简单的权限控制管理功能
2019/07/17 Javascript
简单了解JavaScript arguement原理及作用
2020/05/28 Javascript
微信小程序实现签到弹窗动画
2020/09/21 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
pymssql ntext字段调用问题解决方法
2008/12/17 Python
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python在指定目录下查找gif文件的方法
2015/05/04 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
django 类视图的使用方法详解
2019/07/24 Python
Python序列类型的打包和解包实例
2019/12/21 Python
python-地图可视化组件folium的操作
2020/12/14 Python
HTML5 视频播放(video),JavaScript控制视频的实例代码
2018/10/08 HTML / CSS
Bose英国官方网站:美国知名音响品牌
2020/01/26 全球购物
财务部经理岗位职责
2014/02/03 职场文书
作风大整顿心得体会
2014/09/10 职场文书
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
旷工检讨书1000字
2015/01/01 职场文书
感恩母亲节活动总结
2015/02/10 职场文书
公司车辆管理制度
2015/08/04 职场文书
如何使JavaScript休眠或等待
2021/04/27 Javascript
MySQL中int (10) 和 int (11) 的区别
2022/01/22 MySQL
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang
windows server2012 R2下安装PaddleOCR服务的的详细步骤
2022/09/23 Servers