【经典】javascript 前端开发实例

javascript jquery 交互式web前端开发|javaee是前端开发的吗|济南软件前端开发的

1.确认框
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>确认框</title>
</head>
<body>
    <a href=”http://www.baidu.com” onclick=”return confirm(‘你确定要去百度吗?’)”>去百度</a>
</body>
</html>

2.提示框
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>提示框</title>
</head>
<body>
    <script>
        name = prompt(‘请输入你名字:’);
        alert(name);
    </script>
</body>
</html>

3.随机切换
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>h5前端开发软件:随机切换字母a,b,c,d</title>
</head>
<body>
    <p id=”word”>点击我随机显示字母
        <span id=”texts”></span>
    </p>
    <script>
        function select() {
            arr = [‘a’, ‘b’, ‘c’, ‘d’];
            key = Math.floor(Math.random() * arr.length);
            console.log(key);
            val = arr[key];
            word = document.getElementById(“word”);
            texts = document.getElementById(“texts”);
            texts.innerText = val;
        }
        word.onclick = function () {
            select();
        }
    </script>
</body>
</html>

4.数组排序
html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>web前端开发javascript:数组排序</title>
</head>
<body>
    <script type=”text/javascript”>
        arr = [100, 500, 5, 10, 2, 1, 9];
        arr.sort(show);
        function show(i, j) {
            return i – j; //i-j从小到大排序,j-i从大到小排序
        }
        alert(arr);
    </script>
</body>
</html>

5.定时器
html 代码

<html>
<head>
    <meta charset=”UTF-8″>
    <title>前端开发还是javascript:定时器</title>
</head>
<body>
    <p>时间:
        <span id=”time”></span>
    </p>
    <button id=”stop”>stop</button>
    <button id=”start”>start</button>
    <script type=”text/javascript”>
        i = 0;
        function start() {
            timeobj = setInterval(function () {
                document.getElementById(“time”).innerHTML = ++i;
            }, 100)
        }
        start();
        function stop() {
            clearInterval(timeobj);
        }
        stopobj = document.getElementById(“stop”);
        stopobj.onclick = function () {
            stop();
        }
        startobj = document.getElementById(“start”);
        startobj.onclick = function () {
            stop();
            start();
        }
    </script>
</body>
</html>

阿里巴巴前端团队目前主要采用哪些javascript框架做应用开发|移动前端开发性能提升|web前端和前端与移动开发

» 本文来自:前端开发者 » 《【经典】javascript 前端开发实例》
» 本文链接地址:https://www.rokub.com/3936.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!