【HTML笔记】_JS基础two

为了写页面硬着头皮上HTML，一切从0开始，但愿我能OK!

html5.jpg

【前言】
HTML是框架，CSS是样式，JS是行为，JS越牛逼，工资越高！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS属性操作，if条件</title>
</head>
<body>
    <input type="text" value="" id="text1" style="width: 250px">
    <input type="button" value="弹出" id="but1">
    <br>
    <img src="" alt="" id="img1" width="400px" height="300px">
</body>
<script>
    var oText=document.getElementById('text1');
    var oBut=document.getElementById('but1');
    var oImg=document.getElementById('img1');
    var num=1;
    oBut.onclick=function(){
        // alert(oText.value);
        // oImg.src=oText.value;
        if (num>2)
        {
            alert('没图片了！');
        }
        else
        {
            oImg.src='image/'+num+'.jpg';
            oText.value=oImg.src;
            num=num+1;          
        }
    }
</script>
</html>

单击图片切换

最后判断提示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS中的innerHTML</title>
    <!-- innerHTML用于获取指定关键字的所有html数据 -->
</head>
<body>
    <div id="div1">
        <span>这是一个innerHTML</span>
    </div>
    <input type="button" id="but1" value="点击">
</body>
<script>
    var oDiv1=document.getElementById('div1')
    var oBut1=document.getElementById('but1')
    oBut1.onclick=function(){
        alert(oDiv1.innerHTML)
        oDiv1.innerHTML='TEST';
    }
</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html中添加class属性及其值</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
            border: 1px solid yellow;
            float: left;
            margin-left: 100px;
            text-align: center;
            font: 30px/100px "simhei";
            color: #fff;
            transition: 0.3s;
        }
        .a{
            border: 4px solid #26FF08;
            background: #2e00ef;
            color: #ccc;
            border-radius: 50%;
        }
        .b{
            border: 4px solid #26FF08;
            background: #7B8113;
            color: #220077;
            border-radius: 50%;
        }
        .c{
            border: 4px solid #26FF08;
            background: url('image/1.jpg');
            color: #ccc;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="div1">第一个</div>
    <div id="div2">第二个</div>
    <div id="div3">第三个</div>
</body>
<script>
    var oDiv1=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    var oDiv3=document.getElementById('div3');
    oDiv1.onclick=function(){
        oDiv1.className='a';
    }   
    oDiv2.onclick=function(){
        oDiv2.className='b';
    }   
    oDiv3.onclick=function(){
        oDiv3.className='c';
    }
</script>
</html>

原始图片

逐个点击，赋予class属性及其值

【HTML笔记】_JS基础two

推荐阅读更多精彩内容