基本用法

作者: Noza_ea8f | 来源:发表于2020-09-16 10:16 被阅读0次

定时器
2019-11-16
11 - 动态数据绑定实现原理
as 基本用法
基本用法
基本用法
基本用法
基本用法
"?.","??","??=","!"基本用法
查找函数（Vlookup、Hlookup、Index、Match

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JsTest</title>
    <link rel="stylesheet" href="css.css">
    <script src="js.js">
    </script>
</head>
<body>
<div>
    这是一个Js测试页<br>
    <hr>
    <input type="button" value="test" onclick="btnClick(c=value)"><br><br>
    <input type="button" value="武军大傻子" onclick="btnClick(c=value)"><br><br>
    <div id="div-first">
        <input id="val1" type="text" value="" onclick="valClick('val1')" placeholder="请输入一个数字">+
        <input id="val2" type="text" value="" onclick="valClick('val2')" placeholder="请输入一个数字">
        <input id="equal" type="button" value="=" onclick="addCalculator()">
        <input id="result" type="text" value=''>
        <br><br>
        <input id="checkbox" type="checkbox" onmouseover="mouseOver()" onmouseout="mouseOut()">
        <input type="button" value="复选框是否选中了？" onclick="checkboxChecked()">
        <br>
        <text id="txt" style="display: none">我在复选框上</text>
    </div>
    <hr>
    <input type="button" value="显示隐藏" onclick="showHide()">
    <div id="div-show-hide">
        <span>选项一</span><br>
        <span>选项二</span><br>
        <span>选项三</span><br>
        <span>选项四</span><br>
    </div>
    <hr>
    <div>
        <input type="button" value="变绿" onclick="changeColor('green')">
        <input type="button" value="变黑" onclick="changeColor('black')">
        <input type="button" value="变黄" onclick="changeColor('yellow')">
        <div id="div-change-color"></div>
    </div>
    <hr>
    <div>
        <input type="button" value="变宽" onclick="changeDiv('width','150px')">
        <input type="button" value="变高" onclick="changeDiv('height','150px')">
        <input type="button" value="变绿" onclick="changeDiv('background','green')">
        <input type="button" value="重置" onclick="reloadPage()">
        <div id="div-change-div"></div>
    </div>
</div>

</body>
</html>

css

#div-show-hide {
    width: 100px;
    height: 100px;
    background: silver;
    display: none;
    text-align: center;
    color: white;
    padding-top:10px;
}
#div-change-color, #div-change-div{
    width: 100px;
    height: 100px;
    background: red;
    margin-top: 10px;
}

js

//函数传入一个值，然后通过alert返回一条包含传入值的信息
function btnClick(c) {
    alert('按钮' + c + '被点击了')
}

//定义一个点击事件，当输入数据被点击的时候先将原有值清空
function valClick(id) {
    //我发现可以直接使用调用页面的id名称进行操作，十分方便
    const oVal1 = document.getElementById(id);
    oVal1.value = ''
}

//一个加法器，参数是传入两个数值
function addCalculator() {
    const oVal1 = document.getElementById('val1');
    const oVal2 = document.getElementById('val2');
    const result = document.getElementById('result');
    //parseInt是强制类型转换，一看Int就知道是把数据转换成整型
    const result_ = parseInt(oVal1.value) + parseInt(oVal2.value);
    //这里需要注意，判断空值的写法 isNaN(result_)
    if (isNaN(result_)) {
        result.value = '您的输入有误！';
    } else {
        result.value = result_;
    }
    return result_;
}

function mouseOver() {
    const oTxt = document.getElementById('txt');
    oTxt.style.display = "block"
}

function mouseOut() {
    const oTxt = document.getElementById('txt');
    oTxt.style.display = "none"
}

function checkboxChecked() {
    if (document.getElementById('checkbox').checked) {
        alert('复选框被选中了！')
    } else {
        alert('没有选中')
    }
}

//显示隐藏
function showHide() {
    const oShowHide = document.getElementById('div-show-hide');
    if (oShowHide.style.display === 'block') {
        oShowHide.style.display = 'none';
    } else {
        oShowHide.style.display = 'block'
    }
}

//改变卡片颜色（通过传参的方式）
function changeColor(color) {
    const oDiv = document.getElementById('div-change-color');
    oDiv.style.background = color
}

function changeDiv(style_name, val) {
    const oDiv = document.getElementById('div-change-div');
    oDiv.style[style_name] = val
}

//刷新页面
function reloadPage() {
    location.reload();
}