自制时间轴效果很赞

来源：互联网发布：淘宝开店最新规则编辑：程序博客网时间：2024/05/16 14:29
   <!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;}/*start*/.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 10px;}.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;background-color:#9e9b9b;display: block;}.bottoncss{width: 100px;height: 50px;border: 1px solid #999966;border-radius: 15px;outline: none;background: #00FF66;cursor: pointer;}.textcss{width: 200px;height: 100px;border: 1px solid #999966;border-radius: 15px;outline: none;font-size: 24px;margin-left: 200px;margin-top: 20px;}.bottoncss:hover{border-radius: #999999;background: #00FFCC;}.textcss:hover{border-radius: #999999;}.delete{cursor:pointer;}</style><body><h1 style="text-align: center;margin: 20px;">CSS3时间轴</h1><div id="jiedian" class="time-axis"><div  class="time-axis-border"></div></div><div id=""><input style="height:50px; line-height:50pxs; padding:0px 10px;"  class="textcss" type="text" name="valthis" id="valthis" value="" placeholder="请输入文字"/><input style="height:40px; line-height:40pxs;" class="bottoncss" type="button" name="" id="" onclick="onbutton();" value="添加" /></div></body>    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>  <script type="text/javascript">var Jiedian = document.getElementById("jiedian");function onbutton(){var text = $("#valthis").val();if(text != ""){var conval = text ;var thehtml = "<div style='display:none' class=\"time-axis-con\"><div class=\"time-axis-dot\"><span></span></div><div class=\"time-axis-detail\"><div class=\"time-axis-date\">"+fnDate()+"</div><div><p>"+ conval +"</p></div><div><p class=\"delete\" style=\"color:#aaa;\" onclick=\"deleteMe()\">删除</p></div></div></div>";$("#jiedian").append(thehtml);$('.time-axis-con').fadeIn(800);$("#valthis").val('').focus();}else{return alert("请输入文字");}}//js 获取当前时间      function fnDate() {          var date = new Date();          var year = date.getFullYear();//当前年份          var month = date.getMonth();//当前月份          var data = date.getDate();//天          var hours = date.getHours();//小时          var minute = date.getMinutes();//分          var second = date.getSeconds();//秒          var time = year + "-" + fnW((month + 1)) + "-" + fnW(data) + " " + fnW(hours) + ":" + fnW(minute) + ":" + fnW(second);          var a = new Array("日", "一", "二", "三", "四", "五", "六");          var week = new Date().getDay();          var str = "星期" + a[week];          return time + "　" + str;      }      //补位 当某个字段不是两位数时补0      function fnW(str) {          var num;          str > 9 ? num = str : num = "0" + str;          return num;      }  function deleteMe(event){event = event? event: window.event;  var srcObj = ((event.srcElement)?event.srcElement:event.target); $(srcObj).parent().parent().parent().fadeOut(400,function(){$(srcObj).parent().parent().parent().remove()})}</script></html>
阅读全文
0 0
自制时间轴 效果很赞

自制时间轴效果很赞
