html 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <meta name="renderer" content="webkit">
- <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0,width=device-width">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
- <title>CSS3 时间轴 </title>
- </head>
- <style>
- HTML *{margin:0;padding:0;-webkit-font-smoothing: antialiased;font-family:'微软雅黑','Microsoft YaHei',Verdana,Helvetica,Arial;font-size: 14px;color: #2d2d2d;}
- body{background: #f2f1f1;}
- ul,ul li{list-style:none;}
- a:link {color: #2d2d2d;text-decoration: none;}
- a:visited {color: #2d2d2d;text-decoration: none;}
- a:hover {color: #09C;text-decoration: none;}
- a:active {color: #09C;text-decoration: none;}
- #input-box {
- position: fixed;
- left:0;
- top:0;
- }
- .time-axis{box-sizing:border-box;width: 800px;overflow: hidden;margin: 0 auto;position: relative;}
- .time-axis-border{width: 1px;height: 100%;position: absolute;top: 0;left: 50%;margin-left: -0.5px;background-color: #9e9b9b;}
- .time-axis-con{box-sizing: border-box;width: 100%;overflow: hidden;margin-bottom: 15px;}
- .time-axis-date{font-size: 12px;color: #aaa;margin-bottom: 5px;}
- .time-axis-detail{box-sizing: border-box;width: 50%;padding:0 30px;
- position: relative;
- top:-24px;
- }
- .time-axis-detail p{Word-break: break-all;}
- .time-axis-con:nth-of-type(odd) .time-axis-detail{text-align: left;float: right;}
- .time-axis-con:nth-of-type(even) .time-axis-detail{text-align: right;float: left;}
- .time-axis-dot span{width: 10px;height: 10px;border-radius:50%;margin: 10px auto;
- position: relative;
- background-color:purple;
- z-index:3;
- display: block;
- }
- .bottoncss{
- width: 100px;
- height: 35px;
- border: 1px solid #999966;
- border-radius: 15px;
- outline: none;
- background: #00FF66;
- cursor: pointer;
- position: relative;
- top: -25px;
- }
- .textcss{
- width: 200px;
- text-align: center;
- /*vertical-align: middle;*/
- /*height: 100px;*/
- border: 1px solid #999966;
- border-radius: 15px;
- outline: none;
- font-size: 24px;
- margin-left: 200px;
- margin-top: 20px;
- }
- .bottoncss:hover{
- background: #00FFCC;
- }
- </style>
- <body>
- <h1 style="text-align: center;margin: 20px;">CSS3 时间轴 </h1>
- <div id="jiedian" class="time-axis">
- <div class="time-axis-con">
- <div class="time-axis-dot"><span></span></div>
- <div class="time-axis-detail">
- <div class="time-axis-date">2017-6-24</div>
- <div>
- <a href="#">24 日 </a>
- </div>
- </div>
- </div>
- <div class="time-axis-con">
- <div class="time-axis-dot"><span></span></div>
- <div class="time-axis-detail">
- <div class="time-axis-date">2017-6-23</div>
- <div>
- <a href="#">23 日 </a>
- </div>
- </div>
- </div>
- <div class="time-axis-con">
- <div class="time-axis-dot"><span></span></div>
- <div class="time-axis-detail">
- <div class="time-axis-date">2017-6-22</div>
- <div>
- <a href="#">22 日 </a>
- </div>
- </div>
- </div>
- <div class="time-axis-con">
- <div class="time-axis-dot"><span></span></div>
- <div class="time-axis-detail">
- <div class="time-axis-date">2017-6-21</div>
- <div>
- <a href="#">21 日 </a>
- </div>
- </div>
- </div>
- <div class="time-axis-con">
- <div class="time-axis-dot"><span></span></div>
- <div class="time-axis-detail">
- <div class="time-axis-date">2017-6-22</div>
- <div>
- <p>20 日 </p>
- </div>
- </div>
- </div>
- <div class="time-axis-border"></div>
- </div>
- <div id="input-box">
- <textarea name=""class="textcss"placeholder=" 请输入文字 "></textarea>
- <input class="bottoncss" type="button" name=""id="add"onclick="onbutton();"value=" 添加 " />
- </div>
- </body>
- <!--<script src="../../base/JS/jQuery/jQuery-1.10.2.JS"></script>-->
- <script src="http://apps.bdimg.com/libs/jQuery/1.10.2/jQuery.min.JS"></script>
- <script type="text/JavaScript">
- Date.prototype.Format = function (fmt) { //author: meizz
- var o = {
- "M+": this.getMonth() + 1, // 月份
- "d+": this.getDate(), // 日
- "H+": this.getHours(), // 小时
- "m+": this.getMinutes(), // 分
- "s+": this.getSeconds(), // 秒
- "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
- "S": this.getMilliseconds() // 毫秒
- };
- if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
- for (var k in o)
- if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
- return fmt;
- };
- var Jiedian = document.getElementById("jiedian");
- let time = new Date().Format("yyyy-MM-dd HH:mm:ss");
- function onbutton(){
- var text = $(".textcss").val();
- if(text != ""){
- var conval = text ;
- var thehtml = "<div class='time-axis-con'><div class='time-axis-dot'><span></span></div><div class='time-axis-detail'><div class='time-axis-date'>"+time+"</div><div><p>"+ conval +"</p></div></div></div>"
- $("#jiedian").prepend(thehtml);
- $(".textcss").val('');
- }else{
- return alert("请输入文字");
- }
- }
- </script>
- </HTML>
来源: http://www.qdfuns.com/article/28601/89858d0190a882623e2bb9332450f3b4.html