jquery--->todoList
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>todolist</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5">
<form action="" id="todoForm">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" id="todoInput" class="form-control" />
</form>
<p id="todoCount"></p>
<ol id="todoList"></ol>
</div>
</div>
</div>
</body>
<script src="js/jquery-3.0.0.min.js"></script>
</html>
<script>
var $todoForm = $('#todoForm');
var $todoInput = $('#todoInput');
var $todoList = $('#todoList');
var $todoCount = $('#todoCount');
function count(){
var len = $todoList.children().length;
$todoCount.html(len>0?'现有'+len+'项todo list':'');
}
$todoForm.submit(function(e){
e.preventDefault();
var input_value = $todoInput.val();
!!$todoInput.val().trim()&&$todoList.append('<li>'+input_value+' <a href="#" class="todoDelete">X</a></li>');
$todoInput.val('');
count();
})
$todoList.on('click','.todoDelete',function(){
$(this).parent().remove();
count();
})
</script>
<style>
*{
margin:0;padding:0;
}
#todoList{
width:94%;
margin:0 auto;
}
#todoList li{
line-height: 40px;
border-bottom:1px solid #eee;
}
#todoList a{
float: right;
}
</style>
angular--->todoList
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>todolist</title>
</head>
<body>
<div class="container" ng-controller='todos'>
<div class="row">
<div class="col-md-5">
<form action="" ng-submit="add()">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" ng-model="txt" class="form-control" />
</form>
<p ng-hide="todoList.length===0">现有{{todoList.length}}项todo list</p>
<ol id="todoList">
<li ng-repeat="todo in todoList track by $index">
{{todo}}
<a href="#" ng-click="todoList.splice($index,1)">X</a>
</li>
</ol>
</div>
</div>
</div>
</body>
<script src="js/angular.min.js"></script>
</html>
<script>
angular.module('todoApp',[])
.controller('todos',['$scope',function($scope){
$scope.todoList=[];
$scope.add = function(){
!!$scope.txt.trim()&&$scope.todoList.push($scope.txt);
$scope.txt='';
}
}],)
</script>
<style>
*{
margin:0;padding:0;
}
#todoList{
width:94%;
margin:0 auto;
}
#todoList li{
line-height: 40px;
border-bottom:1px solid #eee;
}
#todoList a{
float: right;
}
</style>
avalon --->todoList
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<title>todolist</title>
</head>
<body>
<div class="container" >
<div class="row">
<div class="col-md-5" ms-controller='todos'>
<form action="" ms-on-submit="@add">
<label for="">将下面输入的文字放到todolist</label>
<input type="text" ms-duplex="@txt" class="form-control" />
</form>
<p ms-if="@todoList.size>0">现有{{@todoList.size}}项todo list</p>
<ol id="todoList">
<li ms-for="($index,el) in @todoList">
{{el}}
<a href="#" ms-click="@remove($index)">删除</a>
</li>
</ol>
</div>
</div>
</div>
<script src="js/avalon.js"></script>
</body>
<script>
var vm = avalon.define({
$id:'todos',
txt:'',
todoList:[],
add:function(e){
e.preventDefault();
!!vm.txt.trim()&&vm.todoList.push(vm.txt);
vm.txt='';
},
remove:function(index){
avalon.Array.removeAt(vm.todoList,index)
}
})
console.log(vm)
</script>
</html>
<style>
*{
margin:0;padding:0;
}
#todoList{
width:94%;
margin:0 auto;
}
#todoList li{
line-height: 40px;
border-bottom:1px solid #eee;
}
#todoList a{
float: right;
}
</style>