选择想要出现的图片张数

最新推荐文章于 2023-06-19 15:25:47 发布

sujiao666

最新推荐文章于 2023-06-19 15:25:47 发布

阅读量319

点赞数

分类专栏：前端js 文章标签：选择图片

本文链接：https://blog.csdn.net/u013195452/article/details/52745995

版权

前端js 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-3.0.0.js"></script>
       <style>
           ol{

           }
           li{
               list-style: none;
               float: left;
               width: 150px;
               height: 150px;
               background: pink;
               margin: 2px;
               display: none;
           }
       </style>
   </head>
   <body>
       <input id="test" type="text" />
       <input id="btn" type="button" value="确定" />
       <ol>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
           <li></li>
       </ol>
   </body>
   <script>
//       var test = document.getElementById('test');
//       var btn = document.getElementById('btn');
//       var oli = document.getElementsByTagName('li');
//
//       btn.onclick = function(){
//           for (var i = 0; i < oli.length; i++) {
//               oli[i].style.display = 'none';
//           }
//
//           for (var i = 0; i < test.value; i++) {
//               oli[i].style.display = 'block';
//           }
//
//       }

       $(function(){
           $('#btn').click(function(){
               var i = 0;
               $('ol li').hide();
               var num = $('#test').val();
               while(i<num){
                   $('li').eq(i).show();
                   i++;
               }
           })
       })

   </script>
</html>