bom案例

已于 2022-12-25 17:26:46 修改
阅读量134 收藏
点赞数
分类专栏： js基础 文章标签： JavaScript DOM操作 事件监听 交互效果 网页动态
于 2022-12-24 08:54:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51510783/article/details/128425811
版权

前言

有关bom的小案例

百度换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img{
            width: 300px;

        }
        div{
            margin: 200px;
        }
        
    </style>
</head>
<body>
    <div>
        <img src="1.jpg" alt="">
        <img src="2.jpg" alt="">
        <img src="12.jpg" alt="">
    </div>
    <script>
        var img=document.querySelectorAll('img')
        console.log(img[0].src);
        for(var i=0;i<img.length;i++){
            img[i].onclick=function(){
                var body=document.body;
                //后面就是要加的所有内容
                body.style.backgroundImage='url('+this.src+')'
            }
        }
    </script>
</body>
</html>

表格变色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        table {
            width: 800px;
            margin: 100px auto;
            text-align: center;
            border-collapse: collapse;
            font-size: 14px;
        }
        
        thead tr {
            height: 30px;
            background-color: skyblue;
        }
        
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }

    
    </style>
</head>
<body>
    <table>
        <thead>
            <th>代码</th>
            <th>名称</th>
            <th>净值</th>
            <th>增幅</th>
            <th>增长率</th>
        </thead>
        <tbody>
            <tr>
                <td>0326</td>
                <td>A股</td>
                <td>1.075</td>
                <td>1.074</td>
                <td>85%</td>
            </tr>
            <tr>
                <td>0326</td>
                <td>A股</td>
                <td>1.075</td>
                <td>1.074</td>
                <td>85%</td>
            </tr>
            <tr>
                <td>0326</td>
                <td>A股</td>
                <td>1.075</td>
                <td>1.074</td>
                <td>85%</td>
            </tr>
            <tr>
                <td>0326</td>
                <td>A股</td>
                <td>1.075</td>
                <td>1.074</td>
                <td>85%</td>
            </tr>
        </tbody>
    </table>
    <script>
        var tr=document.querySelector('tbody').querySelectorAll('tr');
        console.log(tr);
        for(var i=0;i<tr.length;i++){
            tr[i].onmouseover=function(){
                this.style.backgroundColor='pink'          
            }
            tr[i].onmouseleave=function(){
                this.style.backgroundColor=''
            }
        }
    </script>
</body>
</html>

表格全选

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        * {
            padding: 0;
            margin: 0;
        }
        
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }
        
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 300px;
        }
        
        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
        
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }
        
        td {
            font: 14px "微软雅黑";
        }
        
        tbody tr {
            background-color: #f0f0f0;
        }
        
        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }
    
    </style>
</head>
<body>
    <div class="wrap">
        <table>
            <thead>
                <tr>
                    <th>
                        <input type="checkbox" id="j_cbAll" />
                    </th>
                    <th>商品</th>
                    <th>价钱</th>
                </tr>
            </thead>
            <tbody id="j_tb">
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPhone8</td>
                    <td>8000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Pro</td>
                    <td>5000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>iPad Air</td>
                    <td>2000</td>
                </tr>
                <tr>
                    <td>
                        <input type="checkbox" />
                    </td>
                    <td>Apple Watch</td>
                    <td>2000</td>
                </tr>

            </tbody>
        </table>
    </div>
    <script>
        var thin=document.getElementsByTagName('thead')[0].getElementsByTagName('input')
        var trin=document.getElementsByTagName('tbody')[0].getElementsByTagName('input')
        //用上面的按钮影响下面的按钮.上面按钮索引为0，下面按钮从1开始
        thin[0].onclick=function(){
            console.log(this.checked);
            for(var i=0;i<trin.length;i++){
                trin[i].checked=this.checked;
                
            }
        }
        2.下面复选框需要全部选中，上面全选才能选中做法:给下面所有复选框绑定点击事件，每次点击，都要判断是否全部选中)
        for(i=0;i<trin.length;i++){
            trin[i].onclick=function(){
                var flag=true;
                //检查是否全部选中
                for(var i=0;i<trin.length;i++){
                    if(!trin[i].checked){                      
                        flag=false;
                        break;
                    }
                }
                thin[0].checked=flag
            }
        }
        
    </script>
</body>
</html>

