搜索框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <input id="ID1" type="text" value="请输入用户名" onblur="Blurs()" onfocus="Focus()">
  10.  
  11. <script>
  12.  
  13. function Focus(){
  14.  
  15.     var input=document.getElementById("ID1");
  16.     if (input.value=="请输入用户名"){
  17.         input.value="";
  18.     }
  19. }
  20.  
  21. function Blurs(){
  22.  
  23.     var ele=document.getElementById("ID1");
  24.     var val=ele.value;
  25.     if(!val.trim()){
  26.         ele.value="请输入用户名";
  27.     }
  28. }
  29.  
  30. </script>
  31.  
  32. </body>
  33. </html>

搜索框

正反选练习：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. <button onclick="selectAll()">全选</button>
  10. <button onclick="cancel()">取消</button>
  11. <button onclick="reverse()">反选</button>
  12. <hr>
  13. <table border="1px">
  14.     <tr>
  15.         <td><input type="checkbox"></td>
  16.         <td>111</td>
  17.         <td>111</td>
  18.         <td>111</td>
  19.     </tr>
  20.     <tr>
  21.         <td><input type="checkbox"></td>
  22.         <td>222</td>
  23.         <td>222</td>
  24.         <td>222</td>
  25.     </tr>
  26.     <tr>
  27.         <td><input type="checkbox"></td>
  28.         <td>333</td>
  29.         <td>333</td>
  30.         <td>333</td>
  31.     </tr>
  32.  
  33. </table>
  34.  
  35. <script>
  36.     function selectAll(){
  37.         var inputs=document.getElementsByTagName('input');
  38.         for (var i=0;i<inputs.length;i++){
  39.             var input=inputs[i];
  40.             input.checked=true;
  41.         }
  42.     }
  43.  
  44.     function cancel(){
  45.         var inputs=document.getElementsByTagName('input');
  46.         for (var i=0;i<inputs.length;i++){
  47.             var input=inputs[i];
  48.             input.checked=false;
  49.         }
  50.     }
  51.  
  52.     function reverse(){
  53.         var inputs=document.getElementsByTagName('input');
  54.         for (var i=0;i<inputs.length;i++){
  55.             var input=inputs[i];
  56.             //input.checked=!input.checked
  57.             if(input.checked){
  58.                 input.checked=false
  59.             }else{
  60.                 input.checked=true
  61.             }
  62.  
  63.         }
  64.     }
  65. </script>
  66.  
  67. </body>
  68. </html>

正反选

