单选择与全部选择

来源：互联网发布：梦里花落知多少网王txt 编辑：程序博客网时间：2024/05/05 23:24

第一个

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width" />    <title>Title</title>    <style type="text/css">        select{            width: 100px;            height: 200px;        }    </style>    <script src="../jquery-1.11.1/jquery-1.11.1.js"></script>    <script>        $(function () {            $("button").eq(0).click(function () {                $("#sel2").append($("#sel1 option"));            });            $("button").eq(1).click(function () {                $("#sel1").append($("#sel2 option"));            });            $("button").eq(2).click(function () {                $("#sel2").append($("#sel1 option:selected"));            });        })    </script></head><body><select id="sel1" multiple>    <option>香蕉</option>    <option>苹果</option>    <option>西瓜</option>    <option>榴莲</option>    <option>水蜜桃</option>    <option>菠萝</option></select><button> >>>>>> </button><button> <<<<<< </button><button> > </button><button> < </button><select id="sel2" multiple></select></body></html>

第二个行背景颜色

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        table{            margin: 0 auto;            border-collapse: collapse;        }        th,td{            padding: 5px;            border: 1px solid #000000;        }    </style>    <script src="../jquery-1.11.1/jquery-1.11.1.min.js"></script>    <script>        $(document).ready(function () {            //更改背景            $("tbody tr:odd").css("background-color","red");            $("tbody tr:even").css("background-color","greenyellow");            var a = "";            $("tbody tr").hover(function () {                $(this).css("background-color","#969695");            },function () {                $("tbody tr:odd").css("background-color","red");                $("tbody tr:even").css("background-color","greenyellow");            });            $("button").click(function () {                $(this).parent().parent().remove();                var se = $("tbody").children("tr");                console.log(se.length);                if (se.length==0){                    $("table")[0].style.display = "none";                }            });        });    </script></head><body><table border="1" style="text-align: center; width: 300px">    <thead>    <tr>        <th>姓名</th>        <th>年龄</th>        <th>性别</th>        <th>删除</th>    </tr>    </thead>    <tbody>    <tr>        <td>张三</td>        <td>男</td>        <td>23</td>        <td><button>删除</button></td>    </tr>    <tr>        <td>李四</td>        <td>男</td>        <td>25</td>        <td><button>删除</button></td>    </tr>    <tr>        <td>王烈</td>        <td>男</td>        <td>33</td>        <td><button>删除</button></td>    </tr>    <tr>        <td>杨再兴</td>        <td>男</td>        <td>36</td>        <td><button>删除</button></td>    </tr>    </tbody></table></body></html>

第三个掷骰子

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>掷骰子</title>    <style>        input{            margin-top: 8px;        }        button{            margin-top: 5px;        }    </style>    <script src="../angular-1.5.5/angular.min.js"></script>    <script>        var myapp  = angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.fun = function () {                $scope.guess = function () {                    $scope.random1 = parseInt(Math.random()*6);                    $scope.random2 = parseInt(Math.random()*6);                    if ($scope.random1>$scope.random2){                        $scope.win = "张三"                    } else if ($scope.random1<$scope.random2){                        $scope.win = "李四"                    } else {                        $scope = "平局"                    }                };            };            $scope.fun2 = function () {                $scope.guess = function () {                    $scope.random1 = parseInt(Math.random()*6);                    $scope.random2 = parseInt(Math.random()*6);                    if ($scope.random1>$scope.random2){                        $scope.win = "张三"                    } else if ($scope.random1<$scope.random2){                        $scope.win = "李四"                    } else {                        $scope = "平局"                    }                };            };            $scope.guess = function () {                $scope.random1 = parseInt(Math.random()*6);                $scope.random2 = parseInt(Math.random()*6);                if ($scope.random1>$scope.random2){                    $scope.win = "张三"                } else if ($scope.random1<$scope.random2){                    $scope.win = "李四"                } else {                    $scope = "平局"                }            };            $scope.no = function () {                $scope.random1 = null;                $scope.random2 = null;                $scope.win = null;            }        })    </script></head><body ng-app="myapp" ng-controller="myCtrl">张三<input type="text" value="" ng-model="random1" ng-click="fun()"><br/>李四<input type="text" value="" ng-model="random2" ng-click="fun(2)"><br/><input type="text" ng-model="win">获胜者<br/><button ng-click="guess()">掷骰子</button><button ng-click="no()">不玩了</button></body></html>

第四个猜大小

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <script src="../angular-1.5.5/angular.min.js"></script>    <script>        var myapp = angular.module("myapp",[]);        myapp.controller("myCtrl",function ($scope) {            $scope.guess = "10";            $scope.count = 0;            $scope.differ = null;            $scope.random = parseInt(Math.random() * 10);            $scope.guess = null;            //验证消息            $scope.check = function () {                console.log($scope.random);                $scope.differ = $scope.guess-$scope.random;                $scope.count++;            };            //初始化游戏            $scope.again = function () {                $scope.count = 0;                $scope.differ = null;                $scope.random = parseInt(Math.random() * 10);                $scope.guess = null;            };            $scope.again();        });    </script></head><body ng-app="myapp" ng-controller="myCtrl"><h3>请输入一个1-10的整数</h3><input type="text" ng-model="guess"><button ng-click="check()">验证</button><button ng-click="again()">再来一次</button><p ng-show="differ>0">猜大了</p><p ng-show="differ<0">猜小了</p><p ng-show="differ==0">猜对了</p><p>你一共猜了<span ng-bind="count"></span>次</p></body></html>

阅读全文

0 0