实现下面的例子

    例子 - 图1

    1. <input id="input" type="checkbox">篮球
    2. <!-- 点击事件onclick
    3. input输入框有checked,true表示选中,false表示没有选中
    4. -->
    5. <script>
    6. var input=document.getElementById("input");
    7. input.checked=false;
    8. console.log(input.id)
    9. </script>
    1. <button id="all">全选</button>
    2. <button id="notall">不选</button>
    3. <button id="reverse">反选</button>
    4. <div>
    5. <input type="checkbox">足球
    6. <input type="checkbox">蓝球
    7. <input type="checkbox">乒乓球
    8. <input type="checkbox">羽毛球
    9. </div>
    10. <script>
    11. var all=document.getElementById("all");
    12. var inputs=document.getElementsByTagName("input");
    13. //1.对btn执行点击事件
    14. all.onclick=function(){
    15. //将所有的input的checked属性设置为true
    16. for(var i=0;i<inputs.length;i++){
    17. inputs[i].checked=true;
    18. }
    19. }
    20. var all=document.getElementById("notall");
    21. var inputs=document.getElementsByTagName("input");
    22. //1.对btn执行点击事件
    23. all.onclick=function(){
    24. //将所有的input的checked属性设置为false
    25. for(var i=0;i<inputs.length;i++){
    26. inputs[i].checked=false;
    27. }
    28. }
    29. var all=document.getElementById("reverse");
    30. all.onclick=function(){
    31. for(var i=0;i<inputs.length;i++){
    32. console.log(inputs[i].checked)
    33. inputs[i].checked=(inputs[i].checked)?false:true;
    34. }
    35. }
    36. </script>

    实现:
    点击button按钮,如果div是显示的则隐藏,如果隐藏则显示

    1. <div style="display: block;">
    2. div</div>
    3. <button id="btn">btn</button>
    4. <script>
    5. var div = document.getElementsByTagName("div")[0];
    6. var btn = document.getElementById("btn");
    7. btn.onclick = function () {
    8. var d = div.style.display;
    9. div.style.display = (d == "block") ? "none" : "block";
    10. }
    11. </script>

    练习:隔行变色
    image.png

    1. <ul>
    2. <li>1</li> <!--lis[0]-->
    3. <li>2</li><!--lis[1]-->
    4. <li>3</li><!--lis[2]-->
    5. <li>4</li><!--lis[3]-->
    6. <li>5</li><!--lis[4]-->
    7. </ul>
    8. <script>
    9. // i%2 0%2-->0 1%2-->1 2%2-->0 3%2-->1 4%2-->0
    10. var lis=document.getElementsByTagName("li");
    11. for(var i=0;i<lis.length;i++){
    12. if(i%2==0){
    13. lis[i].style.backgroundColor="pink";
    14. }
    15. else{
    16. lis[i].style.backgroundColor="blue";
    17. }
    18. }
    19. </script>

    练习:实现输入框设置输入字的数量

    1. <p>还可以输入<em id="em" style="color:red;">0</em>/150</p>
    2. <textarea id="txt" cols="30" rows="10"></textarea>
    3. <script>
    4. var txt = document.getElementById("txt");
    5. var em = document.getElementById("em");
    6. txt.onkeydown = function () {
    7. var length = this.value.length;
    8. if (em.innerHTML < 20) {
    9. em.innerHTML = this.value.length;
    10. }
    11. else {
    12. alert("不能再输入")
    13. }
    14. }
    15. </script>