二级联动：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .select {
  8.             width: 100px;
  9.             height: 30px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.  
  15. <select name="" id="provinces" class="select">
  16.     <option value="">请选择省份</option>
  17. </select>
  18.  
  19. <select name="" id="city" class="select">
  20.     <option value="">请选择城市</option>
  21. </select>
  22.  
  23. <script>
  24.     data={'河北':['廊坊','石家庄','保定','山海关','雄县'], '山西':['晋城','大同','太原','阳泉'], '辽宁':['沈阳','大连','鞍山','开源','锦州','葫芦岛','阜新']};
  25.     // console.log(data);
  26.     // console.log(typeof(data));
  27.  
  28.     var pro_ele = document.getElementById('provinces');
  29.     var city_ele = document.getElementById('city');
  30.  
  31.     for (var i in data){
  32.         var ele = document.createElement('option');
  33.         ele.innerHTML=i;
  34.         pro_ele.appendChild(ele)
  35.     }
  36.  
  37.     pro_ele.onchange=function () {
  38.         console.log(this.options[this.selectedIndex]);
  39.         var citys=data[this.options[this.selectedIndex].innerHTML];
  40.  
  41.         city_ele.options.length=1;
  42.         for (i=0;i<citys.length;i++){
  43.             var ele=document.createElement('option');
  44.             ele.innerHTML=citys[i];
  45.             city_ele.appendChild(ele);
  46.         }
  47.     }
  48. </script>
  49.  
  50. </body>
  51. </html>

二级联动

模态对话框：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .back{
  8.             background-color: transparent;
  9.             height: 2000px;
  10.         }
  11.         .head-right {
  12.             right: 0px;
  13.             margin: 19px 0 5px;
  14.             display: inline-block;
  15.             position: absolute;
  16.             color: #fff;
  17.             padding: 0 96px 0 0;
  18.         }
  19.         .mnav{
  20.             color: #333;
  21.             float:left;
  22.             font-weight: 700;
  23.             line-height: 24px;
  24.             margin-left: 20px;
  25.             font-size: 13px;
  26.             text-decoration: underline;
  27.         }
  28.         .shade{
  29.             position: fixed;
  30.             top: 0;
  31.             bottom: 0;
  32.             left:0;
  33.             right: 0;
  34.             background-color: rgba(12, 14, 23, 0.58);
  35.             opacity: 0.4;
  36.         }
  37.  
  38.         .hide{
  39.             display: none;
  40.         }
  41.         #gd{
  42.             display: inline-block;
  43.             position: absolute;
  44.             right: 10px;
  45.             width: 60px;
  46.             height: 23px;
  47.             color: #fff;
  48.             background: #38f;
  49.             line-height: 24px;
  50.             font-size: 13px;
  51.             text-align: center;
  52.             overflow: hidden;
  53.             border-bottom: 1px solid #38f;
  54.             margin-left: 19px;
  55.             margin-right: 2px;
  56.             text-decoration: none;
  57.  
  58.         }
  59.         .models{
  60.             position: fixed;
  61.             top: 50%;
  62.             left: 50%;
  63.             margin-left: -150px;
  64.             margin-top: -200px;
  65.             height:400px;
  66.             width: 350px;
  67.             background-color: white;
  68.  
  69.         }
  70.         .models-dl1{
  71.              height: 30px;
  72.              margin-bottom: 1px;
  73.         }
  74.         #ID2{
  75.             width: 32px;
  76.             height: 30px;
  77.             right: 16px;
  78.             top: 30px;
  79.             float: right;
  80.             padding-right: 10px;
  81.  
  82.         }
  83.         .models-dl2{
  84.             text-align: center;
  85.             margin-top: 100px;
  86.         }
  87.         .models-dl3{
  88.             text-align: center;
  89.             margin-top: 20px;
  90.         }
  91.         .models-dl4{
  92.             text-align: center;
  93.             margin-top: 100px;
  94.         }
  95.         .models-dl44-2{
  96.             margin-left: 20px;
  97.         }
  98.     </style>
  99. </head>
  100. <body>
  101. <div class="back">
  102.     <div class="head-right">
  103.         <a href="#" class="mnav">新闻</a>
  104.         <a href="#" class="mnav">hao123</a>
  105.         <a href="#" class="mnav">地图</a>
  106.         <a href="#" class="mnav">视频</a>
  107.         <a href="#" class="mnav">贴吧</a>
  108.         <a href="#" class="mnav">学术</a>
  109.         <a href="#" class="mnav" onclick="action('show')">登陆</a>
  110.         <a href="#" class="mnav">设置</a>
  111.         <a href="#" id='gd' class="mnav">更多产品</a>
  112.     </div>
  113. </div>
  114.  
  115. <div class="shade hide"></div>
  116. <div class="models hide">
  117.     <div class="models-dl1">
  118.         <a id="ID2" type="button" value="cancel" onclick="action('hide')">取消</a>
  119.     </div>
  120.     <div class='models-dl2' >
  121.         用户名<input type="text" value="用户名">
  122.     </div>
  123.     <div class='models-dl3' >
  124.         密&nbsp&nbsp&nbsp码 <input type="text" class='dl' value="密码">
  125.     </div>
  126.     <div class='models-dl4' >
  127.         <a href="#" class="models-dl44-2">登陆</a>
  128.         <a href="#" class="models-dl44-2">注册</a>
  129.     </div>
  130.  
  131. </div>
  132.  
  133. <script>
  134.     function action(act){
  135.         var ele=document.getElementsByClassName("shade")[0];
  136.         var ele2=document.getElementsByClassName("models")[0];
  137.         if(act=="show"){
  138.               ele.classList.remove("hide");
  139.               ele2.classList.remove("hide");
  140.         }else {
  141.               ele.classList.add("hide");
  142.               ele2.classList.add("hide");
  143.         }
  144.     }
  145. </script>
  146. </body>
  147. </html>

模态对话框

