一些JavaScript实例介绍

JavaScript是web开发者必学的三种语言之一,JavaScript对网页行为进行编程,本文为大家提供了一些JavaScript使用实例,希望对大家右一定的帮助。

一,javascript动态显示:

1.jpg

如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下:

<head>
    <title></title>
<script type="text/javascript">
        function initEvent() {
            var links = document.getElementsByTagName("a");
            //获取标签为a的内容
for (var i =0; i < links.length; i++) {       
//逐行遍历
var link = links[i];
                link.onmouseover = onmouse;                  
                //当鼠标经过某行是调用onmouse函数
            }
        }
        function onmouse() {
            var div = document.createElement("div");         
            //动态创建div标签
            div.style.position ="absolute";               
             //设置标签属性为手型
            div.style.top = window.event.clientY;            
            //设置y坐标
            div.style.left = window.event.clientX;            
            //设置x坐标
            div.innerHTML ="saefagfawefaw<font color='red'>
            后卫噢服务和偶if</font>";
            //将要显示的内容添加到后面
            document.body.appendChild(div);                
            //将动态的div跟在body后面
        }
    </script>
</head>
<body onload="initEvent ()">
    <a href="http://www.baidu.com" title="aesfwaef;ah">百度</a><br />
    <br /> 
<a href="http://www.baidu.com" title="afwaajmalkm">新浪</a><br />   
    <br />
<a href="http://www.baidu.com" title="afwaajmalkm">谷歌</a><br /> 
    <br />
<a href="http://www.baidu.com" title="afwaajmalkm">哈哈</a><br />  
    <br />
</body>

二:点击右键显示“你好”,点击左键显示禁止复制

<head>
    <title></title>
<script type="text/javascript">
        function MyClick() {
            if (event.button ==1) {
                alert("你好");
            }
            elseif (event.button ==2) {
                alert("禁止复制");
            }
            else {
                setTimeout("close();", 2000);   
            }
        }
        function close() {
            window.opener =null;
            window.close();
        }
    </script>
</head>
<body onmouseup="MyClick()">
    <br />
</body>

三:动态走马灯显示

显示效果如图所示:

2.jpg

当点向左滚动式title字样向左,点击享有滚动按钮时title字样想又滚动

<head>
    <title>新学期开学课!</title>
<script type="text/javascript">
        var dir ="left";                            
        //默认初始为向左
function huigun() {
            if (dir =="left") {                        
            //当dir为left是向左滚动
var title = document.title;                
//取到title的值
var first = title.charAt(0);                
//取出第一个字
var last = title.substring(1, title.length);   
 //取出第二到最后的所有字
                document.title = last + first;            
                //将第一个字加到最后
            }
            elseif (dir =="right") {                   
             //如果向右滚,则同理
var title = document.title;
                var first = title.substring(0, title.length -1)
                var last = title.charAt(title.length -1);
                document.title = last + first;
            }
            else {
                alert("方向错了");
            }
        }
        function setdir(d) {            
        //当鼠标点击按钮式同时给dir复制
            dir = d;
        }
        setInterval("huigun()",500);            
        //每隔0.5秒刷新一次
</script>

</head>
<body>
<input type="button" value="向左滚动" onclick="setdir('left');"/>
<input type="button" value="向右滚动" onclick="setdir('right');"/>
</body>

四:禁止复制小结

显示效果如图所示,将第一个手机号码复制粘贴到重复手机号码框时禁止复制

3.jpg

<input type="button" value="粘贴" 
onclick="clipboardData.setData('Text','我发现了个好网站,很黄很暴力'+location.href);
alert('已经将信息复制到粘贴版中,请快速复制给好友');"/>
这是一篇文章
手机号码<input type="text"/>
重复手机号码<input type="text" 
onpaste="alert('为保证您的信息安全,请勿粘贴!');return false"/>

五:javascript遍历输出

示例代码:

<head>
    <title></title>
<script type="text/javascript">
        function as() {
            var radios = document.getElementsByName("gander");            
            //遍历name为gander的值然后输出
for (var radio =0; radio < radios.length; radio++) {
                var i = radios[radio];
                alert(i.value);
            } 
        }
    </script>
</head>
<body>
<input type="radio" name="gander" value="男"/> 男
<input type="radio" name="gander" value="保密"/> 保密
<input type="radio" name="gander" value="女"/> 女
<input type="button" value="选择" onclick="as()"/>
</body>

六:交叉变化

显示效果如图:

4.jpg

点击某个按钮时当前点击的按钮显示呜呜,其他按钮显示哈哈

示例代码:

