js第三天

最新推荐文章于 2022-10-26 22:09:10 发布
最新推荐文章于 2022-10-26 22:09:10 发布
阅读量214 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhouzhou_98/article/details/82778516
版权

<!DOCTYPE html>

<html>

<head>

    <title>事件</title>

    <script type="text/javascript" src="listener.js"></script>

</head>

<body>

    <input id="btn" type="button" name="btn" value="修改div1的内容" οnclick="change(this)" />

    <div id="div1">div1的内容</div><br>

    <hr>

    <input id="btn1" type="button" name="btn1" value="修改div2的内容" />

    <div id="div2">div2的内容</div>

    <br>

    <hr>

    <input id="btn2" type="button" name="btn2" value="修改div3的内容" />

    <div id="div3">div3的内容</div>

</body>

</html>

 

 

 

 

 

function change(e){

    alert(e);

    var ret=document.getElementById("div1");

    ret.innerHTML="fafddfsdasfdsfsdfsd";

}

window.οnlοad=function(){

    

    var ret=document.getElementById("btn1");

    ret.οnclick=function(e){

        alert(e);

        var re=document.getElementById("div2");

        re.innerHTML="fafddfsdasfdsfsdfsd";        

    }

    var res=document.getElementById("btn2");

    addListener(res,"click",function(e){

        alert(e);

        var reg=document.getElementById("div3");

        reg.innerHTML="fafddfsdasfdsfsdfsd";    

    });

}

function addListener(elentype,elemt,elemtfun){

    if(elentype.attachEvent){

        elentype.attachEvent("on"+elemt,elemtfun);

    }else{

        elentype.addEventListener(elemt,elemtfun);

    }

}

 

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <script type="text/javascript" src="ima.js"></script>

</head>

<body>

    <img id="cat" src="1.jpg" >

</body>

</html>

 

 

window.οnlοad=function(){

    

    var ima=document.getElementById("cat");

    ima.οnmοuseοver=function(){

        this.src="1.jpg";

    };

    ima.οnmοuseοut=function(){

        this.src="2.jpg";

    };

};

当鼠标放进里面出现这个图片

 

放出去后出现另一个图片

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript" src="dazi.js"></script>

    <title></title>

</head>

<body>

    <input id="startBtn" type="button" name="startBtn" value="开始游戏" />

    <span id="score">得分</span>

 

</body>

</html>

 

 

 

 

 

 

window.οnlοad=function(){

    //页面加载完毕之后,启用"开始游戏"按钮

    var startBtn = document.getElementById("startBtn");

    startBtn.disabled = false;

    

    //设置点击事件

    startBtn.onclick = startGame;

};

 

//缓存<label>

var labelArray = new Array();

 

function startGame(){

    //1.禁用"开始游戏"按钮

    this.disabled = true;

    

    //2.定时随机生成字符,并显示到页面中

    setInterval(function (){

        //========================================

        //2.1:创建<lable>元素

        var label = createLabel();

        

        //把创建的label放入缓存中

        labelArray.push(label);

        

        //2.2:把<lable>元素添加到body中

        document.body.appendChild(label);

        //========================================

    },1000);

    

    //3.让页面中的字符向下移动

    setInterval(function(){

        for(var i=0;i<labelArray.length;i++){

            var label = labelArray[i];

            var oldTop = parseInt(label.style.top);

            //屏幕高度

            var screenHeight=document.documentElement.clientHeight-30;

            if(oldTop<screenHeight)

            //下移

            label.style.top= oldTop+10+'px';

        };

    },1000);

    

    //4.捕获用户点击事件

    document.οnkeydοwn=function(event){

        var keyCode = event.keyCode;

        var charCode = String.fromCharCode(keyCode);

        for(var i = 0;i<labelArray.length;i++){

            var label = labelArray[i];

            if(label.innerHTML==charCode){

                //从body中删除label,并清空缓存中对应字符

                labelArray.splice(i,1);

                document.body.removeChild(label);    

                break;

            }

        }

    };

}

 