轮播图

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         .outer {
  8.             width: 590px;
  9.             height: 470px;
  10.             margin: 80px auto;
  11.             position: relative;
  12.         }
  13.  
  14.         .img li {
  15.             position: absolute;
  16.             list-style: none;
  17.             top: 0;
  18.             left: 0;
  19.         }
  20.  
  21.         .num {
  22.             position: absolute;
  23.             bottom: 18px;
  24.             left: 180px;
  25.             list-style: none;
  26.         }
  27.  
  28.         .num li {
  29.             display: inline-block;
  30.             text-align: center;
  31.             width: 18px;
  32.             height: 18px;
  33.             background-color: white;
  34.             border-radius: 50%;
  35.             line-height: 18px;
  36.             margin-left: 8px;
  37.         }
  38.  
  39.         .btn {
  40.             top: 50%;
  41.             position: absolute;
  42.             display: none;
  43.             background-color: lightgray;
  44.             width: 30px;
  45.             height: 60px;
  46.             text-align: center;
  47.             line-height: 60px;
  48.             font-size: 30px;
  49.             margin-top: -30px;
  50.             opacity: 0.7%;
  51.         }
  52.  
  53.         .left {
  54.             left: 0;
  55.         }
  56.  
  57.         .right {
  58.             right: 0;
  59.         }
  60.  
  61.         .outer:hover .btn{
  62.             display: inline-block;
  63.         }
  64.  
  65.         .num .active {
  66.             background-color: red;
  67.         }
  68.     </style>
  69. </head>
  70. <body>
  71.  
  72.     <div class="outer">
  73.         <ul class="img">
  74.             <li><a href=""><img src="data:images/1.jpg" alt=""></a></li>
  75.             <li><a href=""><img src="data:images/2.jpg" alt=""></a></li>
  76.             <li><a href=""><img src="data:images/3.jpg" alt=""></a></li>
  77.             <li><a href=""><img src="data:images/4.jpg" alt=""></a></li>
  78.             <li><a href=""><img src="data:images/5.jpg" alt=""></a></li>
  79.             <li><a href=""><img src="data:images/6.jpg" alt=""></a></li>
  80.             <li><a href=""><img src="data:images/7.jpg" alt=""></a></li>
  81.         </ul>
  82.  
  83.         <ul class="num">
  84.             <!--<li class="active"></li>-->
  85.             <!--<li></li>-->
  86.             <!--<li></li>-->
  87.             <!--<li></li>-->
  88.             <!--<li></li>-->
  89.             <!--<li></li>-->
  90.             <!--<li></li>-->
  91.         </ul>
  92.  
  93.         <div class="left btn"> < </div>
  94.         <div class="right btn"> > </div>
  95.     </div>
  96.  
  97.     <script src="jquery-3.3.1.js"></script>
  98.     <script>
  99.         var i=0;
  100.         //  通过jquery自动创建按钮标签
  101.         var img_num = $(".img li").length;
  102.  
  103.         for (var j=0;j<img_num;j++){
  104.             $(".num").append("<li>")
  105.         }
  106.         $(".num li").eq(0).addClass('active');
  107.  
  108.         // 手动轮播
  109.         $(".num li").mouseover(function () {
  110.             i=$(this).index();
  111.             $(this).addClass('active').siblings().removeClass('active');
  112.             $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200)
  113.         });
  114.  
  115.         // 自动轮播
  116.         var c=setInterval(GO_L, 1500);
  117.  
  118.         function GO_R() {
  119.             if (i==img_num-1){
  120.                 i=-1
  121.             }
  122.             i++;
  123.             $(".num li").eq(i).addClass('active').siblings().removeClass('active');
  124.             $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
  125.         }
  126.  
  127.         function GO_L() {
  128.             if (i==0){
  129.                 i=img_num
  130.             }
  131.             i--;
  132.             $(".num li").eq(i).addClass('active').siblings().removeClass('active');
  133.             $(".img li").eq(i).stop().fadeIn(200).siblings().stop().fadeOut(200);
  134.         }
  135.         $(".outer").hover()(function () {
  136.             clearInterval(c)
  137.         },function () {
  138.             c=setInterval(GO_R, 1500)
  139.         });
  140.  
  141.         // button 加定播
  142.         $(".left").click(GO_L);
  143.         $(".right").click(GO_G);
  144.  
  145.     </script>
  146. </body>
  147. </html>

轮播图

