[移动开发] javascript基础

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> javascript基础 -> 正文阅读

[移动开发]javascript基础

HTML

<!--<!DOCTYPE html>-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/css04.css">
    <script type="text/javascript" src="js/js02update.js"></script>
</head>
<body>
    <div id="div_container">
        <div id="div_fruit_list">
            <table id="tbl_fruit">
                <tr>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>苹果</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>香蕉</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>菠萝</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>橘子</td>
                    <td>5</td>
                    <td>20</td>
                    <td>100</td>
                    <td><img src="img/删除.jpeg" class="delImg"/></td>
                </tr>
                <tr>
                    <td>总计</td>
                    <td colspan="4">5</td>
                </tr>
            </table>
            <hr/>
            <div id="add_fruit_div">
                <table>
                    <tr>
                        <td>名称： </td>
                        <td><input type="text" id='fname'/></td>
                    </tr>
                    <tr>
                        <td>单价： </td>
                        <td><input type="text" id='price'/></td>
                    </tr>
                    <tr>
                        <td>数量： </td>
                        <td><input type="text" id='fcount'/></td>
                    </tr>
                    <tr>
                        <th colspan="2"><input type="button" class="btn" value="添加"></th>
                    </tr>
                </table>
            </div>
        </div>
    </div>

</body>
</html>

CSS

*{
    color: threeddarkshadow;
}
body{
    margin: 0;
    padding: 0;
    background-color: #808080;
}
div{
    position: relative;
    float: left;
}
#div_container{
    width: 80%;
    height: 100%;
    border: 0px solid blue;
    margin-left: 10%;
    float: left;
    background-color: honeydew;
    border-radius: 8px;
}
#div_fruit_list{
    width: 100%;
    border: 0px solid red;
}
#tbl_fruit{
    width: 100%;
    line-height: 28px;
    margin-top: 120px;
}
#tbl_fruit, #tbl_fruit tr, #tbl_fruit th, #tbl_fruit td{
    border: 1px solid gray;
    border-collapse: collapse;
    text-align: center;
    font-size: 16px;
    font-family: "黑体";
    font-weight: lighter;


}
.w20{
    width: 20%;
}
.delImg{
    width: 24px;
    height: 24px;
}
.btn{
    border: 1px solid lightgrey;
}

javascript

window.onload=function (){
    updateZJ();
    //当页面加载完成，我们需要绑定各种事件
    //根据id获取到表格
    var fruitTbl = document.getElementById("tbl_fruit");
    //获取表格中的所有行
    var rows = fruitTbl.rows;
    for (var i = 0; i < rows.length; i++){
        var tr = rows[i];
        //1.绑定鼠标悬浮和离开时的背景颜色事件
        tr.onmouseover = showBGColor;
        tr.onmouseout = clearBGColor;
        //获取tr这一行所有单元格
        var cells = tr.cells;
        var priceTD = cells[1];
        //2.绑定鼠标悬浮在单价单元格变手势事件
        priceTD.onmouseover = showHand;
        //3.绑定鼠标点击单价单元格事件
        priceTD.onclick = editPrice;
        //4.绑定删除小图标的点击事件
        var img = cells[4].firstChild;
        if (img && img.tagName == "IMG") {
            //绑定单击事件
            img.onclick = delFruit;
        }
    }
}

//删除
function delFruit() {
    if (event && event.srcElement && event.srcElement.tagName=="IMG") {
        //alert表示弹出一个对话框，只有确定按钮
        //confirm表示弹出一个对话框，有确定和取消按钮。当点击确定，返回true，否则返回false
        if (window.confirm("是否确认删除当前库存记录")){
            var img = event.srcElement;
            var tr = img.parentElement.parentElement;
            var fruitTbl = document.getElementById("tbl_fruit");
            fruitTbl.deleteRow(tr.rowIndex);

            updateZJ();
        }
    }
}