function createLabel(){

    //获取随机字符

    var charCode = String.fromCharCode(getRandomNumber(26)+65);

    

    //创建<label>元素

    var labelEle = document.createElement("label");

    //屏幕宽度

    var screenWidth=document.documentElement.clientWidth-30;

    

    //并设置属性

    

    labelEle.style.width='25px';

    labelEle.style.backgroundColor='orange';

    labelEle.style.textAlign='center';

    labelEle.style.fontWeight='bold';

    

    labelEle.style.top=30+'px';

    labelEle.style.left=getRandomNumber(screenWidth)+'px';

    labelEle.style.position='absolute';

    //把字符放入<lable>中

    labelEle.innerHTML=charCode;

    return labelEle;

}

 

//根据最大值,返回一个随机数

function getRandomNumber(max){

    return parseInt(Math.random() * max);

}

 

 

 

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script type="text/javascript " src="checkedbox.js"></script>

<title>checkbox</title>

</script>

</script>

</head>

<body>

    请选择你的爱好:<br/>

    <input type="checkbox" id="checkAll"/>全选/全不选<br/>

    <div>

        <input type="checkbox" name="hobby"/>打篮球&nbsp;

        <input type="checkbox" name="hobby"/>踢足球&nbsp;

        <input type="checkbox" name="hobby"/>上网&nbsp;

    </div>

    

    <div>

        <input type="button" id="btn_checkAll" οnclick="checkAll(true)" value="全选"/>

        <input type="button" οnclick="checkAll(false)" value="全不选"/>

        <input type="button" οnclick="checkUnAll()" value="反选"/>

    </div>

</body>

</html>

 

 

function checkAll(checked){

    

    var res=document.getElementsByName("hobby");

    for(var i in res){

        res[i].checked=checked;

        

    }

}

function checkUnAll(){

    

    var res=document.getElementsByName("hobby");

    for(var i in res){

        res[i].checked=!res[i].checked;

    }

}

window.οnlοad=function(){

    document.getElementById("checkAll").οnclick=function(){

        checkAll(this.checked);

    }

 

}

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户新增</title>

    <script type="text/javascript" src="select.js"></script>

</head>

<body>

    <table border="1">

        <tr>

            <td>

                <select id="select1" style="width:100px" size="10" multiple="multiple">

                    <option value="选项1">选项1</option>

                    <option value="选项2">选项2</option>

                    <option value="选项3">选项3</option>

                    <option value="选项4">选项4</option>

                    <option value="选项5">选项5</option>

                    <option value="选项6">选项6</option>

                    <option value="选项7">选项7</option>

                    <option value="选项8">选项8</option>

                    <option value="选项9">选项9</option>

                </select>

            </td>

            <td align="center">

                <input type="button" οnclick="sel1AddTosel2('select1','select2')" value="-->"/><br/>

                <input type="button" οnclick="sel1AddAllTosel2('select1','select2')" value="==>"/><br/>

                <input type="button" οnclick="sel1AddTosel2('select2','select1')" value="<--"/><br/>

                <input type="button" οnclick="sel1AddAllTosel2('select2','select1')" value="<=="/>

            </td>

            <td>

                <select id="select2" style="width:100px" size="10" multiple="multiple"></select>

            </td>

        </tr>

    </table>

</body>

</html>

 

 

function sel1AddAllTosel2(selected1,selected2){

    var select1=document.getElementById(selected1);

    var select2=document.getElementById(selected2);

    while(select1.hasChildNodes()){

        select2.appendChild(select1.firstChild);

    }

}

function sel1AddTosel2(selected1,selected2){

    var select1=document.getElementById(selected1);

    var select2=document.getElementById(selected2);

    var option=select1.getElementsByTagName("option");

 

    for(var i=0;i<option.length;i++){

        var options=option[i];

        if(options.selected){

            select2.appendChild(options);

            i--;

        }

    }

}

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>用户新增</title>