<head>
    <title></title>

    <script type="text/javascript">
        function btn() {
            var inputs = document.getElementsByTagName("input");    
            //取出名字为input的值
for (var i =0; i < inputs.length; i++) {           
 //遍历    
var input = inputs[i];
                input.onclick = btnclick;                    
                //当某个按钮被点击时调用btnclick函数
            }
        }
        function btnclick() {
            var inputs = document.getElementsByTagName("input");    
            //取出input的值
for (var i =0; i < inputs.length; i++) {
                var input = inputs[i];                       
                 //遍历
if (input == window.event.srcElement) {            
//如果被点击
                    input.value ="呜呜";                    
                    //将值改为呜呜
                }
                else {
                    input.value ="哈哈";                    
                    //每点击的为哈哈
                }
            }
        }
    </script>

</head>
<body onload="btn()">
    <input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
<input type="button" value="哈哈"/>
</body>

七:协议倒计时(开始打开页面时倒计时10秒阅读时间,当十秒到后注册按钮可用)

示例代码:

<head>
    <title></title>
<script type="text/javascript">
        var leftSecond =10;        
        //设定初始值
var inervalId;
        function CountDown() {
            var reg = document.getElementById("btnReg");    
            //取出id为btnreg的值
if (reg) {                    
                if (leftSecond <=0) {                    
                //如果值小于等于0则按钮可用
                    reg.disabled ="";
//                    clearInterval(inervalId);
                }
                else {                                           
                 //如果值大于0
                    reg.value ="请仔细阅读,还剩"+ leftSecond +"秒"
                    //将按钮的值改为…+设定值
                    leftSecond--;                                   
                     //设定值减1
                }
            }
        }
        inervalId = setInterval("CountDown()",1000);        
        //每隔1秒刷新
</script>
</head>
<body>
<textarea></textarea>
<input id="btnReg" type="button" value ="注册" disabled="disabled"/>   
 //按钮初始不可用
</body>

5.jpg

八:图片随鼠标移动

当鼠标移动到哪里,图片也移动到哪里

当鼠标位置发生变化时如图所示图片跟随鼠标一起变化位置,并且显示文字:哈哈!我会飞!

示例代码:

<head>
    <title></title>

    <script type="text/javascript">
        document.onmousemove =function() {        
        //当鼠标移动式获取当前x,y坐标值
var x = window.event.clientX;
            var y = window.event.clientY;
            var f = document.getElementById("fly");        
            //取到id为fly的标签内容赋值于f
if (!f) {                               
 //如果没有取到,则返回
return;
            }
            f.style.left = x;                       
             //否则将f的坐标设为鼠标坐标值x,y
            f.style.top = y;
        }
    </script>

</head>
<body>
    <div id="fly" style="position: absolute">
        <img src="300png016.png"/><br />
        哈哈!我会飞!
    </div>
</body>

效果显示如图:

6.jpg

九,动态添加

<head>
    <title></title>
<script type="text/javascript">
        function on() {            
        //点击按钮,添加百度
var links = document.createElement("<a href='http://www.baidu.com'>百度</a>");
            links.innerHTML="百度";          
            //向连接中添加显示
            document.body.appendChild(links);   
            //将创建的连接追加到body中
        }
    </script>
</head>
<body>
<input type="button" value="添加" onclick="on()"/>
</body>

十:动态高亮

鼠标移动上的当前行显示为红色,其余行显示为白色

7.jpg

实现代码:

<head>
    <title></title>

    <script type="text/javascript">
        function initEven() {
            var footballs = document.getElementById("football");    
            //取id费football的标签
var lis = footballs.getElementsByTagName("li");        
//取name为li 的标签
for (var i =0; i < lis.length; i++) {               
 //遍历
var li = lis[i];
                li.onmouseover =function() {                
                //当鼠标移动到某个li上时执行
var footballs = document.getElementById("football");        
                    var lis = footballs.getElementsByTagName("li");
                    for (var i =0; i < lis.length; i++) {        
                    //遍历
var li = lis[i];
                        if (li ==this) {
                            li.style.background ="red";       
                             //将当前的背景设为红色
                    li.onclick =function() {           
                     //当点击是将字体设为30号
this.style.fontSize =30;
                            }
                        }
                        else {
                            li.style.background ="white";        
                            //将其余的背景设为白色
                    li.style.fontSize =18;           
                     //将其余的字体设为18号
                        }
                    }
                }
                li.onclick =function() {
                    this.style.fontSize =30;

                }
            }
        }
    </script>

</head>
<body onload="initEven()">
    <ul id="football">
        <li>曼联</li>
