js练习

简介:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
          //验证按钮是否为空
//        window.onload = function () {
//            var inputs = document.getElementsByTagName("input");
//            for (var i = 0; i < inputs.length; i++) {
//                if (inputs[i].type == "text") {
//                    inputs[i].onblur = function () {
//                        //失去焦点,this表示当前点击的对象
//                        if (this.value.length == 0) {
//                            this.style.backgroundColor = "red";
//                        }
//                        else {
//                            this.style.backgroundColor = "white";
//                        }
//                    };
//                    inputs[i].onfocus = function () {
//                        if (this.value.lenth == 0) {
//                            this.style.backgroundColor = "white";
//                        }
//                    };
//                }
//            }
//        }


        // 评分星星
//        window.onload = function () {
//            //1.给rating中的所有td注册事件
//            //2.给每一个td起索引(编号)
//            //3.变成实体星星
//            var tb = document.getElementById("rating");
//            var tds = tb.getElementsByTagName("td");
//            for (var i = 0; i < tds.length; i++) {
//                tds[i].style.cursor = "pointer";
//                tds[i].id = i;
//                //给每一个td注册事件
//                tds[i]. = function () {
//                    //获取当前触发事件的编号
//                    var index = this.id; //获取的依然是字符串,需要转化
//                    //当然和之前的td
//                    for (var i = 0; i <= parseInt(index); i++) {
//                        tds[i].innerText = "";
//                    }
//                    //之后的td
//                    for (var i = parseInt(index) + 1; i < tds.length; i++) {
//                        tds[i].innerText = "";
//                    }
//                };
//            }
//        }


        //选美女,选中的背景高亮显示
//        window.onload = function () {
//            var div = document.getElementById("mv");
//            var links = div.getElementsByTagName("a");


//            for (var i = 0; i < links.length; i++) {
//                links[i].onclick = function () {
//                    for (var i = 0; i < links.length; i++) {
//                        links[i].style.backgroundColor = "white";
//                    }
//                    this.style.backgroundColor = "red";
//                    return false; //不想让你跳转,只想让你高亮显示
//                }
//            }
//        }
        //隔行变色
//        window.onload = function () {
//            var tb = document.getElementById("tb");
//            var rows = tb.getElementsByTagName("td");
//            for (var i = 0; i < rows.length; i++) {
//                //奇偶行不同色
//                if (i % 2 == 0) {


//                    rows[i].style.backgroundColor = "red";
//                }
//                else {
//                    rows[i].style.backgroundColor = "green";
//                }


//                //光棒效果
//                var bgColor;
//                rows[i]. = function () {
//                    bgColor = this.style.backgroundColor;
//                    this.style.backgroundColor = "yello";
//                }
//                rows[i]. = function () {
//                    this.style.backgroundColor = bgColor;
//                }
//            }
//        }
    
         //图片浏览器
//        window.onload = function () {
//            var json = [{ "name": "美女1", "url": "网页作业/家乡美/1.png" },
//                        { "name": "美女2", "url": "网页作业/家乡美/2.png" },
//                        { "name": "美女3", "url": "网页作业/家乡美/3.png" },
//                        { "name": "美女4", "url": "网页作业/家乡美/4.png" }
//                        ];
//            var div = document.getElementById("imgs");
//            if (json.length > 0) {
//                var ul = document.createElement("ul");
//                div.appendChild(ul);
//                //生成li
//                for (var i = 0; i < json.length; i++) {
//                    var li = document.createElement("li");
//                    ul.appendChild(li);
//                    //动态创建a
//                    var link = document.createElement("<a href='" + json[i].url + "'></a>");
//                    link.innerHTML = json[i].name;


//                    link.onclick = function () {
//                        var href = this.href;
//                        img.scr = href;
//                        //取消后续内容的执行
//                        return false;
//                    }
//                    li.appendChild(link);
//                }