<script type="text/javascript" src="user.js"></script>

</head>

<body>

    <form name="userForm">

        <center>

            用户录入<br/>

            用户名:<input id="username" name="username" type="text" size=15/>

            E-mail:<input  id="email" name="email" type="text"  size=15/>

            电话:<input id="tel" name="tel" type="text" size=15/>

            <input type="button" value="添加" id="btn_submit"/>

            <input type="button" value="删除所有" id="btn_removeAll"/>

        </center>

    </form>

    <hr/>

    <table border="1" align="center" cellpadding=0 cellspacing=0 width=400>

        <thead>

            <tr>

                <th>用户名</th>

                <th>E-mail</th>

                <th>电话</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody id="userTbody">

            <tr>

                <td>乔峰</td>

                <td>qiao@163.com</td>

                <td>18212345678</td>

                <td><a href='#'>删除</a></td>

            </tr>

        </tbody>

    </table>

    

    

</body>

</html>

 

window.οnlοad=function(){

    document.getElementById("btn_submit").οnclick=function(){

        var username=document.getElementById("username").value;

        var email=document.getElementById("email").value;

        var tel=document.getElementById("tel").value;

 

        var id=new Date().getTime();

        var trText=document.createElement("tr");

        var userText=document.createElement("td");

        var emailText=document.createElement("td");

        var telText=document.createElement("td");

        var operaText=document.createElement("td");

 

        trText.id=id;

        userText.innerHTML=username;

        emailText.innerHTML=email;

        telText.innerHTML=tel;

        operaText.innerHTML="<a href='javascript:dele("+ id  +");'>删除</a>"

 

        trText.appendChild(userText);

        trText.appendChild(emailText);

        trText.appendChild(telText);

        trText.appendChild(operaText);

        document.getElementById("userTbody").appendChild(trText);

    }

 

   document.getElementById("btn_removeAll").οnclick=function(){

           document.getElementById("userTbody").innerHTML="";

   }

 

}

function dele(id){

    var current=document.getElementById(id);

    current.parentNode.removeChild(current);

}

 