动态添加表格数据

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            width: 500px;
            margin: 100px auto;
            border-collapse: collapse;
            text-align: center;
        }
        td,th{
            border: 1px solid #333;
        }
        thead tr{
            height: 40px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <table cellspacing="0">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <script>
        //准备数据
            var date=[{
            name:'卫英络',
            subject:'javascript',
            score:100
            },{
                name:'弘历',
                subject:'javascript',
                score:100
            },{
                name:'富恒',
                subject:'javascript',
                score:100
            },{
                name:'明宇',
                subject:'javascript',
                score:100
            }]
        //往body里先加行再加列
        var tbody=document.querySelector('tbody');
        for(var i=0;i<date.length;i++){//管行
            //创建好多行
            var tr=document.createElement('tr');
            //添加
            tbody.appendChild(tr);
            //创建列,遍历对象的属性值
            for(k in date[i]){
                var td=document.createElement('td');        
                //先赋值再添加
                td.innerHTML=date[i][k];
                tr.appendChild(td);
            }
            var td1=document.createElement('td');
            tr.appendChild(td1);
            td1.innerHTML='<a href="javascript:;">删除</a>'
        }
        //添加事件 链接
        var as=document.querySelectorAll('a')
        for(var i=0;i<as.length;i++){
           as[i].onclick=function(){
             tbody.removeChild(this.parentNode.parentNode)
           }
        }

    </script>
</body>
</html>

留言板

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .yan{
            width: 300px;
            height: 100px;
        }
        li{
            width: 300px;
            background-color: rgb(231, 185, 17);
        }
        li a{
            float: right;
        }
    </style>
</head>
<body>
    <input type="text" class="yan">
    <button>提交</button>
    <ul>

    </ul>
    <script>
        var message=document.querySelector('input');
        var bnt=document.querySelector('button')
        var ul=document.querySelector('ul')
        bnt.onclick=function(){
            console.log(message.value);
            //添加
            var li=document.createElement('li')
            li.innerHTML=message.value+'<a href="javascript:;">删除</a>'
            //插入
            ul.insertBefore(li,ul.children[0]);
            var li=document.querySelector('li');
            //删除
            //获取a;删除a对应的li
            var as=document.querySelectorAll('a');
            for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    //删除this.parentNode
                    ul.removeChild(this.parentNode)
                }
            }
        }
    </script>
</body>
</html>

