点滴积累【JS】---JS小功能(onmouseover实现选择月份)
效果:
代码:
<head runat="server">
<title></title>
<style type="text/css">
#backcolor
{
width: 400px;
height: 400px;
background: #FFFF00;
text-align: center;
border: ridge 30pt red;
margin: auto;
}
TD
{
border: ridge 3pt red;
width: 100px;
height: 100px;
}
div
{
width: auto;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['春节', '情人节', '不知道有什么节日!', '清明节', '劳动节', '儿童节',
'好像这个月没有什么重大的节日吧!', '建军节', '教师节', '国庆节', '光棍节', '圣诞节'];
for (var i = 0; i < divArry.length; i++) {
divArry[i].index = i;
divArry[i].onmouseover = function () {
for (var i = 0; i < divArry.length; i++) {
divArry[i].style.background = '';
}
this.style.background = 'red';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</head>
<body>
<table id="backcolor">
<tr>
<td>
<div id="div0" name="divname">
一月
</div>
</td>
<td>
<div id="div1" name="divname">
二月
</div>
</td>
<td>
<div id="div2" name="divname">
三月
</div>
</td>
<td>
<div id="div3" name="divname">
四月
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" name="divname">
五月
</div>
</td>
<td>
<div id="div5" name="divname">
六月
</div>
</td>
<td>
<div id="div6" name="divname">
七月
</div>
</td>
<td>
<div id="div7" name="divname">
八月
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" name="divname">
九月
</div>
</td>
<td>
<div id="div9" name="divname">
十月
</div>
</td>
<td>
<div id="div10" name="divname">
十一月
</div>
</td>
<td>
<div id="div11" name="divname">
十二月
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div id="div12" style="width: 400px;">
</div>
</td>
</tr>
</table>
</body>
点滴积累【JS】---JS小功能(onmouseover实现选择月份)的更多相关文章
- JS类小功能
工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); wi ...
- 点滴积累【JS】---JS小功能(JS实现多功能缓冲运动框架)
效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数 ...
- 点滴积累【JS】---JS小功能(JS实现模仿微博发布效果)
效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <hea ...
- 点滴积累【JS】---JS小功能(JS实现动态添加运动属性)
效果: 思路: 首先遍历div挨个执行onmouseover事件,再设置获取非行间样式.然后编写setInterval计时器框架,框架内容是:将三个参数 div.div属性.div的目标点,分别获得, ...
- 点滴积累【JS】---JS小功能(JS实现多物体缓冲运动)
效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: <head ru ...
- 点滴积累【JS】---JS小功能(JS实现匀速运动)
效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> ...
- 点滴积累【JS】---JS小功能(JS实现隐藏显示侧边栏,也就是分享栏的隐藏显示)
效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的 ...
- 点滴积累【JS】---JS小功能(列表页面隔行变色)
效果: 代码: <head runat="server"> <title></title> <script type="text ...
- 点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果)
效果: 代码: <head runat="server"> <title></title> <style type="text/ ...
随机推荐
- [典型漏洞分享]结合YS业务分析使用oauth协议的风险
结合YS业务分析oauth协议风险 问题描述: YS 使用QQ互联的openAPI实现QQ登录YS的功能,使用该功能需要在腾讯注册登录时的回调地址,根据oauth协议,用户的code或者access_ ...
- word标题编号变成黑块
把光标放置在黑块的后面 在键盘上按左方向键,则黑块变灰色(为选中状态) 然后ctrl+shift+s, 出现窗口“apply styles" 点击"reapply", 搞 ...
- 【JSTL】<c:if test=“”>没有else的解决方法
后台封装了一个对象 放在model里: model.addAttribute("notice", notice); notice是个对象 然后前台如果没有公告的话,希望显示暂无公告 ...
- php判断手机客户端
<?php // check if wap function check_wap(){ if(stristr($_SERVER['HTTP_VIA'],"wap")){// ...
- 使用微信JSSDK自定义微信分享标题、描述、和图标
最近做一个项目的时候用到微信的分享 ,实现定义分享标题,图片,了解到微信在发布JSSDK后,把包括自定义分享在内的众多网页服务接口进行了统一.如果要想自定义分享自己的网页信息给好友或朋友圈,就最好使用 ...
- [转]How to solve SSIS error code 0xC020801C/0xC004700C/0xC0047017
本文转自:http://www.codeproject.com/Articles/534651/HowplustoplussolveplusSSISpluserrorpluscodeplus0xC B ...
- Python学习1:使用Aptana构建Python开发环境
使用Aptana构建Python开发环境 下载Aptana: http://www.aptana.com/products/studio3/download http://www.newasp.net ...
- 《大规模web服务开发技术》笔记
前段时间趁空把<大规模web服务开发技术>这本书看完了,今天用一下午时间重新翻了一遍,把其中的要点记了下来,权当复习和备忘.由于自己对数据压缩.全文检索等还算比较熟,所以笔记内容主要涉及前 ...
- KafkaConsumer对于事务消息的处理
Kafka添加了事务机制以后,consumer端有个需要解决的问题就是怎么样从收到的消息中滤掉aborted的消息.Kafka通过broker和consumer端的协作,利用一系列优化手段极大地降低了 ...
- ubuntu 的runlevel设定
修改ubuntu的启动级别 runlevel ----------------------------------------------------------------------------- ...