初学JS

JS验证表单是否为空，若为空，显示弹窗，之后将焦点聚集在为空的表单上：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script language="JavaScript">
        function check() {
            if (loginForm.username.value == "") {
                alert("用户名不能为空！");
                loginForm.username.focus();
                return false;
            } else if (loginForm.password.value == "") {
                alert("密码不能为空！");
                loginForm.password.focus();
                return false;
            }
        }
    </script>
</head>
<body>
<form name="loginForm" method="post" action="">
    用户：<input type="text" name="username"/>
    密码：<input type="password" name="password"/>
    <input type="submit" name="submit" value="登录" onclick="return check();">
</form>
</body>
</html>

 JS制作二级导航菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script language="JavaScript">
        function Lmenu(value) {
            switch (value) {
                case '收藏':
                    submenu.innerHTML = "<a href='#'>宝贝收藏</a>|<a href='#'>店铺收藏</a>";
                    break;
                case '已购买的宝贝':
                    submenu.innerHTML = "<a href='#'>购买列表</a>|<a href='#'>购买详情</a>";
                    break;
                case '购物车':
                    submenu.innerHTML = "<a href='#'>清空购物车</a>|<a href='#'>填写订单信息</a>";
                    break;
                case '个人中心':
                    submenu.innerHTML = "<a href='#'>个人资料</a>|<a href='#'>我的好友</a>";
                    break;
            }
        }
    </script>
</head>
<body>
<div>
    <ul>
        <li><a href="#" onmouseover="Lmenu('收藏');">收藏</a></li>
        <li><a href="#" onmouseover="Lmenu('已购买的宝贝');">已购买的宝贝</a></li>
        <li><a href="#" onmouseover="Lmenu('购物车');">购物车</a></li>
        <li><a href="#" onmouseover="Lmenu('个人中心');">个人中心</a></li>
    </ul>
</div>
<div id="submenu" class="submenu"></div>
</body>
</html>

 JS实现页面跳转：

<a href="javascript:window.location.href = 'http://www.baidu.com';">百度一下</a>

 JS为一个文本框赋值：‘这是一篇文章’，并设置清除文本框按钮：

<div>
    <textarea id="title" cols="50" rows="10"></textarea>
    <script language="JavaScript">
        var text = document.getElementById('title');
        text.value = '这是一篇文章';
    </script>
    <button onclick="text.value = '';">清除</button>
</div>

 

posted @ 2017-07-15 22:03  zhaoxingya  阅读(145)  评论(0)    收藏  举报