เดิมทีเราเป็นรูปแบบที่ยาวมากพร้อมตัวเลือกมากมาย ความคิดเห็นของลูกค้าไม่เป็นมิตรและมองเห็นได้ง่าย ดังนั้นจึงมีการปรับปรุงเพื่อให้เกิดความคืบหน้าหลายขั้นตอนและการใช้งานการส่งหลายครั้ง (อันที่จริงมีการส่งแบบฟอร์มเพียงครั้งเดียว)
แนวคิดการใช้งาน: โหลดตัวเลือกของแบบฟอร์มลงในหลาย divs หนึ่งรายการหนึ่งรายการและอื่น ๆ ซ่อน
เอฟเฟกต์มีดังนี้:
1. รหัส JavaScript
<script type = "text/javascript" src = "js/jQuery.js"> </script> <script type = "text/javascript" src = "js/jQuery-powerfloat.js"> </script> <link rel = "stylesheet" href = "css/powerfloat type = "text/javascript"> $ (function () {$ (". pwdtrigger"). powerfloat ({eventtype: "โฟกัส", targetMode: "เตือน", targetatr: "placeHolder", ตำแหน่ง: "2-1"}); $ ("#one"). ซ่อน (); $ ("#สอง"). show (); $ ("#grxx"). attr ("คลาส", "current_prev"); $ ("#zjxx"). attr ("คลาส", "ปัจจุบัน"); }} ฟังก์ชั่นสอง () {ถ้า (ยืนยัน ("ยืนยันการกระทำ?")) {$ ("#สอง") ซ่อน (); $ ("#สาม"). show (); $ ("#grxx"). attr ("คลาส", "เสร็จสิ้น"); $ ("#zjxx"). attr ("คลาส", "current_prev"); $ ("#qzxx"). attr ("คลาส", "ปัจจุบัน"); }} ฟังก์ชั่นสาม () {ถ้า (ยืนยัน ("ยืนยันการกระทำ?")) {$ ("#สาม"). ซ่อน (); $ ("#สี่"). show (); $ ("#grxx"). attr ("คลาส", "เสร็จสิ้น"); $ ("#zjxx"). attr ("คลาส", "เสร็จสิ้น"); $ ("#qzxx"). attr ("คลาส", "current_prev"); $ ("#qzfs"). attr ("คลาส", "ปัจจุบัน"); }} function reone () {if (ยืนยัน ("ยืนยันผลตอบแทน?")) {$ ("#one") show (); $ ("#สอง"). ซ่อน (); $ ("#grxx"). attr ("คลาส", "ปัจจุบัน"); $ ("#zjxx"). attr ("คลาส", ""); }} ฟังก์ชั่น retwo () {ถ้า (ยืนยัน ("ยืนยันผลตอบแทน?")) {$ ("#สาม") ซ่อน (); $ ("#สอง"). show (); $ ("#grxx"). attr ("คลาส", "current_prev"); $ ("#zjxx"). attr ("คลาส", "ปัจจุบัน"); $ ("#qzxx"). attr ("คลาส", ""); }} function rethree () {ถ้า (ยืนยัน ("ยืนยันผลตอบแทน?")) {$ ("#สี่") ซ่อน (); $ ("#สาม"). show (); $ ("#grxx"). attr ("คลาส", "เสร็จสิ้น"); $ ("#zjxx"). attr ("คลาส", "current_prev"); $ ("#qzxx"). attr ("คลาส", "ปัจจุบัน"); $ ("#qzfs"). attr ("คลาส", "สุดท้าย") ;; }} </script>2. รหัส CSS
<style type = "text/css">. flow_steps ul li {float: ซ้าย; ความสูง: 23px; Padding: 0 40px 0 30px; ความสูงบรรทัด: 23px; TEXT-ALIGN: CENTER; ความเป็นมา: URL (img/barbg.png) ไม่ซ้ำ 100% 0 #e4e4; Font-Weight: bold;}. flow_steps ul li.done {ตำแหน่งพื้นหลัง: 100% -46px; พื้นหลังสี:#ffeda2;}. flow_steps ul li.current_prev {ตำแหน่งพื้นหลัง: 100% -23px; พื้นหลังสี:#ffeda2;}. flow_steps ul li.current {color: #fff; พื้นหลังสี:#990d1b;}. flow_steps ul li.last {background-image: none;} </style>3. รหัส HTML
<body> <table> <tr> <td> <div> <ul style = "รายการสไตล์รายการ: ไม่มี"> <li id = "grxx"> ข้อมูลส่วนบุคคล </li> <li id = "zjxx"> ข้อมูลการปฏิเสธความรับผิดชอบ </li> <li id = "qzxx"> การลงทะเบียน </td> </tr> <tr> <td> <form action = ""> <div id = "หนึ่ง"> <table align = "center"> <tr> <td> ตำแหน่งที่ตั้ง: </td> <td> <อินพุตประเภท = "text" type = "text" placeholder = "โปรดป้อนนามสกุลภาษาจีน"/> </td> </tr> <tr> <td> ชื่อภาษาจีน: </td> <td> <อินพุต type = "text" placeholder = "โปรดป้อนชื่อภาษาจีน"/> </td> </tr> <tr> <td> /> </td> </tr> <tr> <td colspan = "2"> <button type = "ปุ่ม" onclick = "หนึ่ง ()"> ส่ง </button> </td> </tr> </table> </div> <div> id = "สอง" placeHolder = "โปรดป้อนหมายเลข id"/> </td> </tr> <tr> <td> วันหมดอายุจนถึง </td> <td> <อินพุตประเภท = "ข้อความ" placeholder = "โปรดป้อนหมายเลข ID"/> </td> </tr> <tr> <td> </tr> <tr> <td> หมายเลขติดต่อ </td> <td> <อินพุต type = "text" placeholder = "โปรดป้อนหมายเลขติดต่อขอแนะนำให้เป็นหมายเลขโทรศัพท์มือถือ"/> </td> </tr> <tr> <td> <button = ปุ่ม "ปุ่ม" onclick = "reone ()"> ก่อนหน้า </putous> </td> </tr> </table> </div> <div id = "สาม" style = "แสดง: ไม่มี"> <table align = "center"> <tr> <td> หมวดหมู่ sign-name </td> <td> <td> ไปที่สถานที่ </td> <td> <อินพุต type = "text" placeholder = "โปรดป้อนปลายทาง"/> </td> </tr> <tr> <td> ประเภทวีซ่า </td> <td> <อินพุตประเภท = "ข้อความ" onclick = "สาม ()"> ส่ง </button> </td> <td> <button type = "ปุ่ม" onclick = "retwo ()"> ก่อนหน้า </button> </td> </td> </tr> </table> </div> <div id = "สี่" type = "text" placeholder = "โปรดป้อนวิธีการรวบรวมหลักฐาน"/> </td> </tr> <tr> <td> <button type = "ปุ่ม" onclick = ""> ส่ง </button> </td> <td> <button type = "button" onclick = "Rethree () </td> </tr> </table> </body> </html>
ดาวน์โหลดซอร์สโค้ด: http://xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้และฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนในการเรียนรู้การเขียนโปรแกรม JavaScript