<li>中国</li>
<li>美国</li>
<li>阿根廷</li>
<li>西班牙</li>
</ul>
</body>

十一:动态放大

当勾选是现实详细内容“这是高级选项”当勾选取消时详细内容消逝

效果如下:

8.jpg

实现代码:

<head>
    <title></title>
<script type="text/javascript">
        function show(cb) {
            var div = document.getElementById("Div");
            if (cb.checked) {
                div.style.display ="";                
                //当勾选是现实为可见
            }
            else {
                div.style.display ="none";
            }
        }
    </script>
</head>
<body>
<input type="checkbox" id="cbshow" 
onclick="show(this)"/><label for="cbshow">显示高级选项</label>
<div id="Div" style="display:none">这是高级选项</div>          
  //将初始设为不可见
</body>
例二<body>
<a href="http://www.baidu.com" onmouseout="document.getElementById('baiduDiv').
style.display='none'" onmouseover="document.getElementById('baiduDiv')
.style.display=''">百度网</a>
<div id="baiduDiv" style="display:none; border-color:Green;
 border-style:dotted; border-width:1px">
百度网是<font color="red">李彦宏</font>创建的,网址是:
<a href="http://www.baidu.com">www.baidu.com</a></div>
</body>

十三:点击超链接变色但不打开连接

当点击超链接时,不打开连接,只是将其背景颜色显示为红色

效果如图

9.jpg

<head>
    <title></title>
<script type="text/javascript">
        function initEvent() {
            var links = document.getElementsByTagName("a");       
             //获取标签
for (var i =0; i < links.length; i++) {           
 //遍历
var link = links[i];
                link.onclick = onclick;                
                //如果连接点击则触发事件!注javascript事件没有括号
            }
        }
        function onclick() { 
        var links = document.getElementsByTagName("a");
            for (var i =0; i < links.length; i++) {
                var link = links[i];
                if (link ==this) {
                    link.style.background ="red";
                }
                else {
                    link.style.background ="white";
                }
            }
            window.event.returnValue =false;        
             //禁止网页打开超链接
        }
    </script>
</head>
<body onload="initEvent()">
<a href="http://www.baidu.com">百度</a><br />
<a href="http://www.baidu.com">新浪</a><br />
<a href="http://www.baidu.com">新华</a><br />
<a href="http://www.baidu.com">谷歌</a><br />
<a href="http://www.baidu.com">优酷</a><br />
</body>

十四:隔行变色

<head>
    <title></title>

    <script type="text/javascript">
        function shoutIt() {
            var table = document.getElementById("tb");
            var tr = table.getElementsByTagName("tr");
            for (var i =0; i < tr.length; i++) {
                if (i %2==0) {
                    var trs = tr[i];
                    trs.style.background ="red";
                }
            }
        }
    </script>

</head>
<table id="tb">
        <tr><td> 哈哈</td>
        <td>23</td></tr><tr>
        <td>窝窝</td>
        <td>253</td></tr>
        <tr><td>嘿嘿</td><td>45</td>
        </tr><tr><td>呵呵</td><td>123</td></tr>
    </table>
</body>

十五:获取焦点

当鼠标点击文本框式变为红丝,当点击另外一个是之前那个变为绿色,点击哈哈按钮式红色变为绿色

效果如图:

1.jpg

<head>
    <title></title>

    <script type="text/javascript">
        function initEvent() {
            var inputs = document.getElementsByTagName("input");
            for (var i =0; i < inputs.length; i++) {
                var input = inputs[i];
                if (input.type =="text") {
                    input.onfocus = inputonfocus;       
                    //当获得焦点时触发(onfocus为获得焦点)
                    input.onblur = inputonblurs;       
                     //当失去焦点是触发(onblur为失去焦点)
                }

            }
        }
        function inputonfocus() {
            this.style.background ="red";
        }
        function inputonblurs() {
            this.style.background ="Green";
        }
</script>

</head>
<body onload="initEvent()">
    <input type="text"/><input type="text" />
    <input type="text"/><input type="text" /><input
        type="text"/><input type="text" /><input type="text"/>
        <input type="text" /><input
            type="text"/><input type="text" />
            <input type="button" value="哈哈"/><input type="text" /><input
                type="text"/><input type="text" />
                <input type="text"/>
</body>

十六:点击弹出登录窗口

当点击登陆按钮时动态弹出登陆窗口,点击关闭按钮式关闭:

效果如图:

2.jpg

示例代码:

<head>
    <title></title>
<script type="text/javascript">
        function showLogin() {
            var loginDiv = document.getElementById("loginDiv");
            loginDiv.style.display ='';
        }
        function hideLogin() {
            var loginDiv = document.getElementById("loginDiv");
            loginDiv.style.display ='none';
        }
    </script>
