JavaScript前端原生DOM-案例


案例目录


1. 随机背景

查看代码



    
    
    
    Document
    



    


2. 用户注册倒计时

查看代码



    
    
    Document


    
    
//button开始隐藏

3. 轮播图

案例一

查看代码



    
    
    QQ音乐10屏轮播图
    


    
第1张图的描述信息

挑战云歌单,欢迎你来

案例二

查看代码





  
  
  QQ音乐轮播图
  



  
  • 第1张图的描述信息
  • 第2张图的描述信息
  • 第3张图的描述信息
  • 第4张图的描述信息
  • 第5张图的描述信息
  • 第6张图的描述信息
  • 第7张图的描述信息
  • 第8张图的描述信息
  • 第9张图的描述信息
  • 第9张图的描述信息

第1张图的描述信息

4. 关闭广告

查看代码



    
    
    Document
    



    
x

5. 随机抽取

查看代码



    
    
    Document
    



    

随机点名

名字是:
这里显示姓名

6. 小米搜索框

查看代码




    
    
    
    Document
    




    
    

7. 全选反选

查看代码



  
  
  



  
全选 商品 商家 价格
小米手机 小米 ¥1999
小米净水器 小米 ¥4999
小米电视 小米 ¥5999

8. 购物车加减操作

查看代码



  
  
  
  Document
  



  

9. tab栏

查看代码



  
  
  



  

  

10. 发布留言

查看代码




  
  
  
  微博发布
  



  

0 / 200

    11. 关闭多个广告

    查看代码
    
    
    
    
      
      
      Document
      
    
    
    
      

    12. 动态获取页面数据

    查看代码
    
    
    
        
        
        
        学车在线首页
        
    
    
    
    
        
        

    精品推荐

    查看全部

    13. 倒计时

    查看代码
    
    
    
      
      
      
      Document
      
    
    
    
      

    今天是19700101

    下班倒计时

    00 : 25 : 20

    现在是18:18:00

    14. 跟随鼠标

    查看代码
    
    
    
        
        
        
        Document
        
    
    
        
        
    
    

    15. 录入员工表格信息

    HTML和JavaScript

    查看代码
    
    
    
      
      
      
      Document
      
    
    
      

    新增学员

    姓名: 年龄: 性别: 薪资: 就业城市:

    就业榜

    学号 姓名 年龄 性别 薪资 就业城市 操作

    user.css

    查看代码
    
    * {
      margin: 0;
      padding: 0;
    }
    
    a {
      text-decoration: none;
      color:#721c24;
    }
    h1 {
      text-align: center;
      color:#333;
      margin: 20px 0;
     
    }
    table {
      margin:0 auto;
      width: 800px;
      border-collapse: collapse;
      color:#004085;
    }
    th {
      padding: 10px;
      background: #cfe5ff;
      
      font-size: 20px;
      font-weight: 400;
    }
    td,th {
      border:1px solid #b8daff;
    }
    td {
      padding:10px;
      color:#666;
      text-align: center;
      font-size: 16px;
    }
    tbody tr {
      background: #fff;
    }
    tbody tr:hover {
      background: #e1ecf8;
    }
    .info {
      width: 900px;
      margin: 50px auto;
      text-align: center;
    }
    .info  input {
      width: 80px;
      height: 25px;
      outline: none;
      border-radius: 5px;
      border:1px solid #b8daff;
      padding-left: 5px;
    }
    .info button {
      width: 60px;
      height: 25px;
      background-color: #004085;
      outline: none;
      border: 0;
      color: #fff;
      cursor: pointer;
      border-radius: 5px;
    }
    .info .age {
      width: 50px;
    }

    16. 购物车

    查看代码
    
    
    
    
    
      
      
      
      购物车全选功能
      
      
      
      
    
    
    
      
    全选 商品 单价 商品数量 小计 操作

    牛奶

    5¥
    5¥ 删除

    牛奶

    10¥
    20¥ 删除

    牛奶

    20¥
    40¥ 删除

    牛奶

    35¥
    70¥ 删除
    删除所选商品 清理购物车 去结算

    已经选中0件商品;总价:0¥

    17. 页面下划出现固定头部

    查看代码
    
    
    
    
    
        
        
        
        Document
        
    
    
    
        
    我是顶部导航栏
    秒杀模块

    18. 返回顶部

    查看代码
    
    
    
        
        Title
    
    
    
        
    返回顶部
    头部区域
    主体区域

    19. 手风扇

    查看代码
    
    
    
    
    
      
      手风琴
      
    
    
    
      
    
    
    
    

    20. 过滤敏感词

    查看代码
    
    
    
    
    
        
        
        
        Document
    
    
    
        
        
        

    21. 验证用户名

    查看代码
    
    
    
    
    
        
        
        
        Document
        
    
    
    
        
        
        
    
    
    

    22. 拖动模态框

    查看代码
    
    
    
    
        
        Title
        
    
    
    
    
    
           
    
    
    

    23. 图片放大镜效果

    查看代码
    
    
    
    
        
        Title
        
    
        
        

    24. 缓动动画animate.js

    查看代码