الفريق العربي للبرمجةأرشيف المنتديات · 2000 – 2023
نسخة أرشيفية للقراءة فقط — التسجيل والمشاركة مغلقان، والمحتوى محفوظ كما كان.

كيف اجعل هذا السكربت الخاص بتغيير لون الخلفيه , يتم حفظه فى الكوكيز ؟

بدأه nader meky في 17 أبريل 2012 · 3 رد · 1,974 مشاهدة · في قسم البرمجة بــ Javascript
مشاركة: واتساب X فيسبوك تيليجرام
#1 صاحب الموضوع 
<div style="cursor: pointer; opacity: 1; position: fixed; right: 10px; top: 5px;">


<script type="text/**********">
function bgChange(bg)
{
document.body.style.background=bg;
}
</script>
<table border="1" height="20" style="width: 300px;"><tbody>
<tr> <td bgcolor="white" onclick="bgChange('')">
</td><td bgcolor="#699AB8" onclick="bgChange('#699AB8')">
</td><td bgcolor="#000000" onclick="bgChange('#000000')">
</td><td bgcolor="#FF00FF" onclick="bgChange('#FF00FF')">
</td><td bgcolor="#006400" onclick="bgChange('#006400')">
</td><td bgcolor="#FF6600" onclick="bgChange('#FF6600')">
</td><td bgcolor="#480082" onclick="bgChange('#480082')">
</td><td bgcolor="#dc143c" onclick="bgChange('#dc143c')">
</td><td bgcolor="#D4E3EA" onclick="bgChange('#D4E3EA')">
</td><td bgcolor="#B40404" onclick="bgChange('#B40404')">
</td><td bgcolor="#9A2EFE" onclick="bgChange('#9A2EFE')">
</td><td bgcolor="#236c95" onclick="bgChange('#236c95')">


</td></tr>
</tbody></table>
</div>

هذا هو السكربت و يعمل و عند الضغط على اى لون يتم تغيير خلفيه الموقع لهذا اللون و لكن عند تحديث الصفحه و عمل ريفرش يعود اللون الاصلى مره اخرى

لذلك هل لاحد ان يربط لى هذا السكربت بفنكشن تجعل اختيار اللون يحفظ تلقائيا فى الكوكيز حتى يثبت اللون اللى اخترته عند تحديث الصفحه ؟

انتظر ردكم يا اخوانى بارك الله فيكم

#2

التوابع التالية مأخوذة من موقع:

<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca;
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}
</script>

بعد تضمينها في الصفحة، تقوم باستدعاء التابع createCookie() داخل التابع bgChange() الذي يقوم بتغيير اللون، على النحو التالي:

createCookie('bgcolor','#fefef0',360)

طبعاً ستقوم باستخدام اللون الذي تم تمريره من خلال bgChange() بدلاً من القيمة الثابتة التي قمت كاستخدامها في مثالي.

bgcolor هو اسم الـ cookie، ويمكن أن يكون أي اسم تشاء.

360 هو عدد الأيام التي ستبقى الـ cookie صالحة للاستخدام، بعدها تصبح expired ويتم حذفها.

الآن، عليك كتابة كود ليعمل عند فتح الصفحة مباشرة، ليقوم بقراءة قيمة الـ cookie ويقوم باستدعاء bgChange بالقيمة المعادة من

var color = readCookie('bgcolor')

يمكنك من أجل هذا استخدام jQuery لتنفيذ الكود حال جاهزية الـ document أو يمكنك اعتماد الحدث window.onload

سؤال: ماذا لو قام المستخدم بتغيير اللون مرة أخرى لتجربة اللون الأفضل؟

جواب: قم باستدعاء eraseCookie('bgcolor') في التابع bgChange() قبل استدعاء createCookie() لإنشاء واحدة جديدة.

Do as I say, not as I do

We are Anonymous. We are Legion. We don't forgive. We don't forget

#3
Xacker كتب:

التوابع التالية مأخوذة من موقع:

<script type="text/javascript">
function createCookie(name,value,days) {
	if (days) {
		var date = new Date();
		date.setTime(date.getTime()+(days*24*60*60*1000));
		var expires = "; expires="+date.toGMTString();
	}
	else var expires = "";
	document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
	var nameEQ = name + "=";
	var ca = document.cookie.split(';');
	for(var i=0;i < ca.length;i++) {
		var c = ca;
		while (c.charAt(0)==' ') c = c.substring(1,c.length);
		if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
	}
	return null;
}

function eraseCookie(name) {
	createCookie(name,"",-1);
}
</script>

