키보드 입력 effect_javascript 기술을 시뮬레이션하는 JS 방법-JS 튜토리얼-php.cn

키보드 입력 effect_javascript 기술을 시뮬레이션하는 JS 방법

WBOY

풀어 주다： 2016-05-16 15:46:58

원래의

1637명이 탐색했습니다.

이 기사의 예에서는 JS가 키보드 입력 효과를 시뮬레이션하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기에서는 JS를 사용하여 소프트 키보드와 타이핑 효과를 시뮬레이션합니다. 소프트 키보드의 문자 키를 클릭하면 키보드 타이핑 효과처럼 텍스트가 텍스트 상자에 표시됩니다. CSS 마스터는 버튼을 클릭하면 꽤 좋아 보인다고 생각합니다.

먼저 작업 렌더링을 살펴보겠습니다.

구체적인 코드는 다음과 같습니다.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>模拟键盘打字</title>
</head>
<body>
<script Language="Javascript">
function a()
{
var text=document.form.text.value
document.form.text.value=text + "A";
}
function b()
{
var text=document.form.text.value
document.form.text.value=text + "B";
}
function c()
{
var text=document.form.text.value
document.form.text.value=text + "C";
}
function d()
{
var text=document.form.text.value
document.form.text.value=text + "D";
}
function e()
{
var text=document.form.text.value
document.form.text.value=text + "E";
}
function f()
{
var text=document.form.text.value
document.form.text.value=text + "F";
}
function g()
{
var text=document.form.text.value
document.form.text.value=text + "G";
}
function h()
{
var text=document.form.text.value
document.form.text.value=text + "H";
}
function i()
{
var text=document.form.text.value
document.form.text.value=text + "I";
}
function j()
{
var text=document.form.text.value
document.form.text.value=text + "J";
}
function k()
{
var text=document.form.text.value
document.form.text.value=text + "K";
}
function l()
{
var text=document.form.text.value
document.form.text.value=text + "L";
}
function m()
{
var text=document.form.text.value
document.form.text.value=text + "M";
}
function n()
{
var text=document.form.text.value
document.form.text.value=text + "N";
}
function o()
{
var text=document.form.text.value
document.form.text.value=text + "O";
}
function p()
{
var text=document.form.text.value
document.form.text.value=text + "P";
}
function q()
{
var text=document.form.text.value
document.form.text.value=text + "Q";
}
function r()
{
var text=document.form.text.value
document.form.text.value=text + "R";
}
function s()
{
var text=document.form.text.value
document.form.text.value=text + "S";
}
function t()
{
var text=document.form.text.value
document.form.text.value=text + "T";
}
function u()
{
var text=document.form.text.value
document.form.text.value=text + "U";
}
function v()
{
var text=document.form.text.value
document.form.text.value=text + "V";
}
function w()
{
var text=document.form.text.value
document.form.text.value=text + "W";
}
function x()
{
var text=document.form.text.value
document.form.text.value=text + "X";
}
function y()
{
var text=document.form.text.value
document.form.text.value=text + "Y";
}
function z()
{
var text=document.form.text.value
document.form.text.value=text + "Z";
}
function space()
{
var text=document.form.text.value
document.form.text.value=text + " ";
}
// -->
</SCRIPT>
<form name="form">
  <p align="center"><textarea name="text" rows="10" cols="50"></textarea></p>
  <p align="center"><input type="button" name="B1" value=" Q " OnClick="q()"><input
  type="button" name="B2" value="W" OnClick="w()"><input type="button"
  name="B3" value="E" OnClick="e()"><input type="button" name="B4" value="R" OnClick="r()"><input
  type="button" name="B5" value="T" OnClick="t()"><input type="button"
  name="B6" value="Y" OnClick="y()"><input type="button" name="B7" value="U" OnClick="u()"><input
  type="button" name="B8" value=" I " OnClick="i()"><input type="button"
  name="B9" value="O" OnClick="o()"><input type="button" name="B10" value="P" OnClick="p()"></p>
  <p align="center"><input type="button" name="B11" value="A" OnClick="a()"><input
  type="button" name="B12" value="S" OnClick="s()"><input type="button"
  name="B13" value="D" OnClick="d()"><input type="button" name="B14"
  value="F" OnClick="f()"><input type="button" name="B15" value="G" OnClick="g()"><input
  type="button" name="B16" value="H" OnClick="h()"><input type="button"
  name="B17" value="J" OnClick="j()"><input type="button" name="B18"
  value="K" OnClick="k()"><input type="button" name="B19" value="L" OnClick="l()"></p>
  <p align="center"><input type="button" name="B20" value="Z" OnClick="z()"><input
  type="button" name="B21" value="X" OnClick="x()"><input type="button"
  name="B22" value="C" OnClick="c()"><input type="button" name="B23"
  value="V" OnClick="v()"><input type="button" name="B24" value="B" OnClick="b()"><input
  type="button" name="B25" value="N" OnClick="n()"><input type="button"
  name="B26" value="M" OnClick="m()"></p>
  <p align="center"><input type="button" name="B27"
  value="" OnClick="space()"></p>
<INPUT TYPE="hidden" name="hidden">
</form>
</body>
</html>

로그인 후 복사

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.