HTML之JS学习

提示篇

function fun(){
    var is = confirm('选择对话框');/*确定取消对话框*/
    if(is == true){
        document.write('真');/*网页输出字符*/
    }else{
        document.write('假');
    }
    
    var name = prompt('请输入内容',"占位符");
    document.write(name);
}
/*
alert  confirm  prompt
*/

原型

    <script>
        //原型：类似于iOS里面的类目
        function Person() {//定义类
            this.Age = 10;
        }
        var p1 = new Person();
        //访问原型
        p1.__proto__.Title = '123';//为原型注释数据成员
        Person.prototype.Name = '刘冠';

        var p2 = new Person()
        alert(p2.Age+'
'+p2.Title+'
'+p2.Name)

    </script>

跑马灯测试

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <style>
        #id {
            position:absolute;
            border:1px solid red;
            background-color:blue;
            color:white;
            width:100px;
        }
    </style>
    <script>
        var left = 0;
        var direction = 1;
        function run() {
            left += 10*direction;
            if (left + 100 >= window.innerWidth) {
                direction = -1;
            }
            if (left <= 0) {
                direction = 1;
            }
            var temp = document.getElementById('id');
            temp.style.left = left + 'px';
        }
        

        onload = function () {
            setInterval(run, 100);
        }
    </script>
</head>
<body>
    <div id="id">跑马灯</div>
</body>
</html>

动态标签（与XML类似）

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script>
        onload = function () {
            document.getElementById('butImage').onclick = function () {
                var img = document.createElement('img');
                img.src = 'IMG_0457.JPG';
                document.getElementById('divContainer').appendChild(img);
            }
            document.getElementById('butSrc').onclick = function () {
                var a = document.createElement('a');
                a.href = 'http://www.baidu.com';
                a.innerText = '百度';
                document.getElementById('divContainer').appendChild(a);
            }
            document.getElementById('clear').onclick = function () {
                var nodes = document.getElementById('divContainer').childNodes;
                for (var i = nodes.length-1; i > 0; i--) {
                    document.getElementById('divContainer').removeChild(nodes[i]);
                }
            }
        }
    </script>
</head>
<body>
    <input type="button" id="butImage" value="图片" />
    <input type="button" id="butText" value="文本框" />
    <input type="button" id="butSrc" value="超链接" />
    <input type="button" id="clear" value="删除" />
    <div id="divContainer">

    </div>
</body>
</html>

模仿五星好评

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <meta charset="utf-8" />
    <script>
        onload = function () {
            var number = -1;
            var images = document.getElementsByTagName('img');
            for (var i = 0; i < images.length; i++) {
                //光标放上去
                images[i].onmouseover = function () {
                    //将之前的图片变黄，之后的图片变灰
                    var id = this.id;
                    for (var i = 0; i < images.length; i++) {
                        if (i <= id) {
                            images[i].src = "images/star2.png";
                        }else{
                            images[i].src = "images/star1.png";
                        }
                    }
                }
                //光标移开
                images[i].onmouseout = function () {
                    for (var i = 0; i < images.length; i++) {
                        if (i <= number) {
                            images[i].src = "images/star2.png";
                        } else {
                            images[i].src = "images/star1.png";
                        }                       
                    }
                    number = -1;
                }
                //点击
                images[i].onmousedown = function () {
                    number = parseInt(this.id);
                    document.getElementById('text').innerText = this.id;
                }
            }
        }
    </script>
</head>
<body>
    <img id="0" src="images/star1.png" />
    <img id="1" src="images/star1.png" />
    <img id="2" src="images/star1.png" />
    <img id="3" src="images/star1.png" />
    <img id="4" src="images/star1.png" />
    <div id="text"></div>
</body>
</html>