بعد تضمينها في الصفحة، تقوم باستدعاء التابع createCookie() داخل التابع bgChange() الذي يقوم بتغيير اللون، على النحو التالي:

createCookie('bgcolor','#fefef0',360)

طبعاً ستقوم باستخدام اللون الذي تم تمريره من خلال bgChange() بدلاً من القيمة الثابتة التي قمت كاستخدامها في مثالي.

bgcolor هو اسم الـ cookie، ويمكن أن يكون أي اسم تشاء.

360 هو عدد الأيام التي ستبقى الـ cookie صالحة للاستخدام، بعدها تصبح expired ويتم حذفها.

الآن، عليك كتابة كود ليعمل عند فتح الصفحة مباشرة، ليقوم بقراءة قيمة الـ cookie ويقوم باستدعاء bgChange بالقيمة المعادة من

var color = readCookie('bgcolor')

يمكنك من أجل هذا استخدام jQuery لتنفيذ الكود حال جاهزية الـ document أو يمكنك اعتماد الحدث window.onload

سؤال: ماذا لو قام المستخدم بتغيير اللون مرة أخرى لتجربة اللون الأفضل؟

جواب: قم باستدعاء eraseCookie('bgcolor') في التابع bgChange() قبل استدعاء createCookie() لإنشاء واحدة جديدة.

اخى انا اعلم css , html فقط

لكن الجيكويرى و الجافا سكربت خبرتى قليله جدا .. فهل يمكنك ان تكتب لى الكود النهائى بعد ربطه بالـ jquery لكى اضعه بالموقع فيعمل فورا

لانى حاولت افهم ما كتبته لكى اطبق لكنى فشلت .. اتمنى ان لا اكون قد وضعت لك عبـء ثقيلا فى طلبى .. جزاك الله خير

#4

السلام عليكم

أخي نادر أشكرك على سؤالك لأنك أرجعت لي سنين مضت بمجرد قراءة إسم الأخ المبدع Xacker

ولي مدة لم استطع المشاركة في الفريق : ندعوا الله أن ييسر لنا الظروف لنستطيع الرجوع للفريق بمساهمات جيدة إن شاء الله

مثل ماتفضل أخي Xacker نضيف الفانكش التالي : 

function newf()
{
var color = readCookie('bgcolor')
document.body.style.background=color;

}

استدعيه عن تحميل الصفحة مثل : 

<body onload="newf()">

والكود بيصير معك بشكل نهائي كما يلي : 

<body onload="newf()">
<div style="cursor: pointer; opacity: 1; position: fixed; right: 10px; top: 5px;">

<table border="1" height="20" style="width: 300px;"><tbody>
<tr> <td bgcolor="white" onclick="bgChange('')">
</td><td bgcolor="#699AB8" onclick="bgChange('#699AB8')">
</td><td bgcolor="#000000" onclick="bgChange('#000000')">
</td><td bgcolor="#FF00FF" onclick="bgChange('#FF00FF')">
</td><td bgcolor="#006400" onclick="bgChange('#006400')">
</td><td bgcolor="#FF6600" onclick="bgChange('#FF6600')">
</td><td bgcolor="#480082" onclick="bgChange('#480082')">
</td><td bgcolor="#dc143c" onclick="bgChange('#dc143c')">
</td><td bgcolor="#D4E3EA" onclick="bgChange('#D4E3EA')">
</td><td bgcolor="#B40404" onclick="bgChange('#B40404')">
</td><td bgcolor="#9A2EFE" onclick="bgChange('#9A2EFE')">
</td><td bgcolor="#236c95" onclick="bgChange('#236c95')">


</td></tr>
</tbody></table>
</div>
<script>

function newf()
{
var color = readCookie('bgcolor')
document.body.style.background=color;

}

function bgChange(bg)
{
document.body.style.background=bg;
createCookie('bgcolor',bg,360);
}

function createCookie(name,value,days) {
        if (days) {
                var date = new Date();
                date.setTime(date.getTime()+(days*24*60*60*1000));
                var expires = "; expires="+date.toGMTString();
        }
        else var expires = "";
        document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for(var i=0;i < ca.length;i++) {
                var c = ca;
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
        }
        return null;
}

function eraseCookie(name) {
        createCookie(name,"",-1);
}
</script>
</body>

تم تعديل هذه المشاركة بواسطة موفق جمال زكريا في 16 مايو 2012 في 15:02

مواضيع مشابهة

عدد الزوار حالياً

المتواجدون خلال آخر دقيقتين · يتحدّث كل ٣٠ ثانية

—الإجمالي—أعضاء مسجّلون—زوار بدون تسجيل

جارٍ التحقق من المتواجدين…