《JavaScript案例》

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量855 收藏 23
点赞数 19
分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ReviewI/article/details/134630278
版权

一、简化版的轮播图

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            img{

                width: 100px;

                height: 100px;

            }

        </style>

       

    </head>

    <body>

        <img src="img/1.PNG" />

       

       

       

        <script>

            //只要有需求:  每隔一段事件就要作什么事 就需要联想到使用定时器

           

            var img = document.getElementsByTagName("img")[0];

            //实现图片的替换 但是图片的文件名可能不是有规律.

            //所以可以将图片的所有文件名路径名 存到数组中. 数组是有规律的.

            var src_1 = ["img/1.PNG","img/2.PNG","img/3.PNG","img/4.PNG"];

           

            var index = 1;

            setInterval(function(){

               

                img.setAttribute("src",src_1[index]);

                index++;

                if(index==4){

                    index = 0;

                }

            },1000);

           

        </script>

       

    </body>

</html>

 二、赛马游戏

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            table{

                width: 1200px;

                height: 400px;

            }

           

            img{

                width: 100px;

            }

           

            .begin{

                width: 100px;

            }

        </style>

    </head>

    <body>

        <div align="center">

            <h3>游戏规则：2分一次。赢了+5分。 中途主持人会随机暂停。选手可以换马。如果换马额外支付1分。</h3>

           

            <table style="border: 1px solid black;"  cellpadding="0" cellspacing="0" border="1px">

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

                <tr>

                    <td class="begin"><img src="img/1.gif" /> </td>

                    <td>赛道~</td>

                </tr>

            </table>

           

            <button id="btn">开始比赛</button>

           

        </div>

       

        <script>

            var dsq ;

            //让图片由左边往右 开始运动

            var img0 = document.getElementsByTagName("img")[0];

            var img1 = document.getElementsByTagName("img")[1];

            var img2 = document.getElementsByTagName("img")[2];

            var img3 = document.getElementsByTagName("img")[3];

           

            var left_index0 = 0;

            var left_index1 = 0;

            var left_index2 = 0;

            var left_index3 = 0;

           

           

           

            document.getElementById("btn").onclick = function(){

                if(document.getElementById("btn").innerText =="开始比赛"){

                    document.getElementById("btn").innerText ="暂停比赛";

                    dsq = setInterval(saima,10);

                }else{

                    document.getElementById("btn").innerText ="开始比赛";

                    clearInterval(dsq);

                }

            }

           

           

            function saima(){

                let sjs0 = Math.floor(Math.random()*10);

                let sjs1 = Math.floor(Math.random()*10);

                let sjs2 = Math.floor(Math.random()*10);

                let sjs3 = Math.floor(Math.random()*10);

                left_index0  = left_index0 + sjs0;

                left_index1  = left_index1 + sjs1;

                left_index2  = left_index2 + sjs2;

                left_index3  = left_index3 + sjs3;

               

                img0.style.marginLeft = left_index0 + "px";

                img1.style.marginLeft = left_index1 + "px";

                img2.style.marginLeft = left_index2 + "px";

                img3.style.marginLeft = left_index3 + "px";

               

                if (left_index0>=1000) {

                    alert("第1匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index1>=1000) {

                    alert("第2匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index2>=1000) {

                    alert("第3匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

                if (left_index3>=1000) {

                    alert("第4匹马赢了");

                    clearInterval(dsq);

                    location.reload();

                }

            }

        </script>

    </body>

</html>

三、图片的移动

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style>

            img{

                /* margin-left: 300px; */

            }

        </style>

       

    </head>

    <body>

        <img src="img/1.gif" />

       

        <script>

            var img = document.getElementsByTagName("img")[0];

            var left_index = 0;

           

           

            setInterval(function(){

                left_index++;

                img.style.marginLeft = left_index + "px";

            },10);

           

             

        </script>

    </body>

</html>

软件2201 方琏琏
关注
  • 19
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 案例 留言板
weixin_65257540的博客
03-18 1115
思路 1、设置点击事件。点击留言按钮获取本地储存并转为数组。 2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1. 3、在判断文本框是否有值，有值才能操作。 4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。 5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。 6、获取本地储存的数据数组，遍历每一个元素，就创建一个节点，赋值并添加进如节点。 7、为了删除操作，需要给每个删除按钮一个自定义属性。 8
javaScript常用案例
张张张张张高高的博客
09-06 8642
前端页面开发之javaScript常用案例
JavaScript案例1
qq_52476758的博客
11-29 3229
JavaScript案例1 案例一：创建一个电脑对象，该对象有颜色、重量、品牌、型号，可以看电影、听音乐、打游戏和敲代码 function Computer(color,weight,brand,tyep){ this.color=color; this.weight=weight; this.brand=brand; this.tyep=tyep; this.watch=function(film){ console.log(film); }
JavaScript 案例 购物车
weixin_65257540的博客
03-29 1888
思路： 1、获取页面元素，本练习用的表格table实现 2、声明一个数组，包含自己需要渲染的内容，每个内容需要声明一个默认值，便于之后用来判断是否被勾选 3、封装渲染函数：通过遍历每一个元素，判断勾选状态，如果被勾选，就直接添加选中属性，没有则正常添加。 4、接着遍历元素的每一个键，并分别赋值给每一个td。 5、判断合计金额，每次遍历完成后，需要把被勾选的元素单价*数量并赋值给总价的元素。 6、最后直接渲染到页面。 7、页面的事件，...
JavaScript函数案例
qq_58492621的博客
07-23 1017
JavaScript函数案例，包含基本函数、arguments的使用以及构造函数的案例介绍，是比较全面典型的案例，对熟悉函数有很大的作用。
JavaScript案例:表单删除
qq_67192586的博客
03-26 1052
js案例,表单删除
JavaScript 各种小案例
老段的CSDN的博客
07-30 3312
JavaScript 6个常用的小案例
JavaScript由浅到深【含案例源码】
热门推荐
白大锅的博客，毕设WangLoveBai_999
07-23 6万+
1.什么是JavaScript 1.1.概念 一门客户端脚本语言 * 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎 * 脚本语言：不需要编译，直接就可以被浏览器解析执行了 1.2.功能 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。 1.3.发展史 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C-- ，后来更名为：ScriptEase 1995年，Netscape(网景)公司
JavaScript案例（求学生成绩）
fusheng_cn的博客
04-26 5696
JavaScript案例（求学生成绩）求班级总分以及平均分
javascript案例10——下拉菜单
努力、拼搏、奋进
05-07 8371
一、案例描述 鼠标经过导航栏出现下拉菜单。 二、案例效果演示 三、案例局部代码 css代码： <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } ul { list-style: none; } .nav { text-align: center;
JavaScript案例-JavaScript
02-16
在描述中提到的"JavaScript案例"可能涵盖了多个实际应用场景。这些案例可能包括： 1. **DOM操作**：通过JavaScript，我们可以访问和修改文档对象模型（DOM），这使得我们能够动态地改变HTML元素的属性、内容或样式...
JavaScript案例
12-04
在本“JavaScript案例”压缩包中，包含了一系列的JS代码示例，这些案例可以帮助我们深入理解和掌握JavaScript的核心概念、语法结构以及实际应用技巧。 1. **基础语法** JavaScript的基础包括变量定义（var、let、...
JavaScript 案例教程源码
05-11
这份"JavaScript案例教程源码"提供了丰富的学习资源，让你能够直接运行代码并观察其运行效果，从而深入理解JavaScript的核心概念。 首先，我们来探索JavaScript的基础知识。JavaScript是一种解释型、弱类型、基于...
JavaScript案例-js表单验证
02-16
在这个"JavaScript案例-js表单验证"中，提供的"03_validation"文件很可能包含了上述提到的验证示例代码。你可以深入研究这些代码，了解具体的实现方式，并尝试根据自己的需求进行修改和扩展。通过实践，你将更好地...
JavaScript案例大全
03-19
作为"JavaScript案例大全"，我们将探讨这些示例中涉及的关键知识点。 1. **全选反选复选框.html**：这个案例涉及到JavaScript处理HTML中的复选框（checkbox）事件。通过JavaScript，我们可以监听复选框的状态改变，...
【React 】开发环境搭建详细指南
lph159的博客
07-24 1123
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 164
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 126
【代码】vue el-select的下拉树形结构。
Vue3可媲美Element Plus Tree组件实战之移除节点
felix_alone2012的博客
07-25 592
《Element Plus Tree - 自定义节点内容》示例中介绍了移除节点的用法，个人觉得作为提供给用户API，应该遵循迪米特法则，把功能实现的细节封装在组件内部，而提供给用户最简单的操作方式，同时在此基础上支持用户的扩展。因此，在API使用的人性化方便，个人觉得element plus做的并不优秀。为此，我们自定义tree组件时对用户API可以设计的更人性化些。
javascript案例
06-12
以下是一个简单的 JavaScript 案例，可以实现在页面中输入数字，然后计算它们的和： ```html <!DOCTYPE html> <title>JavaScript 案例：求和 function sum() { var num1 = parseInt(document....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值