با جاوااسکریپت یا اچ تی ام ال

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

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

**hossin.esm** · شنبه 14 اسفند 1389, 11:59 صبح

کد 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">&nbsp;</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 عصر

کد 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">&nbsp;</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 عصر

کد HTML:

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

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

کد HTML:

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 عصر

کد 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;">&nbsp;</td>
   
    <td id="green" style="background:#0F0;color:#FFF;">&nbsp;</td>
  
    <td id="blue" style="background:#00F;color:#FFF;">&nbsp;</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>

نام تاپیک: با جاوااسکریپت یا اچ تی ام ال

ابزار های تاپیک

نمایش

با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

نقل قول: با جاوااسکریپت یا اچ تی ام ال

قوانین ایجاد تاپیک در تالار