//当鼠标点击单价单元格时进行价格编辑
function editPrice() {
    if (event && event.srcElement && event.srcElement.tagName=="TD") {
        var priceTD = event.srcElement;
        //目的是判断当前priceTD有子节点，而且第一个子节点是文本节点,TextNode对应的是3 ElementNode对应的是1
        if(priceTD.firstChild && priceTD.firstChild.nodeType==3){
            //innerText表示设置或者获取当前节点的内部文本
            var oldPrice = priceTD.innerText;
            //innerHTML表示设置当前节点的内部HTML
            priceTD.innerHTML="<input type='text' size='4'>"
            var input = priceTD.firstChild;
            if (input.tagName == "INPUT"){
                input.value = oldPrice;
                //选中输入框内部的文本
                input.select();
                //4.绑定输入框失去焦点事件，失去焦点，更新单价
                input.onblur=updataPrice;

                //在输入框上绑定键盘摁下的事件，此处我需要保证用户输入的是数字
                input.onkeydown = ckInput;
            }
        }
    }
}

//检验键盘摁下的值的方法
function ckInput() {
    var kc = event.keyCode;
    //0-9 : 48-57
    //backspace : 8
    //enter : 13
    if (!((kc>=48 && kc<=57) || kc==8 || kc==13)) {
        event.returnValue=false;
    }
    if (kc==13){    //回车键失去焦点
        event.srcElement.blur();
    }
}

//更新单价
function updataPrice() {
    if (event && event.srcElement && event.srcElement.tagName=="INPUT") {
        var input = event.srcElement;
        var newPrice = input.value;
        //input节点的父节点是td
        var priceTD = input.parentElement;
        priceTD.innerText = newPrice;

        //更新当前行小计这一格子的值
        //priceTD.parentElement td的父元素是tr
        updateXJ(priceTD.parentElement);
    }
}

//更新小计
function updateXJ(tr) {
    if (tr && tr.tagName=="TR"){
        var tds = tr.cells;
        var price = tds[1].innerText;
        var count = tds[2].innerText;
        //innerText获取到的值的类型是字符串类型，因此需要类型转换，才能进行数学运算
        var xj = parseInt(price) * parseInt(count)
        tds[3].innerText = xj;

        //更新总计
        updateZJ();
    }
}

//更新总计
function updateZJ() {
    var fruitTbl = document.getElementById("tbl_fruit");
    var rows = fruitTbl.rows;   //获取所有行
    var sum = 0;
    for (var i = 1; i < rows.length-1; i++){
        var tr = rows[i];
        var xj = parseInt(tr.cells[3].innerText);   //取第4列的内部文本
        sum = sum + xj;
    }
    rows[rows.length-1].cells[1].innerText = sum;   //给总计赋值
}

//当鼠标悬浮时，显示背景颜色
function showBGColor() {
    //event : 当前发生的事件
    //event.srcElement :事件源
    // alert(event.srcElement);
    // alert(event.srcElement.tagName);

    if (event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        //td.parentElement表示获取td的父元素->TR
        var tr = td.parentElement;
        //如果想要通过js代码设置某节点的样式，则需要加上 .style
        tr.style.backgroundColor = "navy";

        //tr.cells表示获取这个tr中的所有的单元格
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "white"
        }
    }
}

//当鼠标离开的时候，恢复原始样式
function clearBGColor() {
    if (event && event.srcElement && event.srcElement.tagName=="TD") {
        var td = event.srcElement;
        //td.parentElement表示获取td的父元素->TR
        var tr = td.parentElement;
        tr.style.backgroundColor="transparent";
        var tds = tr.cells;
        for (var i = 0; i < tds.length; i++) {
            tds[i].style.color = "threeddarkshadow"
        }
    }
}

//当鼠标悬浮在单价单元格时，显示手势
function showHand() {
    if (event && event.srcElement && event.srcElement.tagName == "TD") {
        var td = event.srcElement;
        //cursor:光标
        td.style.cursor = "hand";
    }
}