</head>
<body>
<a href="javascript:showLogin()">登录</a>
<div style="position: absolute; top: 200px; left: 200px; 
border-style: solid; border-color: Blue;
        border-width: thin;display:none;" id="loginDiv">
        <img src="images/close.JPG" onclick="hideLogin()" style="float: right"/>
<table>
            <tr>
                <td>
                    <label for="username">
                        用户名:</label>
</td>
<td>
                    <input type="text" id="username"/>
</td>
</tr>
<tr>
                <td>
                    <label for="password">
                        密码:</label>
</td>
<td> 
<input type="password" id="passwordpassword"/>
</td>
</tr>
</table>
</div>
</body>

十七:搜索框效果

效果显示如图

3.jpg

示例代码:

<head>
    <title></title>
<script type="text/javascript">
        function inputBlur(keyword) {
            if (keyword.value.length <=0) {
                keyword.value ="输入搜索关键词";
                keyword.style.color ="Gray";
            }            
        }

        function inputFocus(keyword) {
            if (keyword.value =='输入搜索关键词') {
                keyword.value ='';
                keyword.style.color ='Black';
            }
        }
    </script>
</head>
<body>
<input onblur="inputBlur(this)" onfocus="inputFocus(this)"
 id="keyword" value="输入搜索关键词" style="color:Gray"/>
 <input type="button" value="搜索一下" />
 <input id="Text1"/><input id="Text2" />
</body>

十八:评分五角星随鼠标移动显示(当鼠标放在五角星上时前面的显示为黑色五角星,后面的显示白色五角星)

当鼠标放到哪个星星上时,之前的星星显示黑色星,之后的显示黑色星

如图显示

3.jpg

代码:

<head>
    <title></title>
<script type="text/javascript">
        function indexOf(arr, element) {               
         //传入array数组和当前值
for (var i =0; i < arr.length; i++) {
                if (arr[i] == element) {                
                //第i个值等于当前值
return i;                       
 //返回i
                }
            }
            return-1;
        }
        function initEvent() {
            var rating = document.getElementById("rating");            
            //取id为rating的标签
var tds = rating.getElementsByTagName("td");            
//在id为rating标签下去名字为td的值
for (var i =0; i < tds.length; i++) {                   
 //遍历
var td = tds[i];
                td.style.cursor ='pointer';                       
                 //设置鼠标显示形式
                 
                td.onmouseover =function() {                    
                //当鼠标移动时… …
var rating = document.getElementById("rating"); 
//不用担心和initEvent中的rating、tds变量冲突,因为他们是两个函数,只是写在了一起而已。
var tds = rating.getElementsByTagName("td");
                    var index = indexOf(tds, this);                
                    //调用函数indexof计算鼠标当前为值
for (var i =0; i <= index; i++) {                
//遍历鼠标之前的值
                        tds[i].innerText ='★';                   
                         //将其赋值为“★”
                    }
                    for (var i = index+1; i <tds.length; i++) {       
                     //遍历鼠标之后的值
                        tds[i].innerText ='☆';                    
                        //将其赋值为“☆“
                    }
                };
            }
        }
    </script>
</head>
<body onload="initEvent()">
<table id="rating"><tr><td>☆</td><td>☆</td>
<td>☆</td><td>☆</td><td>☆</td></tr></table>
</body>

二十:无刷新评论

示例代码:

<head>
    <title></title>

    <script type="text/javascript">
        function pl() {
            var nickname = document.getElementById("nickname").value;
            var input = document.getElementById("comm").value;

            var table = document.getElementById("table"); 
            //创建表格
var tr = document.createElement("tr"); //创建新行

            var Nickname = document.createElement("td"); 
            //创建昵称单元格
            Nickname.innerText = nickname;
            tr.appendChild(Nickname); //添加到新行

            var Comm = document.createElement("td");
             //创建评论单元格
            Comm.innerText = input;
            tr.appendChild(Comm); //添加到新行

            table.tBodies[0].appendChild(tr); 
            //将新行添加到表格中的tbody中,tBodies:一个表格允许有多个tbody。

        }
    </script>

</head>
<body>
    <table id="table">
        <tbody>
        </tbody>
</table>
    昵称:<input id="nickname" type="text"/><br />
    <textarea id="comm"></textarea>
<input id="input" type="button" value="评论" onclick="pl()"/>
</body>

效果如下:

4.jpg

本文来自JavaScript教程栏目。

以上就是一些JavaScript实例介绍的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » JavaScript 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