- 浏览: 330846 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (354)
- 学习 (219)
- 工作 (69)
- 前端技术 (188)
- 个人评论 (1)
- 工作总结 (1)
- 工作的方法 (1)
- 代码库 (1)
- jQuery (63)
- javascript (4)
- css (4)
- 网络通信协议 (3)
- web (7)
- 服务端性能 (1)
- 优化 (1)
- html5 (4)
- serialize (1)
- 上线页面 (1)
- ie6 (6)
- js (1)
- iframe (1)
- flash (1)
- a (1)
- img (1)
- 页面tms的要求 (1)
- kissy (3)
- 需求也页面 (0)
- 需求页面 (2)
- 视频插件 (1)
- 切图片 (1)
- map (1)
- display (1)
- 浮动定位 (1)
- 大小图片的切换功能 (2)
- demo (1)
- margin (1)
- a标签 (1)
- border (1)
- 侧导航 (1)
- 切换PNG格式的css (1)
- padding (1)
- 显示添加和删除 (1)
- 滚动条 (1)
- 和图片处理 (1)
- 移动端 (1)
- 定位 (1)
- 移动端的包的引入作用与直接拨打电话的A标签 (1)
- git (1)
- node.js (1)
- Zepto (1)
最新评论
-
幻紫1992:
还有分页的功能、、(⊙o⊙)嗯
[JS代码库] -
幻紫1992:
就是没有返回顶部的按钮,这个页面、、
[JS代码库] -
幻紫1992:
很受用,O(∩_∩)O谢谢啦~
[JS代码库] -
nlnl520coco:
想下个东西 规则太苛刻了 网站得改进
[JS代码库] -
hxp520520:
new Limiter() 这个对象是kissy API里面的 ...
Limiter的简单demo--20131029
一、效果及功能说明
模仿google日历自己来完成一个日历的所有效果
二、我的想法
通过jquery来直接写入页面表格不需要在body里面写用循环直接在循环出来
现在已经循环出来24个小时和所有内容表格
但是内容表格还无法全部的分清楚,原本是上下两个不同的时间点但是现在会上半部分的全部显示完以后下半部分才显示出来
还有的就是浮动框还没做出来,和点击的事件获得每个半小时的时间和日期,还有上面的具体时间还没做
因为有问题所有昨天好好的查了jquery的创建方法在上网一般有三个方法只有前面一个方法有用后再来早上的时候总算才在jquery官方网站上面找到一个可以创建方法的例子解决了循环重复定义的问题 但是在这里还是有循环的表格可以出现但是时间还拿不到
今天好好的重新的看了官方的google日历里面看到不是全部都是用jquery写的大部分都是js这个让有了很大的启发还有在以前我总是想着日期的问题是从当天开始循环的但是在认真的研究以后发现其实不是的 google日历是以一周为一个时间单位周一到周七的星期是不会变的只有天数和月份在一直改变着这个给了我很大的启发天数应该从周期着手这样就避免了日期每天都会更新的问题
<今天的想法>今天主要上在通过jquery来让浮层获得当前表格的id 已经可以获得当前的id但是在jquery里还没找到可以将通过循环而得出的id传输出去的方法可以获得id也可以在直接在当前的表格里面直接通过jquery来实现往表格内部插入内容,但是要通过按钮来实现将input里面的内容传输到表格里面方法还没做到,现在可以在点击当前表格的时候直接插入内容,个获得当前表格的id,但是当出现一个中间的时候就是按钮创建任务的按钮还不能获得精准的表格内容下面有一个方法可以获得表格的id但是只限于是第一个表格的id
三、效果图
四、代码
模仿google日历自己来完成一个日历的所有效果
二、我的想法
通过jquery来直接写入页面表格不需要在body里面写用循环直接在循环出来
现在已经循环出来24个小时和所有内容表格
但是内容表格还无法全部的分清楚,原本是上下两个不同的时间点但是现在会上半部分的全部显示完以后下半部分才显示出来
还有的就是浮动框还没做出来,和点击的事件获得每个半小时的时间和日期,还有上面的具体时间还没做
因为有问题所有昨天好好的查了jquery的创建方法在上网一般有三个方法只有前面一个方法有用后再来早上的时候总算才在jquery官方网站上面找到一个可以创建方法的例子解决了循环重复定义的问题 但是在这里还是有循环的表格可以出现但是时间还拿不到
今天好好的重新的看了官方的google日历里面看到不是全部都是用jquery写的大部分都是js这个让有了很大的启发还有在以前我总是想着日期的问题是从当天开始循环的但是在认真的研究以后发现其实不是的 google日历是以一周为一个时间单位周一到周七的星期是不会变的只有天数和月份在一直改变着这个给了我很大的启发天数应该从周期着手这样就避免了日期每天都会更新的问题
<今天的想法>今天主要上在通过jquery来让浮层获得当前表格的id 已经可以获得当前的id但是在jquery里还没找到可以将通过循环而得出的id传输出去的方法可以获得id也可以在直接在当前的表格里面直接通过jquery来实现往表格内部插入内容,但是要通过按钮来实现将input里面的内容传输到表格里面方法还没做到,现在可以在点击当前表格的时候直接插入内容,个获得当前表格的id,但是当出现一个中间的时候就是按钮创建任务的按钮还不能获得精准的表格内容下面有一个方法可以获得表格的id但是只限于是第一个表格的id
三、效果图
四、代码
<!DOCTYPE html> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin:0; padding:0px; } body{ font-family:Microsoft YaHei; } .ensemble{ float:left; margin-top: 100px; margin-left: 100px; } .table-left{ float:left; width:146px; } .table-left table tr th{ float:left; width:140px; height:40px; border:1px solid #C4E1FF; overflow:hidden; padding-top: 10px; font-weight:normal; } .table-right{ float:left; margin-left: -5px; } .top{ float:left; margin-top: 0px; width:140px; height:26px; border:1px solid #C4E1FF; border-bottom: 1px dashed #C4E1FF; } .below{ float:left; margin-top: -2px; width:140px; height:25px; border-left: 1px solid #C4E1FF; border-right: 1px solid #C4E1FF; border-bottom:1px solid #C4E1FF; } .input-field{ position:relative; top: 0px; left: 0px; width:400px; height:150px; border:1px solid #C4E1FF; display:none; } .input-one{ float:right; width:200px; height:20px; margin-top: 70px; margin-right: 100px; } .input-two{ float:left; margin-top: 120px; margin-left: 10px; } </style> <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script language="javascript" type="text/javascript"> $(document).ready(function() { //这是在写标题的年月日 var time = new Date(); var year = time.getFullYear(); var moon = time.getMonth() + 1; var sky = time.getDate() - 2; var addsky = time.getDate() + 7 - 2; $("#title").append(year + '年'); $("#title").append(moon + '月'); $("#title").append(sky + '日'); $("#title").append('-' + addsky + '日'); //定义按钮按下后让浮层隐藏起来和通过jquery来取得表格的id $("#input-two").click(function() { //这里是想获得表格的id并将value直接传输进去的方法但是没成功 //$("#0tr"+hour+"td"+i).html() == $("#input-one").val(); //$("#0tr"+hour+"td"+i).append($("#input-one").val()); //alert($("#input-one").val()); $("#input-field").css("display","none"); //addid.html() = $("#input-two").val(); //可以获得第一个表格的id //alert($("#table-right td").attr("id")); }); //定义表单的任意表格让浮层出现 $("#table-right td").click(function() { $("#input-field").css("display","block"); //这个方法就是可以直接获得当前表格里面的任何信息 var vv = $(this); //获得当前表格的高度 vv.css("top","left") == $("#input-field").css("top","left"); //获得当前表格的id //var addid = $(this).attr("id"); //是当获得在点击事件触发的时候直接将ss写入表格的内部 $(this).html("ss"); //$(this).css("background-color","#000000"); //alert(11); }); }); function titles(titleNum) { //这里是通过js来循环24小时的表格 var titleText = new Array("上午12点","上午1点","上午2点","上午3点","上午4点","上午5点","上午6点","上午7点","上午8点","上午9点","上午10点","上午11点","下午12点","下午1点","下午2点","下午3点","下午4点","下午5点","下午6点","下午7点","下午8点","下午9点","下午10点","下午11点"); document.write('<th>'+titleText[titleNum]+'</th>'); } function toptable(hour) { //是循环上放的带虚线的表格 并且给与ID for(i=1; i<8; i++) { document.write('<td id="0tr'+hour+'td'+i+'" class="top"></td>'); } } function belowtable(hour) { //是循环下面不带虚线的表格 并且给与ID for(i=1; i<8; i++) { document.write('<td id="1tr'+hour+'td'+i+'" class="below" ></td>'); } } </script> </head> <body> <div class="ensemble"> <div id="title" class="title"> </div> <div id="input-field" class="input-field"> <input id="input-two" class="input-two" type="button" value="创建任务"/> <input id="input-one" class="input-one" type="text" /> </div> <div class="overall-table"> <div class="table-left"> <table cellspacing="0"> <script language="javascript" type="text/javascript"> for (j=0;j<24;j++) { document.write("<tr>"); titles(j); document.write("</tr>"); } </script> </table> </div> <div id="table-right" class="table-right"> <table cellspacing="0"> <script language="javascript" type="text/javascript"> for (z=0;z<24;z++) { document.write("<tr>"); toptable(z); document.write("</tr><tr>"); belowtable(z); document.write("</tr>"); } </script> </table> </div> </div> </div> </body> </html>
发表评论
-
Zepto
2015-08-15 13:49 1202Zepto Zepto,是一个比较 ... -
node.js的学习-20140611
2014-06-11 23:17 731//创建一个h1方法里面舒服一个nihao functi ... -
node.js的学习-20140609
2014-06-09 23:01 532Node.js 是一个基于Chrome JavaScript ... -
git的学习-20140604
2014-06-04 23:30 473Git使用 首先 开启"G ... -
PC和移动端的页面的一些差距-20140525
2014-05-25 23:46 848首先 1、标签、描述等描述清晰准确 2、网站结构3层树状结构 ... -
Bootstrap排版基础样式和响应式图片-20140521
2014-05-22 00:41 2707Bootstrap基础排版样式 .col-xs-* // ... -
Bootstrap特性、设计和组件-20140519
2014-05-19 22:22 677特点 Bootstrap是基于jQuery框架开发的,它在j ... -
Bootstrap流式布局-20140515
2014-05-16 00:26 14708流布局是一种适应屏幕的做法。即不固定块的宽度,而是采用百分比作 ... -
Bootstrap的宽度和分辨率的差别-20140514
2014-05-14 23:05 6207首先在bootstrap里面所有 ... -
Bootstrap的认识-20140513
2014-05-14 00:09 1338通过公司的两个比较大 ... -
jquery初步认识-20140123
2014-01-24 01:30 650一、原型模式结构 // 定义一个jQuery构造函数 ... -
html5的特殊标签作用-20140114
2014-01-15 01:04 878<base>、定义页面中所有链接的基准URL & ... -
ie下的指定样式-20140106
2014-01-08 00:00 7251. <!--[if !IE]><!--&g ... -
margin-left在IE6下左浮动加倍-20140102
2014-01-02 23:04 715一、IE6下如果line-height超出本身区块的heigh ... -
浮动存在的问题-20131229
2013-12-29 23:00 512看一个正常的浮动案例 <!DOCTYPE h ... -
在ie6下同张图片不能外面包有a标签后在画热区-20131223
2013-12-23 23:47 823最近在做页面有的发现一个问题 <div class ... -
ie6下导航存在的问题和-2013-12-20
2013-12-21 00:51 600最近在做事的时候发现一个有趣的问题,在上网也找过但是都没有很好 ... -
按比例展示的小js-20131217
2013-12-18 00:41 400做需求的做到一个关于这个功能的项目所以记下来 Math.ra ... -
定位需要注意-20131214
2013-12-15 01:07 661在CSS中关于定位的内容 ... -
flash在Safari下的BUG-20131212
2013-12-12 01:09 730<object width="940&qu ...
相关推荐
jquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-uijquery-ui
【jquery插件】jquery.maskedinput-1.2.2.js
jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)jquery-3.7.0.min.js(jQuery下载)...
Jquery智能提示完整全部版本 jquery&vsdoc1.4.0-2.1.0 jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js jquery-1.4.4-vsdoc.js jquery-1.4.4.min.js jquery-1.4.min.js jquery-1.5-vsdoc.js...
jquery插件jquery-ui-1.8.18.custom.min.js
超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31超酷jQuery幻灯片2010-8-31
jquery datepicker 的中文包 调用方法 <script src="./public/js/jquery-ui-1.10.3.min.js"> <script src="./public/js/jquery.datepicker-zh-CN.js"></script> <link href="./public/css/jqueryui/jquery-ui-...
第0课 - 内容概述 - [精通JavaScript+jQuery] 第1课 - JavaScript背景知识-[精通JavaScript+jQuery] 第2课 - JavaScript基础 - [精通JavaScript+jQuery] 第3课 - CSS基础 - [精通JavaScript+jQuery] 第4课 - CSS...
jquery-ui-themes-1.8.12.zip google 社区 jquery-ui-theme ui 主题 资源
jquery-easyui-EDT-1.5.2-build1 jquery-easyui-EDT-1.5.2-build1
jquery--frame--ziyuan jquery--frame--ziyuan jquery--frame--ziyuan jquery--frame--ziyuan
jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载 jquery插件大全--打包下载
jQuery-Timepicker-Addon-master(jquery 日历时间)
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
jquery-colorbox jquery-colorbox jquery-colorbox
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)jQuery插件---mcdropdow.(仿下拉框多层次)
jquery学习-----jquery库讲义,更快的了解jquery
jquery插件jquery-ui-1.8.2.custom.min.js
jquery-1.7.1和-1.7.1vsdoc