//                //动态生成Image标签
//                var img = document.createElement("img");
//                div.appendChild(img);
//            }
//        }


        // 点击按钮 设置透明度
        
        window.onload = function () {
            document.getElementById("d1").style.filter = "alpha(opacity=100)";


        }
        var num = 100;
        function f1() {
            if (num > 0) {
                num = num - 10;
                document.getElementById("d1").style.filter = "alpha(opacity=" + num + ")";
            }
            else {
                alert("不能点了");
                
            }
        }


    </script>
    <style type="text/css">
        
        div
        {
            width:200px;
            height:200px;
            background-color:Red;
            filter:alpha(opacity=100);
        }
    </style>
    
</head>
<body>
    <!--验证按钮是否为空
    <input type="text"/><br />
    <input type="text"/><br />
    <input type="text"/><br />
    <input type="text"/><br />
    <input type="text"/><br />-->
    <!--评分星星
    <table id="rating">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>-->
    <!--选美女,选中的话高亮显示
    <div id="mv">
        <a href="">西施</a>
        <a href="">贵妃</a>
        <a href="">貂蝉</a>
        <a href="">昭君</a>
    </div>-->
    
    <!--隔行变色,高亮显示
    <table id="tb" border="1">
        <tr>
            <td>
            1111111111111111
            </td>
        </tr>
        <tr>
            <td>
            2222222222222222
            </td>
        </tr>
        <tr>
            <td>
            3333333333333333
            </td>
        </tr>
        <tr>
            <td>
            4444444444444444
            </td>
        </tr>
    </table>-->
    
    <!--图片浏览器
    <div id="imgs">
        
    </div>-->
    <!--点击按钮 设置透明度-->
    <div id="d1">
    </div>
    <input type="button" value="click" onclick="f1()"/>
</body>

</html>



















本文转自蓬莱仙羽51CTO博客,原文链接:http://blog.51cto.com/dingxiaowei/1366608,如需转载请自行联系原作者


相关文章
|
4月前
|
存储 JavaScript 前端开发
JS项目练习
JS项目练习
|
3月前
|
JavaScript 前端开发
记录Javascript数组类练习
记录Javascript数组类练习
18 1
|
3月前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
20 1
|
3月前
|
前端开发 JavaScript 搜索推荐
[初学者必看]JavaScript 15题简单小例子练习,锻炼代码逻辑思维
【6月更文挑战第3天】这是一个JavaScript编程练习集,包含15个题目及答案:计算两数之和、判断偶数、找数组最大值、字符串反转、回文检测、斐波那契数列、数组去重、冒泡排序、阶乘计算、数组元素检查、数组求和、字符计数、数组最值和质数判断以及数组扁平化。每个题目都有相应的代码实现示例。
98 1
|
3月前
|
存储 前端开发 JavaScript
[初学者必看]JavaScript 简单实际案例练习,锻炼代码逻辑思维
【6月更文挑战第2天】这是一个前端小项目合集,包括图片轮播器、动态列表、模态框、表单验证等14个项目,旨在帮助初学者提升编码技能和实战经验。每个项目提供关键提示,如使用HTML、CSS和JavaScript实现不同功能,如事件监听、动画效果和数据处理。通过这些项目,学习者可以锻炼前端基础并增强实际操作能力。
49 2
|
3月前
|
前端开发 JavaScript 容器
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
技术经验解读:个人练习:使用HTML+CSS3制作图片轮播功能(不使用JavaScript)
47 0
|
3月前
|
JavaScript 前端开发
记录JavaScript练习
记录JavaScript练习
14 0
|
4月前
|
JavaScript 前端开发 C语言
JavaScript编程语法练习
本篇文章是对于javaScript中if ,switch,while ,do-while,,for语法的作业练习.对于我来说也是对自己知识掌握的一种检验.是对js的基础语法进行的一次练习,通过有趣的示例进行练习,使得对于代码能够增加印象,对于知识的掌握更加透彻.
|
4月前
|
存储 JavaScript
JS中相等(==)和等全(===)的区别与练习
JS中相等(==)和等全(===)的区别与练习
31 1
|
4月前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
48 0