مبتدی: با جاوااسکریپت یا اچ تی ام ال [بایگانی]

badrang

شنبه 14 اسفند 1389, 11:30 صبح

سلام
چطوری میشه با کلیک کردن روی یه نوشته تغییراتی در سلول جدول ایجاد کنیم؟
مثلاً رنگ یا ... سلول رو تغییر بدیم؟
با جاوااسکریپت

hossin.esm

شنبه 14 اسفند 1389, 11:59 صبح

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
function change(color)
{
document.getElementById('ch').style.background=col or;
}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td id="ch"> </td>
</tr>

</table>
<span style="cursor:pointer;" onclick="change('red')">change background to red</span>
<br />
<a href="javascript:void(0)" onclick="change('blue')">change background to blue</a>
</body>
</html>

badrang

شنبه 14 اسفند 1389, 19:16 عصر

دوست عزیز عالی بود ممنون
حالا اگه بخوام هربار که رو مثلاً لینک قرمز کلیک میکنم رنگش پررنگ بشه باید چیکار کنم؟یعنی رنگ زیاد بشه تو همون رنج

hossin.esm

شنبه 14 اسفند 1389, 19:59 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var n=16;
function change()
{
if(n>0)
{
n--;

}
var c=n.toString(16)+'00';
document.getElementById('c').innerHTML='#'+c;
document.getElementById('ch').style.background='#' +c;

}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td id="ch"> </td>
</tr>

</table>
<a href="javascript:void(0)" onclick="change()">change background </a>
<span id="c"> </span>
</body>
</html>

badrang

یک شنبه 15 اسفند 1389, 19:50 عصر

اگه بخوام کد چهار رقمی بدم باید چیکار کنم؟
00 کد قرمزه
کد آبی چی میشه؟هر چی زدم تو رنج قرمزه فقط هم دورقمی میشه زد!
کد سبزم میخوام

hossin.esm

یک شنبه 15 اسفند 1389, 21:09 عصر

دوست عزیز رنگ به صورت RGB است
که R نشان دهنده رنگ قرمز(red)
, G نشان دهنده رنگ سبز(green)
, B نشان دهنده رنگ آبی(blue)

و رنج تغییر هر رنگ میتونه یک یا دو رقم hex باشه برای یک رقم بین 0-F و برای دو رقم بین 00-FF باشه
که طیف رنگ دو رقم بیشتر هست
مثال
قرمز
یک رقمی F00
دورقمی FF0000

برای تعیین شدت رنگ میتونید بازه (رنج ) رنگ را تغییر دهید.

badrang

یک شنبه 15 اسفند 1389, 21:32 عصر

بازه را چطوری تغییر بدم؟
var c=n.toString(16)+'00';
تو خط بالا بجای 00 من میزنم ff0000 قبول نمیکنه!!!
فقط میتونم عدد 2رقمی بین 00 تا 99 بهش بدم!
یه تغییراتی خودم دادم و امتحان کردم ولی بازم کار نداد!!!!

hossin.esm

یک شنبه 15 اسفند 1389, 21:51 عصر

var c=FF0000;
document.getElementById('ch').style.background='#' +c;

البته برای تعیین رنگ باید از # قبل از ان استفاده کنید.

n.toString(16)
این کد برای تبدیل عدد به مبنای 16 استفاده میشه.

badrang

یک شنبه 15 اسفند 1389, 22:33 عصر

اگه بخوام از کد
var c=FF0000;
document.getElementById('ch').style.background='#' +c;
استفاده کنم دیگه اصلاً با هر بار کلیک کردن درجه رنگ تغییری نمیکنه!یعنی متغیر n اصلاً کاری نمیکنه!!!!

hossin.esm

یک شنبه 15 اسفند 1389, 22:55 عصر

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
var n1=16;
function red()
{
if(n1>0)
{
n1--;

}
var c=n1.toString(16)+'00';
document.getElementById('red').innerHTML='#'+c;
document.getElementById('red').style.background='# '+c;

}
var n2=16;
function green()
{
if(n2>0)
{
n2--;

}
var c='0'+n2.toString(16)+'0';
document.getElementById('green').innerHTML='#'+c;
document.getElementById('green').style.background= '#'+c;

}
var n3=16;
function blue()
{
if(n3>0)
{
n3--;

}
var c='00'+n3.toString(16);
document.getElementById('blue').innerHTML='#'+c;
document.getElementById('blue').style.background=' #'+c;

}
</script>
</head>
<body>
<table width="200" border="1">
<tr>
<td id="red" style="background:#F00;color:#FFF;"> </td>

<td id="green" style="background:#0F0;color:#FFF;"> </td>

<td id="blue" style="background:#00F;color:#FFF;"> </td>
</tr>
<tr>
<td><a href="javascript:void(0)" onclick="red()">change background </a></td>

<td><a href="javascript:void(0)" onclick="green()">change background </a></td>

<td><a href="javascript:void(0)" onclick="blue()">change background </a></td>
</tr>

</table>

</body>
</html>