JavaScript 练习的更多相关文章

  1. JavaScript之父Brendan Eich，Clojure 创建者Rich Hickey，Python创建者Van Rossum等编程大牛对程序员的职业建议

    软件开发是现时很火的职业.据美国劳动局发布的一项统计数据显示,从2014年至2024年,美国就业市场对开发人员的需求量将增长17%,而这个增长率比起所有职业的平均需求量高出了7%.很多人年轻人会选择编 ...

  2. javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈

    Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...

  3. Javascript 的执行环境(execution context)和作用域(scope)及垃圾回收

    执行环境有全局执行环境和函数执行环境之分,每次进入一个新执行环境,都会创建一个搜索变量和函数的作用域链.函数的局部环境不仅有权访问函数作用于中的变量,而且可以访问其外部环境,直到全局环境.全局执行环境 ...

  4. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  5. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  6. 《Web 前端面试指南》1、JavaScript 闭包深入浅出

    闭包是什么? 闭包是内部函数可以访问外部函数的变量.它可以访问三个作用域:首先可以访问自己的作用域(也就是定义在大括号内的变量),它也能访问外部函数的变量,和它能访问全局变量. 内部函数不仅可以访问外 ...

  7. JavaScript权威指南 - 函数

    函数本身就是一段JavaScript代码,定义一次但可能被调用任意次.如果函数挂载在一个对象上,作为对象的一个属性,通常这种函数被称作对象的方法.用于初始化一个新创建的对象的函数被称作构造函数. 相对 ...

  8. JavaScript自定义浏览器滚动条兼容IE、 火狐和chrome

    今天为大家分享一下我自己制作的浏览器滚动条,我们知道用css来自定义滚动条也是挺好的方式,css虽然能够改变chrome浏览器的滚动条样式可以自定义,css也能够改变IE浏览器滚动条的颜色.但是css ...

  9. JavaScript进阶之路（一）初学者的开始

    一:写在前面的问题和话 一个javascript初学者的进阶之路! 背景:3年后端(ASP.NET)工作经验,javascript水平一般般,前端水平一般般.学习资料:犀牛书. 如有误导,或者错误的地 ...

  10. 梅须逊雪三分白，雪却输梅一段香——CSS动画与JavaScript动画

    CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...

随机推荐

  1. lambda一些查询语句

    <!--得分数据结构-->1 <Score> <studentid>1</studentid> <courseid>1</course ...

  2. Debian系列Linux的隐藏WiFi

    Debian系列Linux共用相同的deb安装包,拥有大量的各种软件,是Linux里面最主要的生态系.包括Ubuntu及其衍生版本如Lubuntu/Mate/Kubuntu等,在ARM上也有很好的支持 ...

  3. c#字符串代码，动态创建编译器

    https://www.cnblogs.com/mrma/p/3998679.html 试了,确实可行,在unity也能用 值得注意的是UnityScript.Scripting.Evaluator ...

  4. 手把手教你SOAP访问webservice并DOM解析返回的XML数据（转）

    http://blog.csdn.net/u012534831/article/details/51357111 前言: 目前我们项目组还在采用webservice这种http方式,并且某些网站服务提 ...

  5. MySQL数据库的连接池问题

    3. sqlalchemy设置连接池数量上限设置 SQLALCHEMY_POOL_SIZE = 100 SQLALCHEMY_MAX_OVERFLOW = 0 # 超出连接池数量的连接后,最多可以连接 ...

  6. linux 文件属性文件权限

    权限 -rw-------. root root Mar : anaconda-ks.cfg drwxr-xr-x root root May : dir1 drwxr-xr-x root root ...

  7. 转 appium grid分布式环境搭建

    https://blog.csdn.net/ljl6158999/article/details/80803239 说起grid,了解selenium的人肯定知道,他就是分布式的核心.原理是简历中心h ...

  8. [19/10/16-星期四] Python中的文件操作

    一.打开文件 # open(file, mode='r', buffering=-1, encoding_=None, errors=None, newline=None, closefd=True, ...

  9. adb,aapt等命令使用

    adb         install/uninstall:安装/卸载手机中的应用.         devices:查看当前连接到电脑中的设备. adb shell         首先运行adb ...

  10. uboot环境变量

    一. uboot运行时环境变量分布 1.1. 环境变量有2份,一份在Flash中,另一份在DDR中.uboot开机时一次性从Flash中读取全部环境变量到DDR中作为环境变量的初始化值,然后使用过程中 ...