في المقالة السابقة ، قدمت لك المعرفة ذات الصلة حول مثال توضيح نموذج تشغيل JS (الجزء 2). ستقدمك هذه المقالة إلى مثال توضيح نموذج تشغيل JavaScript (الجزء 2). التفاصيل المحددة هي كما يلي:
1. حقل النص
<نوع الإدخال = "النص" />
------------------------------------------------------------------------------------------------------------------------------------
تشغيل قيمة حقل النص
مجموعة خصائص القيمة أو احصل على القيمة
------------------------------------------------------------------------------------------------------------------------------------
2. أزرار الراديو والمختلطة
<إدخال نوع = "راديو" /> <إدخال type = "مربع الاختيار" />
------------------------------------------------------------------------------------------------------------------------------------
إرجاع محدد أو تعيين الحالة المحددة للخيار الواحد
خطأ محدد لم يتم تحديده
تحصل سمة القيمة على القيمة المحددة ويجب أولاً تحديد الحالة المحددة.
------------------------------------------------------------------------------------------------------------------------------------
مثال: حدد الكل/لا حدد الكل/عكس
1.PNG
1. هيكل
<Body> <form name = "myform" Action = "#" method = "post" id = "form1"> <script type = "text /javaScript"> for (var i = 0 ؛ i <20 ؛ i ++) {document.write ("<input type = 'checkbox =' nums ' />"+(i+1)+") name = 'radios'> حدد all ") ؛ document.write (" <input type = 'radio' name = 'radios'> حدد All ") ؛ document.write (" <input type = 'radio' name = 'radios'> حدد All ") ؛ document.write ( name = 'radios'> anti-select ") ؛ </script> </part> </body>2.Script Script
2.1 باستخدام طريقة الاتصالات
<script type = "text/javaScript"> window.onload = function () {var nums = document.getElementSbyName ("nums") ؛ var radios = document.getElementsByName ("radios") ؛ fun (nums ، i ، radios) ؛ function fun (a ، b ، c) {b] i = 0 ؛ i <a.length ؛ i ++) {a [i] .checked = true ؛}} آخر إذا (b == 1) {for (var i = 0 ؛ i <a.length ؛ i ++) {a [i] .checked = false ؛ i = 0 ؛ i <A.Length ؛ i ++) {if (a [i] .checked) {a [i]2.2 باستخدام طريقة إنشاء وظائف مجهولة في الإغلاق
<script type = "text/javaScript"> window.onload = function () {var nums = document.getElementSbyName ( i = 0 ؛ i <radios.length ؛ i ++) {(function (a) {radios [a] .onclick = function () {if (a == 0) {for (var i = 0 ؛ i <nums.length ؛ i ++) {nums [i] .Checked =}}} els (a == 1) {var i = 0 ؛ i <nums.length ؛ i ++) {nums [i] .checked = false ؛}} آخر إذا (a == 2) {for (var i = 0 ؛ i <nums.length ؛ i ++) {if (nums [i] .checked) {nums [i] }) (i) ؛}} </script>3. سحب الصندوق لأسفل
<form name = "myform"> <select name = "sels"> <point> peking University </point> <tove> chang'an University </point> <borting> Nanjing University </point
------------------------------------------------------------------------------------------------------------------------------------
مجموعة محددة أو العودة إلى الحالة المحددة من المربع المنسدلة
خطأ محدد لم يتم تحديده
تم تحديد أو إرجاع رقم الفهرس المحدد في المربع المنسدل أو إرجاعه
------------------------------------------------------------------------------------------------------------------------------------
مثال 1: حدد جامعة تشانغان
<script> var sels = document.myform.sels ؛ // var sels = document.myform.sels.options ؛ // (من الممكن أيضًا) sels [1] .selected = true ؛ </script>
أو
<script> var sels = document.myform.sels ؛ // var sels = document.myform.sels.options ؛ // (من الممكن أيضًا) sels.selectedEx = 1 ؛ </script>
مثال 2: سعر الوحدة * الكمية = إجمالي السعر
1.PNG
1. هيكل
<Body> <form name = "myform" action = "#" method = "post" id = "form1"> سعر الوحدة: <input type = "text" name = "price" value = "200"> <select name = "count"
2.Script Script
<script type = "text/javaScript"> window.onload = function () {var price = document.myform.price ؛ var count = document.myform.count ؛ var total = document.myform.total ؛ count.onchange = function () {total.value = parseint (price.value)*(count.sextizeDizendex+1) ؛ }} </script>4. منطقة النص
<textarea name = "info" rows = "7" cols = "60"> </textarea>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
تقوم القيمة بإرجاع أو تحدد قيمة منطقة النص
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
مثال: اكتشف ديناميكيًا طول الأحرف التي تم إدخالها في منطقة النص
1.PNG
1. هيكل البنية:
<Body> <div id = "content"> يمكن إدخال ما مجموعه 20 حرفًا ، وتم إدخال 0 ، ويمكن إدخال 20 </div> <form name = "myform" Action = "#" method = "post" id = "form1"> <textarea name = "info" cols = "60"
2.Script Script:
<script type = "text/javaScript"> window.onload = function () {var content = document.getElementById ("content") ؛ var info = document.myform.info ؛ info.onkeyup = info.onkeydown = function () {var str = info تم إدخال أحرف "+strs+" ، ويمكن أيضًا إدخال "+طول+" ، ويمكن أيضًا إدخال "+(strs-length)+" s " i = 0 ؛ i <str.length ؛ i ++) {if (str.charcodeat (i)> = 0 && str.charcodeat (i) <= 255) {// english num ++ ؛} آخر {// الصيني num+= 2 ؛}}5. التحقق من الشكل
تم إطلاق حدث onsubmit عند تقديم النموذج
------------------------------------------------------------------------------------------------------------------------------------
<form name = "myform" Action = "www.baidu.com" method = "post" onsubmit = "return check (this)"> </pump> return false ؛ // منع السلوك الافتراضي النموذج
------------------------------------------------------------------------------------------------------------------------------------
6. إرسال الطريقة
يتم استخدام هذه الطريقة لتنفيذ التقديم التلقائي
لا يمكن استخدام الحدث onSubmit إلا للتقديم يدويًا
ما سبق هو مثال على توضيح نموذج تشغيل JavaScript الذي أدخله المحرر (الجزء 2). آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!