zhouzhou_98
关注
灰太狼系列—打地鼠(内含源码) inscode中的直观运行
Why_does_it_work的博客
07-22 8293
游戏中使用了定时器来控制图像的显示和动画效果。当图像显示时，玩家需要速点击图像以获得分数。游戏还提供了重新开始按钮，玩家可以在游戏结束后点击重新开始按钮重新开始游戏。 总体而言，这个游戏是一个简单的反应速度游戏，通过点击图像来测试玩家的反应能力。你可以根据自己的需求对代码进行修改和扩展，添加更多的功能和特性。
JS第二天
I_love_bc的博客
04-03 238
JS核心第二天 一.节点操作 1.如何获取节点 获取元素通常使用两种方式: 1.利用DOM提供的方法获取元素 ●document.getElementByld( ●document.getElementsByTagName ●document.querySelector等 缺点： 逻辑性不强、繁琐 2.利用节点层级关系获取元素 ●利用父子兄节点关系获取元素 ●逻辑性强,但是兼容性稍差 2.什么是节点 网页中的所有内容都是节点(标签、属性、文本、注释等) , 在DOM中,节点使用node来表示。 HTML
JS第三天
飞翔的小白
08-28 199
 节点 * 为什么要学节点  * 回顾概念   * 文档:document   * 元素:页面中所有的标签,元素---element,  标签----元素---对象   * 节点:页面中所有的内容(标签,属性,文本(文字,换行,空格,回车)),Node   * 根元素:html标签   * 需求---用之前学习的知识点能否解决   * 获取div中所有的标签,设置每个标签的背景颜色...
js 第三天
weixin_34289454的博客
10-19 62
循环语句 循环，就是对一个整体进行逐个查找 循环：1、从什么开始 　　　2、查找的步长 　　　3、结尾数字 计算机对数据的计算不是从1开始，从0开始也就是说0代表第一个数据 for循环语句的格式 for（）{} 执行出来是 加号的使用 + 字符串拼接 变量和字符串之间都需要+进行拼接 执行出来是 弹出框 　　1、alert（）警告框 　　...
js获得当前日期的后几天
牟云飞的博客
12-19 6268
function addByTransDate(dateParameter, num) { var translateDate = "", dateString = "", monthString = "", dayString = ""; translateDate = dateParameter.replace("-", "/").replace("-", "/");
JavaScript第三天
XiaLuoCXY的博客
12-09 251
一.函数 1.为什么需要函数 1.1.意义：function，是被设计为执行特定任务的代码块 1.2优势：函数可以把具有相同或相似逻辑的代码“包裹”起来，通过函数调用执行这些被“包裹”的代码逻辑，这么做的优势 是有利于精简代码方便复用。可以实现代码复用，提高开发效率 2.函数使用 2.1 其规范：1和变量命名基本一致 2尽量小驼峰式命名法 3前缀应该为动词 4命名建议：常用动词约定 2.2函数的调用语法 2.3函数体 2.4函数关键字声明：function，，函数不调...
JS30:JavaScript 30 天 30 个项目
05-31
第 3 天：CSS 变量 使用 JS 更新确定图像特征的 CSS 变量。 第 6 天：搜索和建议 将搜索框中输入的字符与城市和州名数据（json 文件）匹配，并显示结果和建议以及该地点的人口。 第 8 天：HTML 画布 当您在 HTML ...
第三天JavaScript笔记总结
07-19
第三天JavaScript笔记总结
ljs3:第一个JavaScript第三版示例
05-10
第一版JavaScript第三版 这是由发行的“”的示例存储库。 要下载示例，可轻松单击页面右上方的绿色按钮[代码]，然后单击[下载ZIP]。 如果您想在旅途中或在上查看源代码，请参阅。在许多情况下，源代码将显示在执行...
VUE引入第三方js包及调用方法讲解
10-17
在Vue.js应用中引入并调用第三方JS库是常见的需求，尤其在开发复杂项目时，我们经常需要利用现有的成熟库来提升效率。本篇将详细讲解如何在Vue中引入第三方JS包并进行调用。 首先，为了确保Vue能够正确识别和加载第...
js第四天 js第四天笔记
07-11
在"js第四天 js第四天笔记"这个主题中，我们可以深入探讨JavaScript的一些关键概念和特性，这些都是在学习过程中需要掌握的重点。 第一天到第四天的学习通常会涵盖JavaScript的基础知识，包括数据类型、变量、操作...
javaScript贪吃蛇
平安喜乐
10-26 781
javaScript贪吃蛇
贪吃蛇案例详解-函数封装
Smile_and_life的博客
09-15 658
Document 贪吃蛇游戏的实现 历史最高分：0 当前分数：0 ...
js获取当前日期以及前三天后三天日期。
早晚的博客
09-23 3156
js 获取当前日期以及前三天后三天日期
设置js当前时间加3天之后的时间
weixin_34364135的博客
11-07 3726
function addDate(date, days) { if(days == undefined || days == '') { days = 1; } var date = new Date(date); date.s...
js 获取日期，获取今天，昨天，前天，两天内，三天内，四天内，五天内 日期函数
qq_29596627的博客
11-22 5760
var dates={   //获取日期     FunGetDateStr: function (p_count) {         var dd = new Date();         dd.setDate(dd.getDate() + p_count);//获取p_count天后的日期          var y = dd.getFullYear();        
js获取三天后的日期
weixin_34109408的博客
08-07 1181
js获取三天后的日期 setDate getNowAddTreeFormatDate() { var date = new Date(); date.setDate(date.getDate()+3);//获取3天后的日期 var seperator1 = "-"; var seperator2 = ":"; var month...
【高创新】基于鲸鱼优化算法WOA-Transformer-LSTM实现故障识别Matlab实现.rar
最新发布
09-18
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 替换数据可以直接使用，注释清楚，适合新手
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值