javascript 案例

2026-08-23

JavaScript常见案例

一.点灯开关控制: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <img id="light" src="img/off.gif"> </body> <scr

随着时代的发展,知识也在日益更新,但是基础知识永远不会过时,它是新时代的基石,更是我们进一步学习的保障,下面带着大家用JavaScript开发一款真正的扑克游戏,和大家一起分享,希望你们能够喜欢:闲话不多说,现在开始引入我们的问题:当我们与朋友玩扑克牌的时候,每次开始前都会洗牌,然后按每人一张牌来循环的发牌,自己拿到一张牌都会按照大小的顺序将牌插入到对应的位置. 接下来让我们通过JavaScript的知识来实现一个模拟打牌的程序. 大家可以看到这是一个扑克游戏的场景图,首先大家可以看到页面有五块

JavaScript案例一：Window弹窗案例

注:火狐可运行,谷歌不可运行(安全级别高) <!DOCTYPE html> <html> <head> <title>JavaScript 弹窗案例</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" >

面向对象原生JavaScript案例炫彩小球

面向对象其实对于初学者来说还是比较难以理解的,以前看到一个面试题目面向对象是什么? 面向对象是一种思想,千万别入坑了: 这次给大家带来的是一个鼠标移动产生小球的案例,不是我不想给大家分享如何去认识面向对象,因为我觉得,做案例比什么画图理解,或者是字面意思更好理解一点: 那么来吧宝贝: 先上点简单的CSS <style type="text/css"> *{margin: 0;padding: 0;} body{background: #000;} </style&g

第二章 JavaScript案例（中）

1. js事件 HTML代码 <!DOCTYPE html> <html lang="en" onUnload="ud()"> <head> <meta charset="UTF-8"> <title>Title</title> <script> function demo() { alert("hello"); } function onOv

Ajax(javascript)案例

一.注册案例(Get方式) 1.前台 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ajax</title> </head>

web开发：javascript案例

一.浮动与定位复习二.小米菜单案例三.轮播图四.滚动轮播一.浮动与定位复习 - 浮动与相对定位 ```js// 1.两者均参与布局// 2.主浮动布局, 相对布局辅助完成布局微调// 3.相对定位布局微调不同于盒模型布局微调, 相对定位布局不影响盒子原有位置, 就不会影响兄弟盒子布局``` - 浮动与绝对定位 ```js// 1.只保留绝对定位布局// 2.脱离文档流的盒子宽可以交于内容撑开``` <!DOCTYPE html> <html> <head> &l

JavaScript案例七：简单生成表格

JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简单生成表格</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript&quo

JavaScript案例六：简单省市联动(NBA版)

JavaScript实现简单省市(NBA版)联动 <!DOCTYPE html> <html> <head> <title>JavaScript实现简单省市(NBA版)联动</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascrip

JavaScript案例五：下拉列表左右选择

用JavaScript实现下拉列表左右选择,很简单,不过要特别注意循环时要注意变量是否发生了变化(见代码) <!DOCTYPE html> <html> <head> <title>JavaScript下拉列表左右选择</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script ty

JavaScript案例四：全选练习

JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" &g

JavaScript案例三：动态显示时间

用JavaScript实现在页面上动态的显示时间 <!DOCTYPE html> <html> <head> <title>JavaScript动态显示时间</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"

JavaScript案例二：在末尾添加节点

简单实现通过JavaScript来增加HTML节点 <!DOCTYPE html> <html> <head> <title>JavaScript在末尾添加节点</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"

延时提示框制作思路[简单javascript案例]

模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区块继续保持显示状态,在鼠标移出弹出区块后,弹出的隐藏区块再次隐藏. 主要应用知识:setTimeout()函数.clearTimeout()以及连等应用. 初始的HTML代码: <div id="div1" ></div> <div id="div2

java中执行javascript案例

Nashorn js engine官方文档 https://docs.oracle.com/javase/7/docs/technotes/guides/scripting/programmer_guide/#top java函数输出js的hello world: import javax.script.Invocable; import javax.script.ScriptEngine; import javax.script.ScriptEngineFactory; import java

javascript案例之照片墙

效果图: --------------------------------------------------------------------------------------------------------------------------- 实现思路: 1.布局转换,定义一个大数组,可以存放每个li的小数组(left,top) 2.点击按钮随机事件将每个li标签添加对象下标,再进行Math.random()的sort()排序 3.拖拽事件将当前获取的li标签进行拖拽操作,再进

javascript案例之放大镜效果

效果图如何实现该效果呢?? 我们先来进行分析实现思路 1.鼠标移入移出事件 1>移入:悬浮块和大图显示 2>移出:悬浮块和大图隐藏 2.鼠标移动(悬浮块随着鼠标移动) 1>获取鼠标当前的位置(e.clietX) 2>获取鼠标最大可以移动的距离left( left= 鼠标位置 - 悬浮块宽度/2 )这里悬浮块宽度/2是为了保持在正中间 3>判断是否碰壁(<0,则=0:>max,则=max) 这里配合上图指的是悬浮块在div(id:left)的可视区移动距离

JavaScript—— 案例：表单验证

QQ号:<input type="text" id="txtQQ"><span></span><br> 邮箱:<input type="text" id="txtEMail"><span></span><br> 手机:<input type="text" id="txtPhone">

JavaScript 之基础知识

JavaScript 基础知识 JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用. JavaScript 是因特网上最流行的脚本语言. JavaScript 很容易使用!你一定会喜欢它的! JavaScript 简介在数百万张页面中,JavaScript 被用来改进设计.验证表单.检测浏览器.创建cookies,等等等等.JavaScript 是因特网上最流行的脚本语言,并且可在所有主要的

前端开发之JavaScript HTML DOM实战篇

实战案例一: “灯泡发光” <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>javaScript案例之点亮灯泡</title> <style type="text/css"> img{ width:100px; height:180px; margin:50px 50%;

Selenium+java - 调用JavaScript操作

前言在做web自动化时,有些情况selenium的api无法完成,需要通过第三方手段比如js来完成实现,比如去改变某些元素对象的属性或者进行一些特殊的操作,本文将来讲解怎样来调用JavaScript完成特殊操作. 用法创建一个执行 JS 的对象,也就是 JavascriptExecutor 对象,这个对象是由 driver 进行强制类型转换而来,即JavascriptExecutor js= (JavascriptExecutor)driver; 然后这个对象 js 就可以调用 execut