zoukankan html css js c++ java

小练习

<style>
#div1 { width:240px; height:200px; border:1px solid #333; background:#f1f1f1; padding:10px; }
</style>
<script>
window.onload = function (){
    var oDiv = document.getElementById('div1');
    var oStrong = document.getElementById('strong1');
    var oText = document.getElementById('text1');
    var oBtn = document.getElementById('btn1');
    
    oBtn.onclick = function (){
        // 原来的内容，你得给我留着，然后再加上新内容
        // a = a + b
        // a += b
        
        // 添加：+=
        // oDiv.innerHTML = oDiv.innerHTML + oText.value + '<br />';
        oDiv.innerHTML += oStrong.innerHTML + oText.value + '<br />';
        oText.value = '';
    };
};
</script>
</head>

<body>

<div id="div1"></div>
<strong id="strong1">张三：</strong>
<input id="text1" type="text" />
<input id="btn1" type="button" value="提交" />

</body>

改变字体大小：

<script>
window.onload = function (){
    var oBtn1 = document.getElementById('btn1');
    var oBtn2 = document.getElementById('btn2');
    var oP = document.getElementById('p1');
    var num = 14;
    
    oBtn1.onclick = function (){
        num -= 2;
        oP.style.fontSize = num + 'px';
        // JS 不允许出现"-"
        // padding-top        paddingTop
        // margin-left        marginLeft
    };
    oBtn2.onclick = function (){
        // num = num + 2;
        num += 2;
        
        oP.style.fontSize = num + 'px';
        // JS 不允许出现“-“
    };
};
</script>
</head>
<body>
<input id="btn1" type="button" value="-" />
<input id="btn2" type="button" value="+" />
<p id="p1" style="font-size:16px;">10月28日晚，中央纪委监察部官网发布消息，贵州省委常委、遵义市委书记廖少华因涉嫌严重违纪违法接受组织调查。3天后中组部宣布对其免职。廖成为十八大后中纪委一连串"打虎"行动中第十一位落马的副省部级以上高官。</p>
</body>
</html>

图片切换：

</head>
<body>
<img id="img1" src="img/2.jpg" width="200" />
<script>
var oImg = document.getElementById('img1');
var onOff = true;        // 布尔值：true 1  false 0
oImg.onclick = function (){
    // if( oImg.src == 'img/2.jpg' ){
    // 有条件，就用现成的，如果没有，创造条件也得做事
        
    if( onOff ){
        oImg.src = 'img/4.jpg';
        onOff = false;
    } else {
        oImg.src = 'img/2.jpg';
        onOff = true;
    }
};
</script>

</body>

<style>
p { margin:0; }
body { text-align:center; }
#box { width:400px; height:400px; border:10px solid #ccc; margin:50px auto 0; position:relative; }
a { width:40px; height:40px; background:#fff; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:160px; font-size:18px; color:#000; text-align:center; line-height:40px; text-decoration:none; }
a:hover { filter:alpha(opacity:30); opacity:0.3; }
#prev { left:10px; }
#next { right:10px; }
#p1 { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; bottom:0; left:0; }
strong { width:400px; height:30px; line-height:30px; text-align:center; background:#000; color:#fff; font-size:14px; filter:alpha(opacity:80); opacity:0.8; position:absolute; top:0; left:0; }
#img1 { width:400px; height:400px; }
span { position:absolute; width:400px; height:30px; line-height:30px; text-align:center; top:-50px; left:0; font-family:'微软雅黑'; }
</style>
<script>
window.onload = function (){
    var oPrev = document.getElementById('prev');
    var oNext = document.getElementById('next');
    var oP = document.getElementById('p1');
    var oStrong = document.getElementById('strong1');
    var oImg = document.getElementById('img1');    
    var aBtn = document.getElementsByTagName('input');
    
    var arrUrl = [ 'img/1.jpg', 'img/2.jpg', 'img/3.jpg', 'img/4.jpg' ];
    var arrText = [ '文字一', '文字二', '文字三', '识文断字' ];
    var num = 0;
    var onOff = true;
    
    aBtn[0].onclick = function (){ onOff = true; document.getElementsByTagName('span')[0].innerHTML = '图片可从最后一张跳转到第一张循环切换'; };
    aBtn[1].onclick = function (){ onOff = false; document.getElementsByTagName('span')[0].innerHTML = '图片只能到最后一张或只能到第一张切换'; };
    
    // 初始化
    function fnTab(){
        oP.innerHTML = arrText[num];
        oStrong.innerHTML = num+1 + ' / ' + arrText.length;
        oImg.src = arrUrl[num];
    }
    fnTab();
    
    oPrev.onclick = function (){
        num --;
        if( num == -1 ){
            if(onOff){num = arrText.length-1;}else{
                alert('这已经是第一张了，不能再往前了~~');
                num = 0;
            }
            //num = arrText.length-1;
        }
        fnTab();
    };
    oNext.onclick = function (){
        num ++;
        if( num == arrText.length ){
            if(onOff){num = 0;}else{
                alert('已经到最后一张啦~');
                num = arrText.length-1;
            }
        }
        fnTab();
    };
    
};
</script>
</head>

<body>

<input type="button" value="循环切换" />
<input type="button" value="顺序切换" />


<div id="box">
    <span>图片可从最后一张跳转到第一张循环切换</span>
    <a id="prev" href="javascript:;"><</a>
    <a id="next" href="javascript:;">></a>
  <p id="p1">图片文字加载中……</p>
  <strong id="strong1">图片数量计算中……</strong>
    <img id="img1" />
</div>

</body>

查看全文

相关阅读:
[算法] 归并排序（自顶向下、自底向上）
[算法] 快速排序（单路、双路、三路）
[算法] O(nlogn)和O(n^2)算法性能比较
 [算法] O(n^2)算法的效率比较
 [设计模式] 设计模式课程（十九）--职责链模式
 [OS] 汇编语言
 [c++] 内存模型
 [c++] 内存与变量
 [Qt] 基本概念
 42. Trapping Rain Water

原文地址：https://www.cnblogs.com/LO-ME/p/3904412.html