搜索框

  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. lua正则表达式替换字符串

    local _t = {} _t.name = "Li" local str = string.gsub("hahah---[name]----[age]--xrz-&q ...

  2. ubuntu18.04 安装mongodb并使用Robo 3T连接Mongodb数据库

    1.前提: 系统:ubuntu18.04  64位 数据库:mongodb GUI:Robo 3T  2018.3.0 描述: mongodb 安装在局域网内的ubuntu的机子上面,  在win 下 ...

  3. xmake新增对Cuda代码编译支持

    最近研究了下NVIDIA Cuda Toolkit的编译环境,并且在xmake 2.1.10开发版中,新增了对cuda编译环境的支持,可以直接编译*.cu代码. 关于Cuda Toolkit相关说明以 ...

  4. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  5. 拦截器Interceptor和过滤器Filter的区别

    (1)过滤器(Filter):当你有一堆东西的时候,你只希望选择符合你要求的某一些东西.定义这些要求的工具,就是过滤器.(理解:就是一堆字母中取一个B) (2)拦截器(Interceptor):在一个 ...

  6. 部署第一个servlet应用到tomcat上

    部署第一个servlet应用到tomcat上 搭建环境 eclipse的EE版本 eclipse官网 创建一个java的应用程序 1.File->new java project 导入servl ...

  7. Luogu P5339 [TJOI2019]唱、跳、rap和篮球

    题目 设\(f_i\)表示从\((a-4i,b-4i,c-4i,d-4i)\)中选\(n-4i\)个排队的方案数. 那么我们可以容斥,答案为\(\sum\limits_{i=0}^{lim}(-1)^ ...

  8. linux的管道 |和grep命令以及一些其他命令（diff,echo,cat,date,time,wc,which,whereis,gzip,zcat,unzip,sort）

    linux提供管道符号“|”,作用是命令1的输出内容作为命令2的输入内容.通常与grep命令一起使用. 格式:命令1 |命令2 grep命令:全称为global regular expression ...

  9. 解决nodejs环境下端口号被占用的方法

    假设被占用的端口号是8081 1.进入cmd命令窗口 输入netstat -ano|findstr "8081" cmd窗口给我的信息尾部有一个和端口8081对应的PID值 '51 ...

  10. 在XCode中使用XCTest

    测试驱动开发并不是一个很新鲜的概念了.在我最开始学习程序编写时,最喜欢干的事情就是编写一段代码,然后运行观察结果是否正确.我所学习第一门语言是c语言,用的最多的是在算法设计上,那时候最常做的事情就是编 ...