[JavaScript知识库] 用javascript的按键事件实现简单的随机英文字母改变案例

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 用javascript的按键事件实现简单的随机英文字母改变案例 -> 正文阅读

[JavaScript知识库]用javascript的按键事件实现简单的随机英文字母改变案例

<!DOCTYPE?html>

<html?lang="en">

<head>

????<meta?charset="UTF-8">

????<meta?name="viewport"?content="width=device-width,?initial-scale=1.0">

????<title>Document</title>

????<style>

????????/*?先给div一个简单的样式?*/

????????div{

????????????width:?400px;

????????????height:?400px;

????????????color:?pink;

????????????background:?rgba(0,0,0,0.4);

????????????text-align:?center;

????????????line-height:?400px;

????????????font-size:?280px;

????????????position:?fixed;

????????????top:calc(?50%?-?200px);

????????????left:calc(?50%?-?200px);

????????}

????</style>

</head>

<body>

????<div>??</div>

????<script>

????????????//?封装函数

????????????function?randomWord(){

????????????//?一?先随机生成大写字母在ASCII码表中对应的十进制数

????????????var?randomNum?=?65?+?parseInt(Math.random()*26);

????????????//?二?用函数?String.fromCharCode()?生成对应的随机字母

????????????????//?String.fromCharCode()函数用于从一些Unicode字符值中返回一个字符串

????????????var?randomCode?=?String.fromCharCode(randomNum);

????????????//?三??获取标签对象?div??并将随机生成的大写字母写入到此标签中

????????????var?oDiv?=?document.querySelector('div');

????????????oDiv.innerHTML?=?randomCode?;??

????????????}

????????????

????????????randomWord();

????????????//??四?对?文档doucument?进行事件?类型为?kyedown?点击键盘事件绑定

????????????document.addEventListener('keydown',function(e){

????????????????var?oDiv?=?document.querySelector('div');

????????????????//?进行if条件判断??条件满足?键盘点击的字母与随机生成字母一直即可

????????????????if(e.key.toUpperCase()?===?oDiv.innerHTML){

????????????????????randomWord();

????????????????}

????????????})

????????????

????????????//?@码上成功~?

????</script>

</body>

</html>

JavaScript知识库最新文章

ES6的相关知识点

react 函数式组件 & react其他一些总结

Vue基础超详细

前端JS也可以连点成线（Vue中运用 AntVG6）

Vue事件处理的基本使用

Vue后台项目的记录（一）

前后端分离vue跨域，devServer配置proxy代理

TypeScript

初识vuex

vue项目安装包指令收集

加:2021-08-06 15:55:23 更:2021-08-06 15:55:39

360图书馆购物三丰科技阅读网日历万年历 2025年2日历

-2025/2/5 22:44:14-

图片自动播放器
↓图片自动播放器↓

TxT小说阅读器
↓语音阅读,小说下载,古典文学↓

一键清除垃圾
↓轻轻一点,清除系统垃圾↓

图片批量下载器
↓批量下载图片,美女图库↓

网站联系: qq:121756557 email:121756557@qq.com IT数码