jQuery任务列表案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>任务列表</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
.Div {
border: 3px ridge rgba(37, 34, 34, 0.605);
margin: 0 auto;
text-align: center;
width: 750px;
height: 1000px;
border-style: dotted solid double dashed;
}
h5 {
text-align: center;
margin-bottom: 30px;
font-weight: bold;
}
p {
font-size: 20px;
}
.input-group {
margin: 0 auto;
}
#exampleInputAmount {
margin-right: 15px;
width: 460px;
}
#thead1 tr th {
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./layui/layui.js"></script>
<script>
function getTimer() {
var date = new Date()
var week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var year = date.getFullYear()
var month = date.getMonth() + 1
var datee = date.getDate()
var day = date.getDay()
var time = year + '年' + month + '月' + datee + '日 ';
function getTimerr() {
var time = new Date()
var hour = time.getHours()
hour = hour < 10 ? '0' + hour : hour
var minute = time.getMinutes()
minute = minute < 10 ? '0' + minute : minute
var second = time.getSeconds()
second = second < 10 ? '0' + second : second
return hour + ':' + minute + ':' + second
}
return time + ' ' + getTimerr()+ ' ' +week[day]
}
function ad(params) {
var ss = $(params).prev().val()
var ti = getTimer()
var v = $('<tr>' +
' <td class="col">'+ss+'</td>' +
' <td class="col">'+ti+'</td> ' +
'<td> ' +
' <div> ' +
' <button type="button" class="btn btn-default" οnclick="sb(this)">button</button> ' +
' <button οnclick="rm(this)" type="button" class="btn btn-default">delete</button> ' +
' </div> ' +
'</td> ' +
'</tr>)');
$('.layui-table tbody').prepend(v)
$(params).prev().val('');
}
function rm(params) {
$(params).parent().parent().parent().remove();
}
function sb(params) {
$(params).parent().parent().parent().children('.col').css({color:'rgb(255, 25, 25)','text-decoration': 'line-through'});
}
</script>
<div class="Div">
<p><b>任务列表</b></p>
<div class="input-group">
<input type="text" class="btn btn-default" id="exampleInputAmount" placeholder="输入要添加的任务" >
<button type="button" class="btn btn-info" id="btn1" onclick="ad(this)">add</button>
</div>
<div>
<table class="layui-table" lay-even lay-skin="line" lay-size="lg">
<colgroup>
<col width="150">
<col>
</colgroup>
<thead id="thead1">
<tr>
<th>任务</th>
<th>时间</th>
<th>选择</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
|