Öncelikle Stil Kodumuzu Ekliyoruz
<style> .verificationCode{ width: 100px; height: 50px; display: flex; border: 1px black solid; align-items: center; justify-content: center; user-select: none; cursor: pointer; } .firstNumber{ font-size: 26px; margin-right: 5px; } .operationNumber{ font-size: 26px; margin-right: 5px; } .secodeNumber{ font-size: 26px; } .inputNumber{ padding: 9px; width: 70px; margin-left: 15px; font-size: 24px; } .inputNumber::-webkit-inner-spin-button{ appearance: none; } .baibai{ display: flex; margin: 0 auto; } </style>Sonra Captcha Kodumuzu Ekliyoruz<body> <div class="baibai"> <div class="verificationCode"> <div class="firstNumber"></div> <div class="operationNumber"></div> <div class="secodeNumber"></div> </div> <label style="line-height: 50px;height: 50px;margin: 0 15px;"> Sonuç:</label> <input class="inputNumber" type="number"> </div> <script> let firstNumberNode = document.querySelector('.firstNumber'); let operationNumberNode = document.querySelector('.operationNumber'); let secodeNumberNode = document.querySelector('.secodeNumber'); let verificationCodeNode = document.querySelector('.verificationCode'); let inputNode = document.querySelector('.inputNumber'); randomOption(firstNumberNode,operationNumberNode,secodeNumberNode,inputNode); verificationCodeNode.style.backgroundColor = randomto16Sting(); verificationCodeNode.addEventListener('click',()=>{ randomOption(firstNumberNode,operationNumberNode,secodeNumberNode,inputNode); verificationCodeNode.style.backgroundColor = randomto16Sting(); }) function randomto16Sting (){ return '#'+parseInt(randomNumber(0xFFFFFF)).toString(16); } function randomNumber(number){ return Math.random()*number } function randomOption(firstNumberNode,operationNumberNode,secodeNumberNode,inputNode){ let firstNumber = Math.ceil(Math.random(1)*10); let operationNumber = Math.ceil(Math.random()*4); let secodeNumber = Math.ceil(Math.random(1)*10); let answer = 0; let mul = 0; switch (operationNumber) { case 1: operation="+"; answer = firstNumber+secodeNumber; break; case 2: operation="-" if(firstNumber < secodeNumber){ mul = firstNumber ; firstNumber = secodeNumber; secodeNumber = mul; } answer = firstNumber - secodeNumber; break; case 3: operation="×" answer = firstNumber*secodeNumber; break; case 4: operation="÷" let answerFirst = firstNumber*secodeNumber; mul = firstNumber ; firstNumber = answerFirst; answer = mul; break; default: break; } let dataArray = [firstNumber,operation,secodeNumber,answer]; firstNumberNode.innerHTML = dataArray[0]; operationNumberNode.innerHTML = dataArray[1]; secodeNumberNode.innerHTML = dataArray[2]; inputNode.value = dataArray[3]; firstNumberNode.style.color = randomto16Sting(); operationNumberNode.style.color = randomto16Sting(); secodeNumberNode.style.color = randomto16Sting(); } </script> </body>Kaba süreç:- İlk önce captchayı al
- RandomOption Kullan : Bu fonksiyon rastgele sayılar üretir ve ilkokulda öğrendiğimiz toplama, çıkarma, çarpma ve bölme sembollerini üretir ve ayrıca bu algoritmanın cevabını üretir. Bu fonksiyondaki bölme için kullandığım şey iki sayı beklemek, cevabı almak için çarpmayı kullanmak, cevap bölücü, veri alışverişini kullanmak ve veri çıktısını almak. (Bu etki, tükenmez sorunlara ek olarak, körü körüne rastgele hariç tutmaktır).
- RandomOption işlevini bir kez çağırmak için tıklayın , yenilenecektir.
Tuval Kullanarak Geliştirin
Sayfada tuval olması gereken düğüm
<canvas id="canvas" width="100" height="50"></canvas>Tuvali Kullanmanız için js kodu
let canvas = document.querySelector('#canvas');
let ctx =canvas.getContext('2d');Dairecikler Ekleyin
function randomNumber(number){
return Math.random()*number
}
function drawArc(randomRange){
let x = randomNumber(canvas.width);
let y = randomNumber(canvas.height);
let r = randomNumber(randomRange)+2;
let to16Sting = randomto16Sting();
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.fillStyle = to16Sting;
ctx.fill();
ctx.strokeStyle= to16Sting;
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
}Rendering (etkiyi görmek için tuval 10 kat büyütülür)Metini Renklendir
Tasarım kodu aşağıdadır
metin döndürülür
function randomto16Sting (){
return '#'+parseInt(randomNumber(0xFFFFFF)).toString(16);
}
function drawText(dataArray){
// ctx.translate(0,0);
ctx.font = "26px Gaoel";
ctx.textAlign ='center';
ctx.textBaseline ='middle';
ctx.fillText(dataArray[0],20,25);
ctx.fillStyle = randomto16Sting();
ctx.fillText(dataArray[1],50,25);
ctx.fillStyle = randomto16Sting();
ctx.fillText(dataArray[2],80,25);
ctx.fillStyle = randomto16Sting();
}Sonuç
Yazıya Döndürme Kodu Ekleyebilirsiniz
Dönme açısı tasarım kodu
function randomRotate(){
let arr = [];
let arr1 =[];
let count = 0;
while(count < 3 ){
switch (count) {
case 0:
arr.push(randomNumber(10))
break;
case 1:
arr.push(randomNumber(10))
break;
case 2:
arr.push(randomNumber(10))
let sum = arr.reduce((a,b) =>{
return a+b;
},0)
if(Math.max(...arr)/sum > 0.6){
arr[arr.indexOf(Math.max(...arr))] = - sum/(sum*0.6);
}else{
arr[arr.indexOf(Math.max(...arr))] = - Math.max(...arr);
}
arr1 = arr.map(element=>{
return element*Math.PI/180;
})
break;
default:
break;
}
count ++ ;
}
preRotateDeg.unshift(arr1);
return arr1
}yazı tipi kullanım kodu function drawText(dataArray){
// ctx.translate(0,0);
ctx.font = "26px Gaoel";
ctx.textAlign ='center';
ctx.textBaseline ='middle';
let rotateNumber = randomRotate()
ctx.rotate(-preRotateDeg[1][0])
ctx.rotate(rotateNumber[0]);
ctx.fillText(dataArray[0],20,25);
ctx.fillStyle = randomto16Sting();
ctx.rotate(-preRotateDeg[1][1])
ctx.rotate(rotateNumber[1]);
ctx.fillText(dataArray[1],50,25);
ctx.fillStyle = randomto16Sting();
ctx.rotate(-preRotateDeg[1][2])
ctx.rotate(rotateNumber[2]);
ctx.fillText(dataArray[2],80,25);
ctx.fillStyle = randomto16Sting();
}Tüm Kodları İsterim Diyorsanız Buyrun<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.verificationCode{
width: 100px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
user-select: none;
cursor: pointer;
}
.inputNumber{
padding: 9px;
width: 70px;
margin-left: 15px;
font-size: 24px;
}
.inputNumber::-webkit-inner-spin-button{
appearance: none;
}
.baibai{
display: flex;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="baibai">
<div class="verificationCode">
<canvas id="canvas" width="100" height="50"></canvas>
</div>
<label style="line-height: 50px;height: 50px;margin: 0 15px;"> Sonuç</label>
<input class="inputNumber" type="number">
</div>
<script>
let canvas = document.querySelector('#canvas');
let ctx =canvas.getContext('2d');
let verificationCodeNode = document.querySelector('.verificationCode');
let inputNode = document.querySelector('.inputNumber');
let preRotateDeg =[[0,0,0]];
randomOption(inputNode);
verificationCodeNode.addEventListener('click',()=>{
randomOption(inputNode);
if(preRotateDeg.length == 3){
preRotateDeg.pop()
}
})
function randomto16Sting (){
return '#'+parseInt(randomNumber(0xFFFFFF)).toString(16);
}
function randomNumber(number){
return Math.random()*number
}
function randomRotate(){
let arr = [];
let arr1 =[];
let count = 0;
while(count < 3 ){
switch (count) {
case 0:
arr.push(randomNumber(10))
break;
case 1:
arr.push(randomNumber(10))
break;
case 2:
arr.push(randomNumber(10))
let sum = arr.reduce((a,b) =>{
return a+b;
},0)
if(Math.max(...arr)/sum > 0.6){
arr[arr.indexOf(Math.max(...arr))] = - sum/(sum*0.6);
}else{
arr[arr.indexOf(Math.max(...arr))] = - Math.max(...arr);
}
arr1 = arr.map(element=>{
return element*Math.PI/180;
})
break;
default:
break;
}
count ++ ;
}
preRotateDeg.unshift(arr1);
return arr1
}
function drawArc(randomRange){
let x = randomNumber(canvas.width);
let y = randomNumber(canvas.height);
let r = randomNumber(randomRange)+2;
let to16Sting = randomto16Sting();
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.fillStyle = to16Sting;
ctx.fill();
ctx.strokeStyle= to16Sting;
ctx.lineWidth = 1;
ctx.stroke();
ctx.closePath();
}
function drawLine(randomRange){
ctx.beginPath();
let x1 = randomNumber(canvas.width - 10)+10;
let y1 = randomNumber(canvas.height - 10)+10;
let x2 = randomNumber(canvas.width - 10)+10;
let y2 = randomNumber(canvas.height - 10)+10;
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.strokeStyle= randomto16Sting();
ctx.lineWidth=randomNumber(randomRange)+1;
ctx.stroke();
ctx.closePath();
}
function drawText(dataArray){
ctx.font = "26px Gaoel";
ctx.textAlign ='center';
ctx.textBaseline ='middle';
let rotateNumber = randomRotate()
ctx.rotate(-preRotateDeg[1][0])
ctx.rotate(rotateNumber[0]);
ctx.fillText(dataArray[0],20,25);
ctx.fillStyle = randomto16Sting();
ctx.rotate(-preRotateDeg[1][1])
ctx.rotate(rotateNumber[1]);
ctx.fillText(dataArray[1],50,25);
ctx.fillStyle = randomto16Sting();
ctx.rotate(-preRotateDeg[1][2])
ctx.rotate(rotateNumber[2]);
ctx.fillText(dataArray[2],80,25);
ctx.fillStyle = randomto16Sting();
}
function randomOption(inputNode){
let firstNumber = Math.ceil(Math.random(1)*10);
let operationNumber = Math.ceil(Math.random()*4);
let secodeNumber = Math.ceil(Math.random(1)*10);
let answer = 0;
let mul = 0;
switch (operationNumber) {
case 1:
operation="+";
answer = firstNumber+secodeNumber;
break;
case 2:
operation="-"
if(firstNumber < secodeNumber){
mul = firstNumber ;
firstNumber = secodeNumber;
secodeNumber = mul;
}
answer = firstNumber - secodeNumber;
break;
case 3:
operation="×"
answer = firstNumber*secodeNumber;
break;
case 4:
operation="÷"
let answerFirst = firstNumber*secodeNumber;
mul = firstNumber ;
firstNumber = answerFirst;
answer = mul;
break;
default:
break;
}
let dataArray = [firstNumber,operation,secodeNumber,answer];
inputNode.value = dataArray[3];
ctx.clearRect(0,0,canvas.width,canvas.height)
for (let index = 0; index < 60; index++) {
drawArc(15);
}
for (let index = 0; index < 6; index++) {
drawLine(4);
}
drawText(dataArray);
}
</script>
</body>
</html> 
