js简易日历
来源:互联网 发布:淘宝助理查询快递单号 编辑:程序博客网 时间:2024/05/18 02:06
该功能最终实现的结果如下图所示:
程序实现思路:
1、使用for,实现鼠标悬浮中英文切换
2、底部文字切换,使用tab选项卡思路,动态数组获取文字
3、底部文字的切换使用innerHTML
注意以下几点:
1、页面布局,注意active状态是在li上添加,
<li class="active"> <h2>1</h2> <p>JAN</p> </li> <li> <h2>2</h2> <p>FER</p> </li>
2、字符串的拼接
例如:
"abg"+12+5+"dec"此实例结果是abg125dec,若果想实现中间为17,则需要使用小括号,优先运算,
3、使用数组存储json数据,简化页面结构,将数组中内容取出放入需要的地方,如下:
var arry = [ '快过年了,大家可以商量着去哪里玩吧~', 'wewewqfeeeryue二月', '三月份的时候了', '四月份的时候了,马上五月', 'wuyuefen l ', '六月份了', 'qiyuefenle', 'bayuefen l ', 'jiuyuefen', 'shiyuefen', 'shiyiyuefen', 'shieryuefen' ]
取出来拼接如下:
text.innerHTML = "<h2>"+(this.index+1)+"月活动</h2> <p> "+arry[this.index]+"</p>"该处需注意的是,若果是单引号,则拼接也全部使用单引号,若双引号,则相同。
阅读全文
0 0
- JS简易日历
- JS简易日历
- JS简易日历实现
- js简易日历
- JS学习笔记:简易日历
- 用js写的月简易日历
- H5中使用JS实现简易日历
- 简易日历
- 简易日历
- 简易日历
- js特效--简易当天阴阳日历
- H5中利用js实习简易日历效果
- 前端模型--纯js实现简易日历&&电子时钟
- 简易记事网页日历
- 一个简易日历代码
- java简易日历算法
- javascript简易日历
- 智能社简易日历
- Spring学习总结——Spring实现AOP的多种方式
- 在线算命_周易占卜_生辰八字算命_姓名测试,免费算命【最准八字算命王网站-视频讲解】
- 【转载】重写与重载的关系
- Android Studio变量批量重命名快捷键
- java五种拼接字符串的方法
- js简易日历
- centos下mysql编码问题
- jstat使用
- SQL 去除重复行一些语句
- 计算机视觉:相机成像原理:世界坐标系、相机坐标系、图像坐标系、像素坐标系之间的转换
- 第十二周 【项目4
- SSM整合
- Android Wake Lock 机制
- 一年去雾算法研究的总结