html과 javascript가있는 파일이 있습니다. 텍스트 상자에 입력 된 아랍어 알파벳에 대한 값의 합계를 보여줍니다. ا ب ج د ح و ز와 같은 텍스트를 입력하여 샘플을 확인할 수 있으며 하단에이 숫자에 대한 값의 합계가 표시됩니다. 결과 텍스트와 결과 값을 h1로 만들고 + sum으로 계산되는 결과 뒤에 상자를 어떻게 만들 수 있는지 알려주십시오. 이 이미지와 같은 스크립트 끝에. 결과를 보여주고 싶은 이미지의 링크.
<!DOCTYPE html>
<html dir="rtl" lang="ar">
<head>
<meta charset="UTF-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta content="description" name="description">
<meta name="google" content="notranslate" />
<meta content="Mashup templates have been developped by Orson.io team" name="author">
<!-- Disable tap highlight on IE -->
<meta name="msapplication-tap-highlight" content="no">
<link href="./assets/apple-touch-icon.png" rel="apple-touch-icon">
<link href="./assets/favicon.ico" rel="icon">
<title>title</title>
<link href="./main.a3f694c0.css" rel="stylesheet"></head>
<body>
<!-- Add your content of header -->
<header>
<nav class="navbar navbar-fixed-top navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle uarr collapsed" data-toggle="collapse" data-target="#navbar-collapse-uarr">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="./index.html" title="">
<img src="./assets/images/mashuptemplate.svg" class="navbar-logo-img" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-uarr">
<ul class="nav navbar-nav navbar-right">
<li><a href="./index.html" title="" class="active"><h4>home</h4></a></li>
<li><a href="./1.html" title=""><h4> 1</h4></a></li>
<li><a href="./2.html" title=""><h4> 2 </h4></a></li>
<li><a href="./3.html" title=""><h4> 3</h4></a></li>
<li><a href="./4.html" title=""><h4> 4</h4></a></li>
<li><a href="./5.html" title=""><h4> 5</h4></a></li>
<li><a href="./6.html" title=""><h4><span style="color: #ff0000;">6</span></h4></a></li>
</ul>
</div>
</div>
</nav>
</header>
<div class="section-container border-section-container">
<div class="container">
<div class="row">
<div class="col-md-12 section-container-spacer">
<div class="text-center">
<h2>textbox sample<span style="color: #ff0000;"></span></h2>
<h3> enter your text here:</h3>
<form name="chronform" action="">
<input id="chr" type="text" name="chrtext" onkeyup="tashvalue(form.rad[1].checked,document.getElementById('chr').value,form.calr[0].checked)" class="urdu" dir="rtl" style="height:3em;line-height:3em;;width:100%;font-size: 200%;">
<h3> <i>تشدید</i> :</h3>
<INPUT TYPE="radio" NAME="rad" VALUE="1" onClick="tashvalue(form.rad[1].checked,document.getElementById('chr').value,form.calr[0].checked)"> 1 time
<br>
<INPUT TYPE="radio" NAME="rad" VALUE="2" onClick="tashvalue(form.rad[1].checked,document.getElementById('chr').value,form.calr[0].checked)" checked> 2 time
<h4>calender</h4>
<INPUT TYPE="radio" NAME="calr" VALUE="H" onClick="tashvalue(form.rad[1].checked,document.getElementById('chr').value,form.calr[0].checked)" checked> hijri
<br>
<INPUT TYPE="radio" NAME="calr" VALUE="G" onClick="tashvalue(form.rad[1].checked,document.getElementById('chr').value,form.calr[0].checked)">georgen
</form>
<p></p>
<span id="hijri"></span><span id="isvia"></span><span id="isvib"></span>
<script type="text/javascript">
function tashvalue(tashchoice,inputtext,calchoice) {
if (tashchoice == false) {
calcvalue(inputtext,calchoice);
}
else {removetashdeeds(inputtext,calchoice)}}
function removetashdeeds(origtext,cal1) {
var tashdeedindex;
tashdeedindex = origtext.indexOf('\u0651');
if (tashdeedindex > 0) {
removetashdeeds((origtext.substring(0,(tashdeedindex)) + origtext.charAt((tashdeedindex - 1)) + origtext.substring(tashdeedindex + 1)),cal1);
}
else {
calcvalue((origtext.substring(0,(tashdeedindex)) + origtext.charAt((tashdeedindex - 1)) + origtext.substring(tashdeedindex + 1)),cal1)}}
function calcvalue(text,cal2) {
var x;
var sum = 0;
x = text;
// sum += (66 * (x.match(/\uFDF2/g)||[]).length); // allah = 66
// sum += (786 * (x.match(/\uFDFD/g)||[]).length); // bismillah ar-rahman ar-rahim = 786
sum += (23 *(x.match(/\u0627|\u0622|\u0625/g)||[]).length); // alif or alif hamza = 1
sum += (52 * (x.match(/\u0628|\u067E/g)||[]).length); // be or pe = 2
sum += (62 * (x.match(/\u062C|\u0686/g)||[]).length); // jeem or cheem = 3
sum += (353 * (x.match(/\u062F|\u0688|\u0690/g)||[]).length); // dal, Dal, or Dal with four points = 4
sum += (34 * (x.match(/\u0647|\u06C1|\u06BE/g)||[]).length); // he or he-final or DChe = 5
sum += (234 * (x.match(/\u0648/g)||[]).length); // wow = 6
sum += (63 * (x.match(/\u0632|\u0698/g)||[]).length); // ze or zhe = 7
sum += (345 * (x.match(/\u062D/g)||[]).length); // barihe = 8
sum += (345 * (x.match(/\u0637/g)||[]).length); // toy = 9
sum += (345 * (x.match(/\u064A|\u06CC|\u06D2/g)||[]).length); // chhotiye with or without dots or bari ye = 10
sum += (345 * (x.match(/\u0643|\u06A9|\u06AF/g)||[]).length); // kaf, kafvariant, or gaaf = 20
sum += (345 * (x.match(/\u0644/g)||[]).length); // lam = 30
sum += (13 * (x.match(/\u0645/g)||[]).length); // meem = 40
sum += (345 * (x.match(/\u0646|\u06BA/g)||[]).length); // noon or noonghunna = 50
sum += (16 * (x.match(/\u0633/g)||[]).length); // seen = 60
sum += (137 * (x.match(/\u0639/g)||[]).length); // ain = 70
sum += (1342 * (x.match(/\u0641/g)||[]).length); // fe = 80
sum += (23 * (x.match(/\u0635/g)||[]).length); // suad = 90
sum += (62 * (x.match(/\u0642/g)||[]).length); // qaf = 100
sum += (1235 * (x.match(/\u0631|\u0691/g)||[]).length); // Re or re = 200
sum += (62 * (x.match(/\u0634/g)||[]).length); // sheen = 300
sum += (234 * (x.match(/\u062A|\u0679|\u067F/g)||[]).length); // te, Te, or Te (4 dots) = 400
sum += (234 * (x.match(/\u062B/g)||[]).length); // se = 500
sum += (62 * (x.match(/\u062E/g)||[]).length); // khe = 600
sum += (62 * (x.match(/\u0630/g)||[]).length); // zal = 700
sum += (62 * (x.match(/\u0636/g)||[]).length); // zuad = 800
sum += (62 * (x.match(/\u0638/g)||[]).length); // zoy = 900
sum += (23 * (x.match(/\u063A/g)||[]).length); // ghain = 1000
//sum += (? * (x.match(/\u06D3/g)||[]).length); // bariyehamza = ?
// sum += (? * (x.match(/\u0621/g)||[]).length); // hamzaalone = ?
// sum += (? * (x.match(/\u0654/g)||[]).length); // hamzaonhe = ?
// sum += (? * (x.match(/\u0629/g)||[]).length); // te marbuta = ?
// sum += (? * (x.match(/\u0622/g)||[]).length); // Alif madd = ?
// sum += (? * (x.match(/\u06C2/g)||[]).length); // hewhamza = ?
//sum += (7 * (x.match(/\u0649/g)||[]).length); // alif maqsura = ?
// sum += (? * (x.match(/\u06C3/g)||[]).length); // temarbuta = ?
if (cal2 == true) {
document.getElementById("hijri").innerHTML = " <h2>Value of your text is </h2>" +sum;
}
}
</script>이것이 당신에게 필요한 것입니까? html / css 스타일링의 문제입니다.
const sum = 23671;
document.getElementById("hijri").innerHTML = '<h2><div class="resultbox">Value of your text is</div><div class="resultbox redbox">'+sum+'</div></h2>';#hijri {
font-family: 'Trebuchet MS', Arial;
}
.resultbox {
float: left;
padding: 20px;
}
.redbox {
background-color: red;
}<div id="hijri">
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다