密码明文

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1{
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        .box1 input{
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        .box1 img{
            position: absolute;
            top: 2px;
            right: 2px;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="box1">
        <lable for="">
            <img src="close.png" alt="">
        </lable>
        <input type="password" name="pwd" id="pwd">
    </div>
    <script>
        var pwd=document.querySelector('input');
        var img=document.querySelector('img');
        var flag=0;//可以多次点击
        img.onclick=function(){
            if(flag==0){
                pwd.type='text';
                img.src='open.png';
                flag=1;
            }else{
                pwd.type='password';
                img.src='close.png';
                flag=0
            }
        }

    </script>
</body>
</html>

新浪下拉菜单

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        var ul=document.querySelector('.nav')
        var lis=ul.children;//四个li
        // console.log(lis);
        for(var i=0;i<lis.length;i++){
            // console.log(lis[i]);
            lis[i].onmouseover=function(){
                this.children[1].style.display='block'
            }
            lis[i].onmouseleave=function(){
                this.children[1].style.display='none'
            }
        }
    </script>
</body>
</html>
寻_欢
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
bom小案例
weixin_43454064的博客
10-20 1065
BOM中的小案例 1.运用定时器写图片摇起来 &lt;style&gt; #im{ position:absolute; } &lt;/style&gt; &lt;input type="button" value="摇起来" id="btn"&gt; &lt;input type="button" value="停止&qu
bom例子
05-26
bom例子
BOM操作实例
weixin_30547797的博客
08-28 463
BOM操作实例构思 　　1. 首先，设置一个可输入的文本框，输入内容通过按钮获取到；在通过另一个按钮给文本框赋值让内容在文本框显示出来。 　　2.首先，设置一个div，里面有内容，通过按钮获取到内容，也可以修改赋值内容。 HTML ： 1 <input type="text" id="user"> 2 <button onClick="huoqu()...
BOM按节点排序应用实例
一个世界一个家,我爱中国!
04-23 4303
----------------------------------------------------------------------------  Author : htl258(Tony)--  Date   : 2010-04-23 02:37:28--  Version:Microsoft SQL Server 2008 (RTM) - 10.0.1600.22 (Int
bom表结构，例子(有五金厂，文具厂，电子厂)
05-22
完全的BOM结构，包含多层得BOM，并且有许多现成例子，有五金厂，电子厂，家具厂，玩具厂，电脑厂等物料BOM示范例子，告知你怎么建立BOM，完全可以对您现成得ERP，或SAP有帮助。
生产物料bom
01-30
生产物料bom计算模版，excel，数据透视表
JS浏览器BOM常见操作实例详解
10-15
JavaScript Browser Object Model (BOM) 是一种允许开发者与浏览器交互的机制，主要涉及窗口、屏幕、历史记录和导航等方面。本文将深入解析JS浏览器BOM的一些常见操作，并提供实例来帮助理解。 首先，我们来看一下...
JavaScript BOM操作 计时器趣味案例 示例代码
最新发布
07-01
JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味案例 示例代码JavaScript BOM操作 计时器趣味...
BOM解释.docx
05-11
对制造行业中常用的BOM结构进行一个归纳解释。备注中说明部分来自于百度百科。在此仅作参考，不作为实际案例分享。为了方便各位小朋友对各业务层次之间的BOM结构进行对别。
BOM(包含案例）
qq_56303170的博客
08-21 1217
BOM BOM概述 BOM即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window BOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性 BOM的构成 window对象是浏览器的顶级对象，它具有双重角色 它是js访问浏览器窗口的一个接口 它是一个全局对象。定义在全局作用域的变量、函数都会变为window对象的属性和方法 在调用的时候可以省略window，前面学习的对话框都属于window对象方法，如alert()、prompt()等 注意：window下的一
bom表详解自行车生产为例介绍bom表的组成，结合erp的说明
08-16
以自行车生产为例介绍bom表的组成，结合erp的说明
DELPHI设计的有关BOM的例子
08-12
1、第一次使用请填写相关参数，并点上面保存配置按钮 2、导入档标准格式是TEST.XLS里的IN栏为准 3、导入及分析后数据都在BOM.mdb里，该文件不可以删除。 4、INI文件里RMB1~RMB5为显示成本，如有些不需要显示成本可把它删除。需要再自己加进去=1
BOM知识点全面总结（附实例、图解）
weixin_45135068的博客
08-04 3781
目录 BOM概述 window对象的常见事件 2.1 窗口加载事件 2.2 调整窗口大小事件 定时器 3.1 两种定时器 3.2 setTimeout()定时器 3.3 停止setTimeout()定时器 3.4 setInerval()定时器 3.5 停止setInerval(0定时器 3.6 this js执行机制 4.1 js执行机制 4.2 同步跟异步 4.3 js执行机制 location对象 5.1 什么是location对象 5.2 URL 5.3 location对象的属性 5.4 loc
javascript 关于Bom的小实例
can_Sunshine的博客
09-25 374
textarea{             width: 400px;             height: 600px;             border:1px solid deeppink;             outline: none;         }         #ul{             background: #f5f5f5;        
bom操作
周亮
04-18 1683
1. Form对象：    如何找到：document.forms[序号|name]    如何找到数据采集的元素：         document.forms[序号|name].elements[序号|name]        让元素获得或失去焦点：elem.focus()                         elem.blur()    获得/失去焦点的事件
SAP中BOM事务清单CS13中的物料数量单位逻辑梳理及格式调整处理实例
专注SAP应用技术文章写作，致力于拉近用户与系统间的距离；
07-01 4994
CO同事提出使用事务CS13输出BOM清单时，存在结果中单位数量与CS03中不符的情况。经分析，这样的问题通常清单中单位数量的字段输出不全，导致没有建立不同单位数量的对应关系，造成误解的原因。于是，通过CS13/CS11/CS03这些事务，结合物料单位数量相关设置。仔细梳理了业务逻辑。调整CS13中的格式如下图所示： 说明，图中成品物料W40002-100与原材料A17096-110中间还有一层半成品。 Component quantity代表对应BOM中组件消耗数量的设定值。即0.04G（暂时的结
BOM——操作小案例
云中自有锦书
07-20 559
1.简单动画封装(使用回调函数) 补充：定时器知识点，打印顺序：1 3 2 console.log(1); setInterval(function(){ console.log(2); },0); console.log(3); <!DOCTYPE html> <html lang="zh-CN"> <head> <met...
BOM定时器案例
youguang_的博客
12-04 401
运用BOM定时器的两个对象方法： （一）window. setInterval（函数，时间）；   // 页面加载完毕后，过了指定的时间，执行一次函数代码，再过指定时间再执行；依次反复；            window.clearInterval (要清理的定时器id值)； 1. 要实现效果：点击按钮“摇一摇”，图片不规则距离动；点击按钮“停止”，图片不动。 &lt;!DOCTYPE...
BOM常用方法案例
qq_46538844的博客
09-04 60
【代码】BOM常用方法案例。
BOM与SAP实施：理解与应用
案例分析可能涉及不同行业的实例，比如家具制造业中的方桌制作，从桌面、桌腿到螺钉、胶水等所有组件的组合，都需要在BOM中详细列出，并结合生产工艺来定义层次结构。通过这样的BOM，企业能够精确计算每个组件的需求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值