سلام
چطوری میشه با کلیک کردن روی یه نوشته تغییراتی در سلول جدول ایجاد کنیم؟
مثلاً رنگ یا ... سلول رو تغییر بدیم؟
با جاوااسکریپت
Printable View
سلام
چطوری میشه با کلیک کردن روی یه نوشته تغییراتی در سلول جدول ایجاد کنیم؟
مثلاً رنگ یا ... سلول رو تغییر بدیم؟
با جاوااسکریپت
کد HTML:<!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=color;
}
</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>
دوست عزیز عالی بود ممنون
حالا اگه بخوام هربار که رو مثلاً لینک قرمز کلیک میکنم رنگش پررنگ بشه باید چیکار کنم؟یعنی رنگ زیاد بشه تو همون رنج
کد HTML:<!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>
اگه بخوام کد چهار رقمی بدم باید چیکار کنم؟
00 کد قرمزه
کد آبی چی میشه؟هر چی زدم تو رنج قرمزه فقط هم دورقمی میشه زد!
کد سبزم میخوام
دوست عزیز رنگ به صورت RGB است
که R نشان دهنده رنگ قرمز(red)
, G نشان دهنده رنگ سبز(green)
, B نشان دهنده رنگ آبی(blue)
و رنج تغییر هر رنگ میتونه یک یا دو رقم hex باشه برای یک رقم بین 0-F و برای دو رقم بین 00-FF باشه
که طیف رنگ دو رقم بیشتر هست
مثال
قرمز
یک رقمی F00
دورقمی FF0000
برای تعیین شدت رنگ میتونید بازه (رنج ) رنگ را تغییر دهید.
بازه را چطوری تغییر بدم؟
var c=n.toString(16)+'00';
تو خط بالا بجای 00 من میزنم ff0000 قبول نمیکنه!!!
فقط میتونم عدد 2رقمی بین 00 تا 99 بهش بدم!
یه تغییراتی خودم دادم و امتحان کردم ولی بازم کار نداد!!!!
البته برای تعیین رنگ باید از # قبل از ان استفاده کنید.کد HTML:var c=FF0000;
document.getElementById('ch').style.background='#'+c;
این کد برای تبدیل عدد به مبنای 16 استفاده میشه.کد HTML:n.toString(16)
اگه بخوام از کد
var c=FF0000;
document.getElementById('ch').style.background='#' +c;
استفاده کنم دیگه اصلاً با هر بار کلیک کردن درجه رنگ تغییری نمیکنه!یعنی متغیر n اصلاً کاری نمیکنه!!!!
کد HTML:<!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>