css样式中的[class|=switch] 是什么意思

今天做项目的时候使用了bootstrap的时间插件和滑动按钮的插件,但是时间插件的那一列因为[class|=switch] 的css导致了样式失调,所以想知道这个是什么意思

1个回答

选择 class 属性值以 "switch" 开头的所有元素。

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

MUI框架中功能效果的class样式修改问题

MUI框架中使用功能效果,需要修改其中的样式,原有的样式也有class类,此时如何进行样式修改或者覆盖这两种方式,来达到效果?或者哪个才是最优的方法

使用外部CSS通过Laravel View Composer为页面的一部分设置样式

<div class="post-text" itemprop="text"> <p>I'm trying to use external css to style a section of my page - specifically, the form section of my registration page. I'm using the default <code>app.css</code> that ships with Laravel. However, I don't want to include <code>app.css</code> in my html header as it gives me undesired effect on other parts of the page. So I want it to style only my html forms within the page. </p> <p>Currently, I've used either the <code>asset()</code> or <code>HTML::style()</code> methods like this within my form section: </p> <pre><code>@section('form') &lt;style&gt; @import "{{ asset('css/app.css') }}"; &lt;/style&gt; &lt;form&gt;...&lt;/form&gt; @endsection </code></pre> <p>OR</p> <pre><code>@section('form') {{ HTML::style('css/app.css') }} &lt;form&gt;...&lt;/form&gt; @endsection </code></pre> <p>Both method loads the style correctly, but affects the entire page instead of only the form elements.</p> <p>I tried using the <code>ViewComposer</code> class to solve this problem by setting a variable in ViewComposer to my desired style - returning it only when I request the required view:</p> <pre><code>class ViewComposer { public function compose(View $view) { $data = []; switch($view-&gt;getName()) { ... case 'sections.register': $this-&gt;data = ['style'=&gt;"&lt;style&gt; @import \"". asset('css/app.css') . "\"; &lt;/style&gt;"]; break; } return $view-&gt;with($this-&gt;data); } } </code></pre> <p>However, when I render the <code>sections.register</code> sub-view, I get the style variable like this:</p> <pre><code>@section('form') {{ $style ?? '' }} &lt;form&gt;...&lt;/form&gt; @endsection </code></pre> <p>the output on the browser is not parsed as css but displayed as-is:</p> <pre><code>&lt;style&gt; @import "{{ asset('css/app.css') }}"; &lt;/style&gt; </code></pre> <p>So, is there a way I can parse external css for only a given view section within the html page and can it be achieved using the ViewComposer class?</p> <p><strong>UPDATE:</strong> I was trying a few things and used this:</p> <pre><code>@section('form') {!! $style ?? '' !!} &lt;form&gt;...&lt;/form&gt; @endsection </code></pre> <p>The css is parsed but still applied to the entire page. I still need it applied to only the form section.</p> </div>

CSS checkbox 对应多个label 怎么设置label样式

点击11111 22222 33333 44444都可以实现多选框选中,但是只有44444是单独的label ,11111 22222 33333十多个label对应一个多选框,CSS为input[type="checkbox"]:checked+label。只有44444能应用样式。 完整代码: ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input[type="checkbox"]:checked+label{ color: red; } </style> </head> <body> <table> <tr> <td><input type="checkbox" id="check"></td> <td><label for="check">11111</label></td> <td><label for="check">22222</label></td> <td><label for="check">33333</label></td> <br> <input type="checkbox" id="ch"><label for="ch">444444444</label> </tr> </table> </body> </html> ```

PHP Sendmail发送的电子邮件内容在包含CSS内联样式时未显示

<div class="post-text" itemprop="text"> <p>I have a very strange problem that I can't seem to find out why. I know why it's apparently being caused, though ...which is when the HTML content of the email contains inline CSS styling. When I remove the inline styling, the email arrives fine. When I add it, it doesn't.</p> <p>I am running the script like this:</p> <pre><code>$text_message = 'HELLO! Some more email content goes here'; $html_message = '&lt;table&gt; &lt;tbody&gt;&lt;tr&gt; &lt;td class="mcnTextContent" style="padding-top: 9px;padding-right: 18px;padding-bottom: 9px;padding-left: 18px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;-ms-text-size-adjust: 100%;-webkit-text-size-adjust: 100%;color: #606060;font-family: Helvetica;font-size: 15px;line-height: 150%;text-align: left;" valign="top"&gt; &lt;h3 style="margin: 0;padding: 0;display: block;font-family: Helvetica;font-size: 18px;font-style: normal;font-weight: bold;line-height: 125%;letter-spacing: -.5px;text-align: left;color: #606060 !important;"&gt;HELLO!&lt;/h3&gt;Some more email content goes here &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt;&lt;/table&gt;'; $link = 'link'; $text_message = sprintf($text_message, $msg_details['name'], $link, $this-&gt;setts['sitename']); $html_message = sprintf($html_message, $msg_details['name'], $link, $this-&gt;setts['sitename']); send_mail($msg_details['email'], 'Message Received - ' . $setts['sitename'], $text_message, $this-&gt;setts['admin_email'], $html_message, null, $send); </code></pre> <p>And then the backend of the "send_mail" function is:</p> <pre><code>function send_mail($to, $subject, $text_message, $from_email, $html_message = null, $from_name = null, $send = true, $reply_to = null) { global $setts, $current_version; if ($send) { ## set date $tz = date('Z'); $tzs = ($tz &lt; 0) ? '-' : '+'; $tz = abs($tz); $tz = ($tz / 3600) * 100 + ($tz % 3600) / 60; $mail_date = sprintf('%s %s%04d', date('D, j M Y H:i:s'), $tzs, $tz); $uniq_id = md5(uniqid(time())); ## create the message body $html_message = ($html_message) ? $html_message : $text_message; $html_msg = "&lt;!-- " . $text_message . " --&gt; ". "&lt;html&gt;&lt;body&gt;". $html_message . "&lt;/body&gt;&lt;/html&gt;"; $from_name = (!empty($from_name)) ? $from_name : GMSG_MAIL_FROM_ADMIN; switch ($setts['mailer']) { case 'sendmail': ## send through the UNIX Sendmail function ## create header $header = "Date: " . $mail_date . " ". "Return-Path: " . $from_email . " ". "To: " . $to . " ". "From: " . $from_name . " &lt;" . $from_email . "&gt; ". (($setts['enable_bcc']) ? "Bcc: " . $setts['admin_email'] . " " : ""). "Reply-to: " . ((!empty($reply_to)) ? $reply_to : $from_email) . " ". "Subject: " . $subject . " ". sprintf("Message-ID: &lt;%s@%s&gt;%s", $uniq_id, $_SERVER['SERVER_NAME'], " "). "X-Priority: 3 ". "X-Mailer: Sendmail [version " . $current_version . "] ". "MIME-Version: 1.0 ". "Content-Transfer-Encoding: 7bit ". sprintf("Content-Type: %s; charset=\"%s\"","text/html",LANG_CODEPAGE). " "; if ($from_email) { $output = sprintf("%s -oi -f %s -t", $setts['sendmail_path'], $from_email); } else { $output = sprintf("%s -oi -t", $setts['sendmail_path']); } if(!@$mail = popen($output, "w")) { echo GMSG_COULDNT_EXECUTE . ': ' . $setts['sendmail_path']; } fputs($mail, $header); fputs($mail, $html_msg); $result = pclose($mail) &gt;&gt; 8 &amp; 0xFF; if($result != 0) { echo GMSG_COULDNT_EXECUTE . ': ' . $setts['sendmail_path']; } break; } } } </code></pre> <p>I know, the code is messy ...but it's not my own, it's a script I'm editing. The problem is just ...whenever I remove the "style..." in the $html_message variable, the HTML email is displayed correctly, including the h3 styling, etc. When I add the style, then it shows only the $text_message content.</p> <p>What part could be stripping out or disabling the HTML code?</p> </div>

网格和列表的不同css样式与WooCommerce网格/列表切换

<div class="post-text" itemprop="text"> <p><br> I have an issue with this <strong>WooCommerce Grid / List toggle plugin</strong>.<br><br> On my <a href="http://tilambi.eu/shop/" rel="nofollow">clients website</a> price of products is positioned with css <code>position: absolute;</code>. It works fine in grid view. But when I switch to list view, the price is overlapping other text. I tried to edit position of price (with <code>top: 10px;</code> forexample) but it changed also the position of price in grid view.<br><br> So I want to use php <code>if</code> statement in header and <code>echo</code> the proper position in <code>&lt;style&gt;</code> according to grid view or list view was chosen. <br><br> The problem I have is that I don't know which function should I use. Or which variables should I compare, according to which view was chosen.</p> <p>Here is the code of plugin: <br></p> <pre><code>&lt;?php /* Plugin Name: WooCommerce Grid / List toggle Plugin URI: http://jameskoster.co.uk/tag/grid-list-toggle/ Description: Adds a grid/list view toggle to product archives Version: 0.4.0 Author: jameskoster Author URI: http://jameskoster.co.uk Requires at least: 3.3 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wc_list_grid_toggle Domain Path: /languages/ */ /** * Check if WooCommerce is active **/ if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) { /** * Localisation **/ load_plugin_textdomain( 'wc_list_grid_toggle', false, dirname( plugin_basename( __FILE__ ) ) . '/languages/' ); /** * WC_List_Grid class **/ if (!class_exists('WC_List_Grid')) { class WC_List_Grid { public function __construct() { // Hooks add_action( 'wp' , array( $this, 'setup_gridlist' ) , 20); // Init settings $this-&gt;settings = array( array( 'name' =&gt; __( 'Default catalog view', 'wc_list_grid_toggle' ), 'type' =&gt; 'title', 'id' =&gt; 'wc_glt_options' ), array( 'name' =&gt; __( 'Default catalog view', 'wc_list_grid_toggle' ), 'desc_tip' =&gt; __( 'Display products in grid or list view by default', 'wc_list_grid_toggle' ), 'id' =&gt; 'wc_glt_default', 'type' =&gt; 'select', 'options' =&gt; array( 'grid' =&gt; __('Grid', 'wc_list_grid_toggle'), 'list' =&gt; __('List', 'wc_list_grid_toggle') ) ), array( 'type' =&gt; 'sectionend', 'id' =&gt; 'wc_glt_options' ), ); // Default options add_option( 'wc_glt_default', 'grid' ); // Admin add_action( 'woocommerce_settings_image_options_after', array( $this, 'admin_settings' ), 20 ); add_action( 'woocommerce_update_options_catalog', array( $this, 'save_admin_settings' ) ); add_action( 'woocommerce_update_options_products', array( $this, 'save_admin_settings' ) ); } /*-----------------------------------------------------------------------------------*/ /* Class Functions */ /*-----------------------------------------------------------------------------------*/ function admin_settings() { woocommerce_admin_fields( $this-&gt;settings ); } function save_admin_settings() { woocommerce_update_options( $this-&gt;settings ); } // Setup function setup_gridlist() { if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) { add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_styles' ), 20); add_action( 'wp_enqueue_scripts', array( $this, 'setup_scripts_script' ), 20); add_action( 'woocommerce_before_shop_loop', array( $this, 'gridlist_toggle_button' ), 30); add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_open' ), 9); add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_buttonwrap_close' ), 11); add_action( 'woocommerce_after_shop_loop_item', array( $this, 'gridlist_hr' ), 30); add_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_single_excerpt', 5); add_action( 'woocommerce_after_subcategory', array( $this, 'gridlist_cat_desc' ) ); } } // Scripts &amp; styles function setup_scripts_styles() { if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) { wp_enqueue_style( 'grid-list-layout', plugins_url( '/assets/css/style.css', __FILE__ ) ); wp_enqueue_style( 'grid-list-button', plugins_url( '/assets/css/button.css', __FILE__ ) ); } } function setup_scripts_script() { if ( is_shop() || is_product_category() || is_product_tag() || is_product_taxonomy() ) { wp_enqueue_script( 'cookie', plugins_url( '/assets/js/jquery.cookie.min.js', __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'grid-list-scripts', plugins_url( '/assets/js/jquery.gridlistview.min.js', __FILE__ ), array( 'jquery' ) ); add_action( 'wp_footer', array(&amp;$this, 'gridlist_set_default_view') ); } } // Toggle button function gridlist_toggle_button() { ?&gt; &lt;nav class="gridlist-toggle"&gt; &lt;a href="#" id="grid" title="&lt;?php _e('Zobrazit mřížku', 'wc_list_grid_toggle'); ?&gt;"&gt;&amp;#8862; &lt;span&gt;&lt;?php _e('Zobrazit mřížku', 'wc_list_grid_toggle'); ?&gt;&lt;/span&gt;&lt;/a&gt;&lt;a href="#" id="list" title="&lt;?php _e('Zobrazit seznam', 'wc_list_grid_toggle'); ?&gt;"&gt;&amp;#8863; &lt;span&gt;&lt;?php _e('Zobrazit seznam', 'wc_list_grid_toggle'); ?&gt;&lt;/span&gt;&lt;/a&gt; &lt;/nav&gt; &lt;?php } // Button wrap function gridlist_buttonwrap_open() { ?&gt; &lt;div class="gridlist-buttonwrap"&gt; &lt;?php } function gridlist_buttonwrap_close() { ?&gt; &lt;/div&gt; &lt;?php } // hr function gridlist_hr() { ?&gt; &lt;hr /&gt; &lt;?php } function gridlist_set_default_view() { $default = get_option( 'wc_glt_default' ); ?&gt; &lt;script&gt; if (jQuery.cookie('gridcookie') == null) { jQuery('ul.products').addClass('&lt;?php echo $default; ?&gt;'); jQuery('.gridlist-toggle #&lt;?php echo $default; ?&gt;').addClass('active'); } &lt;/script&gt; &lt;?php } function gridlist_cat_desc( $category ) { global $woocommerce; echo '&lt;div itemprop="description"&gt;'; echo $category-&gt;description; echo '&lt;/div&gt;'; } } $WC_List_Grid = new WC_List_Grid(); } } </code></pre> </div>

判断是否checked然后给另外一个元素添加样式的选择器怎么写

我用js实现的这个,想纯用css 这里的选择器不会选,该怎么写? ![图片说明](https://img-ask.csdn.net/upload/201805/27/1527415839_535774.png) ![图片说明](https://img-ask.csdn.net/upload/201805/27/1527415856_125635.png) 主要就是通过是否checked控制left right,这个第二行代码选择器怎么写 同时最好解决一下代码冗余 ``` #switch{position: absolute;width: 50px; height: 30px; border-radius: 15px; background-color: white;top:5px;left: 5px} input:checked#switch{position: absolute;width: 50px; height: 30px; border-radius: 15px; background-color: white;top:5px;left: 5px} ``` ``` <main> <input type="checkbox" id="box" checked> <span id="switch" class="left"></span> <span class="bg"> <label for="box">ON</label> <label for="box">OFF</label> </span> </main> ```

根据样式表更改图像

<div class="post-text" itemprop="text"> <p>Is it possible to switch out images based on what stylesheet is being used on the page?</p> <p>For example, I have a normal and a nightview stylesheet which users can switch between. Although I'm guessing the solution might be with CSS, here's my pseudocode attempt in PHP:</p> <pre><code> $css = "/.css" if (css=normal.css){ echo "&lt;img src='1.1.1.jpg'&gt;"; } if (css=nightview.css){ echo "&lt;img src='1.1.1i.jpg'&gt;"; } </code></pre> <p>Any tips on how to make this happen? </p> </div>

jQuery在IE8中根本不起作用

<div class="post-text" itemprop="text"> <p>I have read lots of past postings on this subject... I have tried every "solution", change to <strong>type="text/javascript"</strong>, upgrade it to the latest version, including this header <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /&gt;</code> but nothing seems to work.</p> <p>The site is <a href="http://testing.quierodecomer.com/" rel="nofollow">testing.quierodecomer.com</a> <br> <strong>NOTE:</strong> I wrote <code>&lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /&gt;</code> in the head for testing issues.</p> <pre><code>&lt;?php session_start(); ?&gt; &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /&gt; &lt;title&gt;Quiero de comer!&lt;/title&gt; &lt;link href="favicon.png" type="image/png" rel="icon"&gt; &lt;style&gt; .ui-autocomplete-loading { background: white url('jquery-ui-1.8.21.custom/css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat; } &lt;/style&gt; &lt;link rel="stylesheet" type="text/css" href="jquery-ui-1.8.21.custom/css/ui-lightness/jquery-ui-1.8.21.custom.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/stylesheet.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/fonts.css" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/jquery.imageZoom.css" /&gt; &lt;style type="text/css"&gt; body { padding: 0px; vertical-align:bottom; } #container { position: absolute; margin: 0px; padding: 0px; width: 100%; height: 360px; overflow: hidden; text-align:center; } .box { position: absolute; width: 400px; height: 200px; line-height: 40px; font-size: 30px; font-weight:bold; color:black; text-align: center; border: 3px solid grey; left: 50%; top: 100px; -webkit-border-radius:60px; -moz-border-radius:60px; border-radius:60px; margin-top:-70px; margin-left: -200px; } #box1 { background-color:#FFF; } #box2 { background-color:#FFF; left: 150%; } #box3 { background-color:#FFF; left: 150%; } .btn1, .coloniaButton{ background:#ff5d35; border:none; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px; vertical-align:middle; cursor:pointer; color:#fff; font-weight:bold; font-size:20px; padding:5px 10px; margin-right:-225px; border: 1px solid #000; } .btn1:hover, .coloniaButton:hover{ background:#3f3f3f; } #tags, #tipoDeComida, #tags2, #city { padding:.8em; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; border:none; width:350px; margin-bottom:5px; border: 2px solid grey; } .titulo{ margin-top: 23px; } .caja{ margin-top: 20px; } .servicios{ font-size:15px; font-weight:bold; } #ciudadBreadcrumb, #coloniaBreadcrumb{ font-size: 15px; } #footer{ text-align: center; background-color: black; width: 99.2%; padding: 5px; color: white; position: absolute; bottom: 0px; } &lt;/style&gt; &lt;link rel="stylesheet" href="css/supersized.css" type="text/css" media="screen" /&gt; &lt;link rel="stylesheet" href="theme/supersized.shutter.css" type="text/css" media="screen" /&gt; &lt;link rel="stylesheet" href="css/flexslider.css" type="text/css"&gt; &lt;script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-1.7.2.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery-ui-1.8.21.custom.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.8.21.custom/js/jquery.paginatetable.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="jquery-ui-1.8.21.custom/js/md5.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.flexslider.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.easing.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/supersized.3.2.6.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="theme/supersized.shutter.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/jquery.imageZoom.js"&gt;&lt;/script&gt; &lt;?php include("conecta.php"); $result = mysql_query("SELECT * FROM fondo WHERE id = 1"); while($row = @mysql_fetch_array($result)){ $fondo = $row['imgFondo']; } ?&gt; &lt;script type="text/javascript"&gt; jQuery(function($){ $.supersized({ // Functionality slide_interval : 3000, // Length between transitions transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left transition_speed : 700, // Speed of transition // Components slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank') slides : [ // Slideshow Images {image : 'admin/uploads/fondos/&lt;?php echo $fondo; ?&gt;', title : '', thumb : '', url : ''} ] }); }); &lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#colonia").hide(); $('.btn1').click(function() { $('.box').each( function() { if ($(this).offset().left &lt; 0) { $(this).css("left", "150%"); } }); $(this.parentNode).animate({ left: '-50%' }, 500); if ($(this.parentNode).next().size() &gt; 0) { $(this.parentNode).next().animate({ left: '50%' }, 500); } else { $(this.parentNode).prevAll().last().animate({ left: '50%' }, 500); } }); $('#domicilio').click(function() { $('.box').each( function() { if ($(this).offset().left &lt; 0) { $(this).css("left", "150%"); } }); $(this.parentNode.parentNode).animate({ left: '-50%' }, 500); if ($(this.parentNode.parentNode).next().size() &gt; 0) { $(this.parentNode.parentNode).next().animate({ left: '50%' }, 500); } else { $(this.parentNode.parentNode).prevAll().last().animate({ left: '50%' }, 500); } }); $('#colonia').click(function() { setCookie("domicilio", "tipoDeServicio"); }); $('#ciudad').click(function() { var e = document.getElementById("city"); var city = e.options[e.selectedIndex].value; setCookie(city, "puraCiudad"); }); jQuery(document.body).imageZoom(); $('#pager').hide(); clienteBar(); $("#crossCiudad").hide(); $("#crossColonia").hide(); loadBreadcrumbs(); getTipoDeComida(); getCiudades(); $("#enviarSignUp").button(); $( "#logInContainer" ).dialog({ autoOpen: false, height: 420, width: 750, modal: true, buttons: { "Regresar": function() { $( this ).dialog( "close" ); } }, }); $("#afiliarte").dialog({ autoOpen: false, height: 350, width: 450, modal: true, buttons: { "Enviar": function() { //function }, "Regresar": function() { $( this ).dialog( "close" ); } }, }); $("#contactanos").dialog({ autoOpen: false, height: 350, width: 450, modal: true, buttons: { "Enviar": function() { //function }, "Regresar": function() { $( this ).dialog( "close" ); } }, }); $( "#sugerirRestaurantes" ).dialog({ autoOpen: false, height: 350, width: 450, modal: true, buttons: { "Enviar": function() { //function }, "Regresar": function() { $( this ).dialog( "close" ); } }, }); $( "#terminosCondiciones" ).dialog({ autoOpen: false, height: 350, width: 450, modal: true, }); $( "#signUpContainer" ).dialog({ autoOpen: false, height: 320, width: 480, modal: true, buttons: { "Enviar": function() { signUp(); }, "Regresar": function() { document.getElementById("notificationCC").value = ""; $( this ).dialog( "close" ); } }, }) }); function logInDialog(){ $( "#logInContainer" ).dialog( "open" ); } function sugerirRestaurantesDialog(){ $( "#sugerirRestaurantes" ).dialog( "open" ); } function terminosCondicionesDialog(){ $( "#terminosCondiciones" ).dialog( "open" ); } function afiliarteDialog(){ $( "#afiliarte" ).dialog( "open" ); } function contactanosDialog(){ $( "#contactanos" ).dialog( "open" ); } function signUpDialog(){ $( "#signUpContainer" ).dialog( "open" ); } function send(str, flag){ if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 &amp;&amp; xmlhttp.status==200){ //callback //xmlhttp.responseText switch(flag){ case "setCookie": setCookieCallback(xmlhttp.responseText);break; case "deleteCookie": deleteCookieCallback(xmlhttp.responseText); break; case "loadBreadcrumbs": loadBreadcrumbsCallback(xmlhttp.responseText);break; case "getRestaurantes": getRestaurantesCallback(xmlhttp.responseText);break; case "logIn": logInCallback(xmlhttp.responseText);break; case "signUp": signUpCallback(xmlhttp.responseText);break; case "logOut": logOutCallback(xmlhttp.responseText);break; } } } xmlhttp.open("GET",str,true); xmlhttp.send(); } function loadBreadcrumbs(){ //Checkboxes if(document.getElementById('domicilioBreadcrumb').value == "set"){ document.getElementById('domicilio').checked = true; } if(document.getElementById('recogerBreadcrumb').value == "set"){ document.getElementById('recoger').checked = true; } if(document.getElementById('reservacionBreadcrumb').value == "set"){ document.getElementById('reservacion').checked = true; } var str = "printCookie.php"; send(str, "loadBreadcrumbs"); } function loadBreadcrumbsCallback(response){ var arr = response.split("/"); //alert(response); var colonia = arr[0].split("="); var ciudad = arr[1].split("="); var estado = arr[2].split("="); var tipoDeComida = arr[3].split("="); if(colonia[1] != ""){ document.getElementById("coloniaBreadcrumb").innerHTML = colonia[1]+"&lt;br /&gt;"; $("#colonia").show(); } if(ciudad[1] != ""){ document.getElementById("ciudadBreadcrumb").innerHTML = ciudad[1] + ", " + estado[1]+"&lt;br /&gt;"; } //document.getElementById("tipoDeComidaBreadcrumb").innerHTML = tipoDeComida[1]; if(document.getElementById('ciudadBreadcrumb').innerHTML == ""){ $("#crossCiudad").hide(); } else { $("#city").hide(); $("#crossCiudad").show(); } if(document.getElementById('coloniaBreadcrumb').innerHTML == ""){ $("#crossColonia").hide(); } else { $("#tags2").hide(); $("#crossColonia").show(); } //alert(colonia[1]+", "+ciudad[1]+", "+tipoDeComida[1]); //getRestaurantes(colonia[1], ciudad[1], tipoDeComida[1]); } function handleSearch(event, ui){ term = document.getElementById("tags").value; $.ajax({ url: 'loadCiudades.php?term='+term, success: function(data) { if(data == '[]'){ restaurantes = document.getElementById("content-background"); imagen = document.getElementById("proximamente"); restaurantes.style.display = "none"; imagen.style.display = "block"; }else{ restaurantes = document.getElementById("content-background"); imagen = document.getElementById("proximamente"); restaurantes.style.display = "block"; imagen.style.display = "none"; } } }); } function getCiudades(){ ciudad = "&lt;?php echo $_COOKIE['ciudad']; ?&gt;"; $( "#tags2" ).autocomplete({ source: "loadCiudades.php?ciudad="+ciudad, select: function(event, ui) { setCookie(ui.item.value, "ciudad"); }, search: function(event, ui){ handleSearch(event,ui); } }); } function getTipoDeComida(){ $("#tipoDeComida").autocomplete({ source: "loadTipoDeComida.php", select: function(event, ui) { setCookie(ui.item.value, "tipoDeComida"); } }); } function setCookie(cookieValue, cookieType){ var str = "setCookie.php?cookieValue=" + cookieValue + "&amp;cookieType=" + cookieType; send(str, "setCookie"); } function setCookieCallback(response){ switch(response){ case "puraCiudad": document.getElementById("tags").value = ""; $("#crossCiudad").show(); $("#city").hide(); break; case "tipoDeComida": document.getElementById("tipoDeComida").value = ""; $("#crossComida").show(); $("#tipoDeComida").hide(); break; case "ciudad": document.getElementById("tags2").value = ""; $("#crossColonia").show(); $("#tags2").hide(); $("#colonia").hide(); break; case "tipoDeServicio": parent.location='index2.php'; break; } loadBreadcrumbs(); } function getRestaurantes(colonia2, ciudad2, tipo2){ var direccion = document.getElementById('tags').value; //var colonia = direccion.split(',')[0]; //var ciudad = direccion.split(',')[1]; var colonia = trim(colonia2); var ciudad = trim(ciudad2); var tipoComida = trim(tipo2); var str = "getRestaurantes.php?colonia=" + colonia + "&amp;ciudad=" + ciudad + "&amp;tipoComida=" + tipoComida; send(str, "getRestaurantes"); } function getRestaurantesCallback(response){ if(response == "empty"){ document.getElementById('paging').innerHTML = ""; $('#pager').hide(); } else { var arr = response.split("|"); var restaurantes = arr[0]; var promociones = arr[1]; var numPag = arr[2]/4; document.getElementById("promocionesContainer").innerHTML = promociones; $('#pager').show(); document.getElementById('paging').innerHTML = restaurantes; $('#myTable').paginateTable({ rowsPerPage: numPag }); if(document.getElementById('totalPages').innerHTML == ""){ document.getElementById('pager').style.display = "none"; } else { document.getElementById('pager').style.display = "block"; } } } function stripVowelAccent(str) { var rExps=[ {re:/[\xC0-\xC6]/g, ch:'A'}, {re:/[\xE0-\xE6]/g, ch:'a'}, {re:/[\xC8-\xCB]/g, ch:'E'}, {re:/[\xE8-\xEB]/g, ch:'e'}, {re:/[\xCC-\xCF]/g, ch:'I'}, {re:/[\xEC-\xEF]/g, ch:'i'}, {re:/[\xD2-\xD6]/g, ch:'O'}, {re:/[\xF2-\xF6]/g, ch:'o'}, {re:/[\xD9-\xDC]/g, ch:'U'}, {re:/[\xF9-\xFC]/g, ch:'u'}, {re:/[\xD1]/g, ch:'N'}, {re:/[\xF1]/g, ch:'n'} ]; for(var i=0, len=rExps.length; i&lt;len; i++) str=str.replace(rExps[i].re, rExps[i].ch); return str; } function deleteCookie(cookieType){ var str = "deleteCookie.php?cookieType=" + cookieType; send(str, "deleteCookie"); } function deleteCookieCallback(response){ //Borra el breadcrumb switch(response){ case "puraCiudad": document.getElementById("ciudadBreadcrumb").innerHTML = ""; $("#crossCiudad").hide(); $("#city").show(); break; case "tipoDeComida": document.getElementById("tipoDeComidaBreadcrumb").innerHTML = ""; $("#crossComida").hide(); $("#tipoDeComida").show(); break; case "ciudad": document.getElementById("coloniaBreadcrumb").innerHTML = ""; $("#crossColonia").hide(); $("#tags2").show(); $("#colonia").hide(); break; } getRestaurantes(); } function setCookieCheck(check, cookieType){ if(check.checked){ setCookie(1, cookieType); } else { deleteCookie(cookieType); } } function logIn(){ var email = document.getElementById("email").value; var password = document.getElementById("password").value; if(email == "" || password == ""){ document.getElementById("notification").innerHTML = "Ingresa tu email y contrase&amp;ntilde;a"; } else { password = hex_md5(password); var str = "logIn.php?password=" + password + "&amp;email=" + email; send(str, "logIn"); } } function logInCallback(response){ if(response == "not_logged/0"){ document.getElementById("notification").innerHTML = "Las credenciales no son v&amp;aacute;lidas"; } else { document.getElementById("notification").innerHTML = ""; $("#logInBar").hide(); $("#logInBarMenu").hide(); $("#signUpBar").hide(); $("#clienteBar").show(); arr = response.split("/"); document.getElementById("usuarioIDnombre").innerHTML = arr[1]; $("#logInContainer").dialog("close"); loadColonia(); } } function loadColonia(){ var str = "getColonia.php"; send(str, "colonia"); } function loadColoniaCallback(response){ } function clienteBar(){ if(document.getElementById('usuarioID').value == 0){ $("#clienteBar").hide(); } else { $("#logInBar").hide(); $("#signUpBar").hide(); } } function signUp(){ var valido = validateSignUp(); if(valido == true){ var nombre = document.getElementById("nombreCC").value; var direccion = document.getElementById("direccionCC").value; var email = document.getElementById("emailCC").value; var password1 = document.getElementById("password1").value; var nacimiento = document.getElementById("dia").value + "/" + document.getElementById("mes").value + "/" + document.getElementById("anio").value; var sexo = document.getElementById("sexo").value; var telefono = document.getElementById("telefono").value; var str = "signUp.php?nombre=" + nombre + "&amp;direccion=" + direccion + "&amp;email=" + email + "&amp;password=" + password1 + "&amp;nacimiento=" + nacimiento + "&amp;sexo=" + sexo + "&amp;telefono=" + telefono; send(str, "signUp"); } } function signUpCallback(response){ if(response == "existingEmail"){ document.getElementById("notificationCC").innerHTML = "Esa dirección de correo ya ha sido utilizada"; } else { document.getElementById("notificationCC").innerHTML = "Ingresa a tu email para dar de alta tu cuenta"; document.getElementById("nombreCC").value = ""; document.getElementById("emailCC").value = ""; password1 = document.getElementById("password1").value = ""; password1 = document.getElementById("password2").value = ""; } } function validateSignUp(){ var nombre = document.getElementById("nombreCC").value; var direccion = document.getElementById("direccionCC").value; var email = document.getElementById("emailCC").value; var password1 = document.getElementById("password1").value; var password2 = document.getElementById("password2").value; var dia = document.getElementById("dia").value; var mes = document.getElementById("mes").value; var anio = document.getElementById("anio").value; var sexo = document.getElementById("sexo").value; var telefono = document.getElementById("telefono").value; var mydate=new Date() var year=mydate.getYear(); if (year &lt; 1000){ year+=1900 } var month = mydate.getMonth(); month = month + 1; var day = mydate.getDate(); if(day &gt; 31 || mes &gt; 12 || anio &gt;= year){ document.getElementById("notificationCC").innerHTML = "La fecha de nacimiento no es válida"; return false; } else{ //Valida que todos los campos esten llenos if(nombre == "" || email == "" || password1 == "" || password2 == "" || telefono == "" || direccion == ""){ document.getElementById("notificationCC").innerHTML = "Por favor llena todos los campos"; return false; } else { //Passwords iguales if(password1 != password2){ document.getElementById("notificationCC").innerHTML = "Las contraseñas no coinciden"; return false; } else { //Longitud del password if(password1.length &lt; 6){ document.getElementById("notificationCC").innerHTML = "La contraseña debe ser de al menos 6 caracteres de largo"; return false; } else { if(comparaFecha(dia, mes, anio, day, month, year) == false){ document.getElementById("notificationCC").innerHTML = "La fecha no es correcta"; return false; } else{ if(telefono.length &lt; 10){ document.getElementById("notificationCC").innerHTML = "El telefono no es correcto"; return false; } else { return true; } } } } } } } function trim(value) { var temp = value; var obj = /^(\s*)([\W\w]*)(\b\s*$)/; if (obj.test(temp)) { temp = temp.replace(obj, '$2');} var obj = / /g; while (temp.match(obj)) { temp = temp.replace(obj, " ");} return temp; } function comparaFecha(dia, mes, anio, day, month, year){ if(anio &gt; (year-18)){ return false; } else { if(anio == (year-18)) { if(mes &gt; month){ return false; } else { if(mes == month) { if(dia &gt; day){ return false; } else { return true; } } } } else { return true; } } } function logOut(){ var str = "logOut.php"; send(str, "logOut"); } function logOutCallback(response){ if(response == "success"){ $("#clienteBar").hide(); $("#logInBar").show(); $("#logInBarMenu").show(); $("#signUpBar").show(); document.getElementById("usuarioID").value = 0; } } function setServicio(tipo){ setCookie("check", tipo); } function redirect(element){ window.location = element.title; } &lt;/script&gt; &lt;/head&gt; &lt;?php include("indexBackend.php"); ?&gt; &lt;body&gt; &lt;?php //Carga la session if(isset($_SESSION['usuarioID'])){ echo ("&lt;input type='hidden' id='usuarioID' value='".$_SESSION['usuarioID']."' /&gt;"); $nombre = $_SESSION['nombre']; } else { echo ("&lt;input type='hidden' id='usuarioID' value='0' /&gt;"); $nombre = ""; } ?&gt; &lt;?php include("getPublicidad.php"); ?&gt; &lt;?php //Domicilio if($_COOKIE['domicilio'] == 1){ echo("&lt;input type='hidden' id='domicilioBreadcrumb' value='set'/&gt;"); } else { echo("&lt;input type='hidden' id='domicilioBreadcrumb' value='not_set'/&gt;"); } //Recoger if($_COOKIE['recoger'] == 1){ echo("&lt;input type='hidden' id='recogerBreadcrumb' value='set'/&gt;"); } else { echo("&lt;input type='hidden' id='recogerBreadcrumb' value='not_set'/&gt;"); } //Reservacion if($_COOKIE['reservacion'] == 1){ echo("&lt;input type='hidden' id='reservacionBreadcrumb' value='set'/&gt;"); } else { echo("&lt;input type='hidden' id='reservacionBreadcrumb' value='not_set'/&gt;"); } ?&gt; &lt;div style="width:100%; text-align:center;"&gt;&lt;img src="images/logoadmin.png" alt="" align="middle" /&gt;&lt;/div&gt; &lt;div id="container"&gt; &lt;div id="box1" class="box"&gt; &lt;div class="titulo"&gt;Selecciona tu Ciudad:&lt;/div&gt; &lt;div class="caja"&gt; &lt;select id="city"&gt; &lt;option value="San Pedro Garza Garc&amp;iacute;a, Nuevo Leon"&gt;San Pedro Garza Garc&amp;iacute;a&lt;/option&gt; &lt;option value="Monterrey, Nuevo Leon"&gt;Monterrey&lt;/option&gt; &lt;/select&gt;&lt;input id="tags" style="display:none" /&gt; &lt;/div&gt; &lt;img id="crossCiudad" src="images/cross2.gif" style="cursor:pointer" onclick="deleteCookie('puraCiudad')"/&gt;&amp;nbsp;&lt;span id="ciudadBreadcrumb"&gt;&lt;/span&gt; &lt;span class="btn1" id="ciudad"&gt;Continuar&lt;/span&gt; &lt;/div&gt; &lt;div id="box2" class="box"&gt; &lt;div class="titulo"&gt;Selecciona el Tipo de Servicio:&lt;/div&gt; &lt;div class="caja"&gt; &lt;input type="radio" id="domicilio" name="tipo" value="domicilio" class="selec"/&gt;&lt;span class="servicios"&gt;A Domicilio&lt;/span&gt; &lt;input type="radio" name="tipo" value="recoger" class="selec" onClick="setCookie('recoger', 'tipoDeServicio')"/&gt;&lt;span class="servicios"&gt;Pasar a Recoger&lt;/span&gt; &lt;input type="radio" name="tipo" value="reservar" class="selec" onClick="setCookie('reservar', 'tipoDeServicio')"/&gt;&lt;span class="servicios"&gt;Reservar&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="box3" class="box"&gt; &lt;div class="titulo"&gt;Selecciona tu Colonia:&lt;/div&gt; &lt;div class="caja"&gt;&lt;input id="tags2" value="Escribe tu colonia: Ej. Del Valle" onblur="if(this.value=='') this.value='Escribe tu colonia: Ej. Del Valle'" onfocus="if(this.value =='Escribe tu colonia: Ej. Del Valle' ) this.value=''" /&gt;&lt;/div&gt; &lt;img id="crossColonia" src="images/cross2.gif" style="cursor:pointer" onclick="deleteCookie('ciudad')"/&gt;&amp;nbsp;&lt;span id="coloniaBreadcrumb"&gt;&lt;/span&gt; &lt;span class="coloniaButton" id="colonia"&gt;Continuar&lt;/span&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="footer"&gt; &lt;span style="float: left;"&gt;Derechos Reservados Quierodecomer.com&lt;/span&gt; &lt;span onclick="terminosCondicionesDialog()" style="cursor:pointer; text-decoration: underline;"&gt;El uso de este sitio web implica la aceptaci&amp;oacute;n de los t&amp;eacute;rminos y condiciones de quierodecomer.com&lt;/span&gt; &lt;span style="float: right;"&gt;&lt;a href="admin" style="color: white; text-decoration: underline"&gt;Login Restaurantes&lt;/a&gt;&lt;/span&gt; &lt;/div&gt; &lt;div id="terminosCondiciones" title="Términos y Condiciones"&gt; &lt;?php echo $terminos; ?&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; /* Bookmark */ jQuery(document).ready(function(){ // add a "rel" attrib if Opera 7+ if(window.opera) { if (jQuery("A.linkBookmark").attr("rel") != ""){ // don't overwrite the rel attrib if already set jQuery("A.linkBookmark").attr("rel","sidebar"); } } jQuery("A.linkBookmark").click(function(event){ event.preventDefault(); // prevent the anchor tag from sending the user off to the link var url = this.href; var title = this.title; if (window.sidebar) { // Mozilla Firefox Bookmark window.sidebar.addPanel(title, url,""); } else if( window.external ) { // IE Favorite window.external.AddFavorite( url, title); } else if(window.opera) { // Opera 7+ return false; // do nothing - the rel="sidebar" should do the trick } else { // for Safari, Konq etc - browsers who do not support bookmarking scripts (that i could find anyway) alert('Desafortunadamente, este navegador no soporta la petición ' + ' por favor, agrega esta página manualmente.'); } }); $('.flexslider').flexslider(); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div>

如何将简单的会话登录类型更改为Facebook样式登录?

<div class="post-text" itemprop="text"> <p>I am stuck in converting the login type of this web based application..I got the code from the net in which the app just ask for username and when we enter it, it shows the conversation page..But I want to convert that login type to a proper one like with a username and a password..I previously designed a login system which I want to use..the codes are absolutely working when used individually..when combined they wont work..can someone tell me the code after combining these two?</p> <p><strong>here's the code for app which is index.php</strong> </p> <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;Chat&lt;/title&gt; &lt;link type="text/css" rel="stylesheet" href="style.css" /&gt; &lt;link rel="stylesheet" href="css/style.css"&gt; &lt;style&gt; a:link { color: black; } a:visited { color: black; }&lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;?php session_start(); ?&gt; &lt;div id="wrapper"&gt; &lt;div id="menu"&gt; &lt;p class="welcome"&gt;Welcome, &lt;b&gt;&lt;?php echo $_SESSION['name']; ?&gt;&lt;/b&gt;&lt;/p&gt; &lt;p class="logout"&gt;&lt;a id="exit" href="login.php"&gt;Exit Chat&lt;/a&gt;&lt;/p&gt; &lt;div style="clear:both"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id="chatbox"&gt;&lt;/div&gt; &lt;form name="message" action=""&gt; &lt;input name="usermsg" type="text" id="usermsg" size="63" /&gt; &lt;input name="submitmsg" type="submit" id="submitmsg" value="Send" /&gt; &lt;/form&gt; &lt;/div&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; // jQuery Document $(document).ready(function(){ //If user submits the form $("#submitmsg").click(function(){ var clientmsg = $("#usermsg").val(); $.post("post.php", {text: clientmsg}); $("#usermsg").attr("value", ""); return false; }); //Load the file containing the chat log function loadLog(){ $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div }, }); } //Load the file containing the chat log function loadLog(){ var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height before the request $.ajax({ url: "log.html", cache: false, success: function(html){ $("#chatbox").html(html); //Insert chat log into the #chatbox div //Auto-scroll var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20; //Scroll height after the request if(newscrollHeight &gt; oldscrollHeight){ $("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div } }, }); } setInterval (loadLog, 2500); //Reload file every 2500 ms or x ms if you w }); &lt;/script&gt; &lt;script type="text/javascript"&gt; // jQuery Document $(document).ready(function(){ //If user wants to end session $("#exit").click(function(){ var exit = confirm("Are you sure you want to end the session?"); if(exit==true){window.location = 'index.php?logout=true';} }); }); &lt;/script&gt; &lt;?php if(isset($_GET['logout'])){ //Simple exit message $fp = fopen("log.html", 'a'); fwrite($fp, "&lt;div class='msgln'&gt;&lt;i&gt;User ". $_SESSION['name'] ." has left the chat session.&lt;/i&gt;&lt;br&gt;&lt;/div&gt;"); fclose($fp); session_destroy(); header("Location: index.php"); //Redirect the user } ?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>Here's the code for login system which is login.php</strong> </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;!--[if lt IE 7]&gt; &lt;html class="lt-ie9 lt-ie8 lt-ie7" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 7]&gt; &lt;html class="lt-ie9 lt-ie8" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if IE 8]&gt; &lt;html class="lt-ie9" lang="en"&gt; &lt;![endif]--&gt; &lt;!--[if gt IE 8]&gt;&lt;!--&gt; &lt;html lang="en"&gt; &lt;!--&lt;![endif]--&gt; &lt;head&gt; &lt;title&gt;Login Form&lt;/title&gt; &lt;style&gt; a:link { color: black; } a:visited { color: black; }&lt;/style&gt; &lt;link rel="stylesheet" href="css/style.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;?php if (!isset($_POST['submit'])){ ?&gt; &lt;h1 class="register-title"&gt;Welcome&lt;/h1&gt; &lt;form action="&lt;?=$_SERVER['PHP_SELF']?&gt;" method="post" class="register"&gt; &lt;div class="register-switch"&gt; &lt;input type="radio" name="type" value="L" id="login" class="register-switch-input" checked&gt; &lt;label for="login" class="register-switch-label"&gt;&lt;a href="login.php" style="text-decoration:none;" link="#000000" vlink="#000000" alink="#000000"&gt;Login&lt;/a&gt;&lt;/label&gt; &lt;input type="radio" name="type" value="R" id="Register" class="register-switch-input"&gt; &lt;label for="Register" class="register-switch-label"&gt;&lt;a href="register.php" style="text-decoration:none;"&gt;Register&lt;/a&gt;&lt;/label&gt; &lt;/div&gt; &lt;input type="text" name="username" class="register-input" placeholder="User Name"&gt; &lt;input type="password" name="password"class="register-input" placeholder="Password"&gt; &lt;input type="submit" name="submit" value="Login" class="register-button"&gt; &lt;/form&gt; &lt;?php } else { require_once("db_const.php"); $mysqli = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); # check connection if ($mysqli-&gt;connect_errno) { echo "&lt;p&gt;MySQL error no {$mysqli-&gt;connect_errno} : {$mysqli-&gt;connect_error}&lt;/p&gt;"; exit(); } $username = $_POST['username']; $password = $_POST['password']; $sql = "SELECT * from users WHERE username LIKE '{$username}' AND password LIKE '{$password}' LIMIT 1"; $result = $mysqli-&gt;query($sql); if (!$result-&gt;num_rows == 1) { echo "&lt;p&gt;Incorrect Password&lt;/p&gt;"; } else { echo "&lt;p&gt;Logged in successfully&lt;/p&gt;"; // do stuffs header("Location: index.php"); } } ?&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div>

在Laravel 5.7中更改(电子邮件)按钮颜色

<div class="post-text" itemprop="text"> <p>What is the best way to change the success, error and primary colors in Laravel 5.7?</p> <p>I have the email.blade.php via <code>php artisan vendor:publish --tag=laravel-notifications</code></p> <pre><code>... {{-- Action Button --}} @isset($actionText) &lt;?php switch ($level) { case 'success': case 'error': $color = $level; break; default: $color = 'primary'; } ?&gt; @component('mail::button', ['url' =&gt; $actionUrl, 'color' =&gt; $color]) ... </code></pre> <p>The template uses the <code>'success'</code>, <code>'error'</code> and <code>'primary'</code> to color the button, but where can I change the values for them?</p> </div>

ASP.net <%=token%>显示不出数据

打算用ASP.net <%=token%>输出到一个菜单链接里作为参数,在根目录的页面里能够正常显示,但是在二级目录下的页面就会出问题,也就是说显示不出来,菜单栏都是复制过去的,为什么会出现这种情况? ``` <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PersonEfficiency.aspx.cs" Inherits="RepairSever.Rank.PersonEfficiency" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>维修服务平台</title> <link href="../rsp/Tbase/base.css" rel="stylesheet" type="text/css" /> <link href="../rsp/Tbase/top.css" rel="stylesheet" type="text/css" /> <link href="../rsp/Template/Default/style.css" rel="stylesheet" type="text/css" /> <link href="../rsp/js/jNotify/jNotify.jquery.css" rel="stylesheet" type="text/css" /> <script src="../rsp/js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="../rsp/js/jquery.hoverdelay.js" type="text/javascript"></script> <script src="../rsp/js/jNotify/jNotify.jquery.js" type="text/javascript"></script> <script src="../rsp/js/layer/layer.min.js" type="text/javascript"></script> <script src="../rsp/js/base.js" type="text/javascript"></script> </head> <body> <form id="form1" runat="server"> <div> <!--top--> <div class="top"> <div class="layout-top"> <div class="layout-top-warp"> <ul class="layout-top-title"> <li class="top-app-title">高校后勤数字化平台</li> <li class="top-line-app"></li> <li class="top-app">维修服务<em class="top-arr"></em> <div class="top-app-menu" style="display: none;"> <ul> <li><a href="pc">个人中心</a></li> <li><a href="dsh">服务大厅</a></li> <li><a href="ssp">服务监督</a></li> <li><a href="pc/home/appnav/3" title="更多" style="font-weight: bold;">…</a></li> </ul> </div> </li> </ul> <ul class="layout-top-login"> <li class="top-line"></li> <li class="top-login" data-value="登录">登录</li> <li class="top-line"></li> </ul> </div> </div> </div> <!--endtop--> <!--logo--> <div class="layout-logo"> <div class="layout-logo-warp"> <img class="logo" src="../rsp/logo.png" /> <div class="logo2"></div> <div class="top-img"></div> <a class="btn logo-iwant" data-value="" href="rsp/my/wantrepair"> <em></em>我要报修</a> </div> <!--end logo--> <!--nav--> <div class="layout-nav"> <div class="layout-nav-warp"> <ul> <li id="nav-index"><a class="nav-a" href="../Default.aspx?token=<% =token%>">平台首页</a></li> <li id="nav-DataCx"><a class="nav-a" href="../sjcx.aspx?token=<% =token%>">数据查询</a></li> <li id="nav-DataJk"><a class="nav-a" href="../sjhz.aspx?token=<% =token%>">数据汇总</a></li> <li id="nav-DataJk"><a class="nav-a" href="../sjfx.aspx?token=<% =token%>">数据分析</a></li> <li id="nav-pm" class="nav-menu"><a class="nav-a">维修排名</a><em class="nav-arr"></em> <ul class="top-nav-menu" style="display: none;"> <li><a href="TeamEfficiency.aspx?token=<% =token%>">单位效率排名</a></li> <li><a href="PersonEfficiency.aspx?token=<% =token%>">个人效率排名</a></li> <li><a href="TeamSatisfaction.aspx?token=<% =token%>">单位满意度排名</a></li> <li><a href="PersonSatisfaction.aspx?token=<% =token%>">个人满意度排名</a></li> </ul> </li> <li id="nav-tj" class=" nav-menu"><a class="nav-a">维修统计</a><em class="nav-arr"></em> <ul class="top-nav-menu" style="display: none;"> <li><a href="../count/TeamWork.aspx?token=<% =token%>">单位工作量统计</a></li> <li><a href="../count/PersonWork.aspx?token=<% =token%>">个人工作量统计</a></li> <li><a href="../count/BuildingWork.aspx?token=<% =token%>">楼宇维修量统计</a></li> <li><a href="../count/RepairItem.aspx?token=<% =token%>">维修项目统计</a></li> </ul> </li> <li id="nav-wxdw"><a class="nav-a" href="#">维修队伍</a> </li> <li id="nav-fwzn" class=" nav-menu"><a class="nav-a">服务指南</a><em class="nav-arr"></em> <ul class="top-nav-menu" style="display: none;"> <li><a id="index-fw-常见问题解答" href="#" >常见问题解答</a></li> <li><a id="index-fw-维修范围划分" href="#" >维修范围划分</a></li> <li><a id="index-fw-不属后勤维修范围" href="#" >不属后勤维修范围</a></li> </ul> </li> </ul> <div class="layout-nav-search" id="layout-nav-search"> <form method="get" action="rsp/site/DataCx" id="search-form" onkeydown="if(event.keyCode==13){return false;}"> <input placeholder="输入报修内容进行检索" id="nav-search-input" name="search" /> <b></b> </form> </div> <script language="javascript" type="text/javascript"> $(document).ready(function () { $("#layout-nav-search b").click(function () { indexSearch(); }); $("#nav-search-input").keydown(function (event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == 13) { indexSearch(); } }); }); function indexSearch() { if ($("#nav-search-input").val().length == 0) { return false; } $("#search-form").submit(); } </script> </div> </div> <!--end nav--> </div> <!--实时数据监控--> <!--实时数据监控--> <div class="layout-center"> <div class="box" style="min-height: 500px;"> <div class="box-title"> <span><b class="icon2"></b>个人维修效率排名</span> <ul class="box-nav-s"> <li class="yj3 " data-value="month">本月</li> <li class="yj3 on" data-value="year">本年</li> </ul> </div> <ul class="datalist datalist-head grxl"> <li class="xh">序号</li> <li class="Name">姓名</li> <li class="wxcs">维修次数</li> <li class="wxsj">平均用时(分)</li> </ul> <div id="personlist"> </div> <script type="text/javascript"> $(document).ready(function () { $(".datalist-item:odd").addClass("even_row"); }); </script> <div style="clear: both;"> </div> </div> <div style="clear: both;"> </div> </div> <!--footer--> <div class="layout-footer"> <div class="layout-footer-warp"> </div> <div class="layout-footer-bottom"> <div class="layout-footer-bottom-warp"> RSP2.0 -Repair service platform 版本号:2.01 版本时间:2014.5 </div> </div> </div> <!--footer end--> <div id="messge-box" class="messge-box yj5">提示信息</div> <div class="jump-top-box" style="right: 5px; visibility: visible; top: 606px;" id="gotoTop"> <div class="jump-top"> <a target="_self" href="#">返回顶部</a> </div> </div> </div> </form> </body> </html> <script language="javascript" type="text/javascript"> $(function () { $("#personlist").addClass("loading"); LoadData("year"); //加载数据 $(".box-nav-s li").click(function () { $(this).siblings().removeClass('on').end().addClass('on'); LoadData($(this).attr("data-value")); //加载数据 }); }); //加载 function LoadData(sdate) { $("#personlist").html(""); $("#personlist").addClass("loading"); var strurl = '../rsp/DataSolve/personlist.aspx' + "?token=<%=token%>"; strurl += '&dateType=' + sdate; $("#personlist").load(strurl, function (data) { $("#personlist").removeClass("loading"); }); } var loginuser = "0"; loginuser = "0"; $(document).ready(function () { $(".top-login,.top-exit").click(function () { switch ($(this).attr("data-value")) { case "登录": $.layer({ type: 2, title: false, shadeClose: true, area: ['660px', '360px'], offset: ['130px', ''], iframe: { src: 'pc/account/login/win?ReturnUrl=' + location.href } }); break; case "退出": layer.confirm('确定要退出吗?', function () { location.href = 'rsp/site/logout'; }); break; } }); //导航样式选择 $("#nav-pm").addClass("nav-on"); }); /*返回顶部*/ function gotoTop(min_height) { //预定义返回顶部的html代码,它的css样式默认为不显示 var gotoTop_html = '<div id="gotoTop">返回顶部</div>'; //将返回顶部的html代码插入页面上id为page的元素的末尾 $("#page").append(gotoTop_html); $("#gotoTop").click(//定义返回顶部点击向上滚动的动画 function () { $('html,body').animate({ scrollTop: 0 }, 700); }).hover(//为返回顶部增加鼠标进入的反馈效果,用添加删除css类实现 function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); //获取页面的最小高度,无传入值则默认为600像素 min_height ? min_height = min_height : min_height = 600; //为窗口的scroll事件绑定处理函数 $(window).scroll(function () { //获取窗口的滚动条的垂直位置 var s = $(window).scrollTop(); //当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐 if (s > min_height) { $("#gotoTop").fadeIn(100); } else { $("#gotoTop").fadeOut(200); }; }); }; gotoTop(); </script> ``` ``` using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace RepairSever.Rank { public partial class PersonEfficiency : System.Web.UI.Page { public string token; protected void Page_Load(object sender, EventArgs e) { string token = Comm.GetToken(this); if (String.IsNullOrEmpty(token)) { Comm.Alert(this, "检测不到贵校信息,请重新登录"); return; } // WorkerEfficiency worker =new t_bx_form_status().GetAllWorkerEffciencyByToken(string token); } } public class WorkerEfficiency { private string _workNo; private string _name; private string _cnt; private string _time; public String workNo { get { return _workNo; } set { _workNo = value; } } public String name { get { return _name; } set { _name = value; } } public String cnt { get { return _cnt; } set { _cnt = value; } } public string time { get { return _time; } set { _time = value; } } } } ```

如何实现子菜单的滚动样式

这是一个仿微信菜单的页面,先上代码 jsp页面代码: <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>New Document</title> <meta name="Generator" content="EditPlus"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <style type="text/css"> *{padding:0; margin:0;} .bg { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.8; } ul, ol, li, dl { list-style-type: none; } .box { width: 100%; display: -webkit-box; display: -moz-box; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; } .box > * { -webkit-box-flex: 1; -moz-box-flex: 1; } a:link, a:visited { color: #575757; text-decoration: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } a:link, a:visited { color: #575757; text-decoration: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } .nav4{ height:45px; } .nav4 ul{ position:fixed; z-index:200; bottom:0; left:0; width:100% } .nav4 li{ border:1px solid rgba(190,190,190,1); height:45px; border-bottom:0; border-right:0; position:relative; -webkit-box-shadow:inset 0 0 3px #fff; } .nav4 li:nth-of-type(1){border-left;0;} .nav4 li>a{ font-size:15px; -webkit-box-sizing:border-box; box-sizing:border-box; /*border:1px solid #f9f8f9;*/ -webkit-tap-highlight-color:rgba(0,0,0,0); border-bottom:0; display:block; line-height:45px; text-align:center; background:-webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc), color-stop(35% ,#ededed), color-stop(50%, #e3e3e3) ); } .nav4 li>a:only-child span{ background:none; padding-left:0; } .nav4 li>a.on + dl{ display: block; } .nav4 li>a span{ color: #4f4d4f; display: inline-block; padding-left: 15px; background: url(images/1.svg#2) no-repeat 4px 18px; -webkit-background-size: 9px auto; text-shadow:0px 1px 0px #ffffff; } /***********************/ .nav4 dl{ display:none; position:absolute; z-index:220; bottom:60px; left:50%; width:100px; margin-left:-50px; background:red; /*min-height:100px;*/ background:#e4e3e2; /*border:1px solid #afaeaf;*/ border-radius:5px; -webkit-box-shadow:inset 0 0 3px #fff; background:url(images/2.svg#3) no-repeat center center; -webkit-background-size:100%; background-size:100%; } /*, .nav4 dl:after*/ .nav4 dl:before{ content:""; display:inline-block; position:absolute; z-index:240; bottom:0; left:50%; /*width:0; height:0; border:8px solid red; border-color:#afaeaf transparent transparent transparent; margin-left:-8px; margin-bottom:-16px;*/ width:10px; height:8px; background: url(images/1.svg#2) no-repeat center -55px; -webkit-background-size: 10px auto; bottom: -7px; margin-left: -5px; } /*.nav4 dl:after{ z-index:241; border-color:#e4e3e2 transparent transparent transparent; margin-bottom:-15px; }*/ .nav4 dl dd{ line-height:45px; text-align:center; background:-webkit-gradient(linear, 0 0, 100% 0, from(rgba(194,194,194,0.8)), to(rgba(194,194,194,0.8)), color-stop(50%, rgba(194,194,194,0.8))); background-size:80% 1px; background-repeat:no-repeat; background-position: center bottom; /*background: url(images/3.svg#4) no-repeat center bottom; -webkit-background-size:100px 1px;*/ } .nav4 dl dd:last-of-type{ background:none; } .nav4 dl dd a{ font-size: 15px; display:block; color:#4f4d4f; text-shadow:0px 1px 0px #ffffff; white-space: pre; overflow: hidden; text-overflow: ellipsis; } .nav4 .masklayer_div{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 180; background: rgba(0,0,0,0); } .nav4 .masklayer_div.on{display: block;} </style> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> </head> <script src="js/nav4.js"></script> <body> <div class="bg"> </div> <div data-role="widget" data-widget="nav4" class="nav4"> <nav> <div id="nav4_ul" class="nav_4"> <ul class="box"> <li><a href="javascript:;" class=""><span>微信菜单</span></a> <dl> <dd> <a href="#"><span>子菜单1</span></a> </dd> <dd> <a href="#"><span>子菜单2</span></a> </dd> <dd> <a href="#"><span>子菜单3</span></a> </dd> <dd> <a href="#"><span>子菜单4</span></a> </dd> <dd> <a href="#"><span>子菜单5</span></a> </dd> <dd> <a href="#"><span>子菜单6</span></a> </dd> <dd> <a href="#"><span>子菜单7</span></a> </dd> <dd> <a href="#"><span>子菜单8</span></a> </dd> <dd> <a href="#"><span>子菜单9</span></a> </dd> <dd> <a href="#"><span>子菜单10</span></a> </dd> <dd> <a href="#"><span>子菜单11</span></a> </dd> <dd> <a href="#"><span>子菜单12</span></a> </dd> <dd> <a href="#"><span>子菜单13</span></a> </dd> <dd> <a href="#"><span>子菜单14</span></a> </dd> <dd> <a href="#"><span>子菜单15</span></a> </dd> <dd> <a href="#"><span>子菜单16</span></a> </dd> <dd> <a href="#"><span>子菜单17</span></a> </dd> <dd> <a href="#"><span>子菜单18</span></a> </dd> <dd> <a href="#"><span>子菜单19</span></a> </dd> <dd> <a href="#"><span>子菜单20</span></a> </dd> </dl></li> </ul> </div> </nav> <div id="nav4_masklayer" class="masklayer_div on">&nbsp;</div> <script type="text/javascript"> nav4.bindClick(document.getElementById("nav4_ul").querySelectorAll( "li>a"), document.getElementById("nav4_masklayer")); </script> </div> </body> </html> nav4.js代码: var nav4 =(function(){ bindClick = function(els, mask){ if(!els || !els.length){return;} var isMobile = "ontouchstart" in window; for(var i=0,ci; ci = els[i]; i++){ ci.addEventListener("click", evtFn, false); } function evtFn(evt, ci){ ci =this; for(var j=0,cj; cj = els[j]; j++){ if(cj != ci){ console.log(cj); cj.classList.remove("on"); } } if(ci == mask){mask.classList.remove("on");return;} switch(evt.type){ case "click": var on = ci.classList.toggle("on"); mask.classList[on?"add":"remove"]("on"); break; } } mask.addEventListener(isMobile?"touchstart":"click", evtFn, false); } return {"bindClick":bindClick}; })(); 当一个菜单上有20个子菜单,点击后只能看到11-20的子菜单,1-10 的子菜单无法看到,请问如何实现一个滚动的样式,让他全部显示

js判断屏幕分辨率 自适应

function switchClass(){ if($(window).width()<1200){ $('.middle').removeClass('page_xs ').removeClass('page_sm').addClass('page_lg'); }else if($(window).height()<272){ $('.middle').removeClass('page_lg').removeClass('page_sm').addClass('page_sm'); }else{ $('.middle').removeClass('page_xs').removeClass('page_lg').addClass('page_xs'); $('.page_right').css('left',($(window).width()-960)/2+500); } } 怎么不起作用你呢

Sublime text 2中的Dreamweaver默认页面设置?

<div class="post-text" itemprop="text"> <p>I really like dreamweaver and am trying to switch to sublime text. The only thing missing in sublime text is that when you create a new document you have to fill in all the page info (<code>&lt;!doctype html&gt;, &lt;html&gt;, &lt;head&gt;</code>) In dreamweaver it did this for you. Is there a way to do this in Sublime text? Thanks</p> </div>

ajax处理大量数据进度条超时 假死。

当处理数据量较大处理时间较长时,后台已经处理数据完成但前台的进度条不关闭一直在运行。 ![图片说明](https://img-ask.csdn.net/upload/201809/17/1537176363_708396.png) js代码 (function ($) { $.fn.loadUpload=function(options){ var options=$.extend(defaults,options||{}); var _this=$(this); var supportTransition = (function(){ var s = document.createElement('p').style, r = 'transition' in s || 'WebkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s; s = null; return r; })(); // WebUploader实例 var uploader; if ( !WebUploader.Uploader.support() ) { alert( 'Web Uploader 不支持您的浏览器!如果你使用的是IE浏览器,请尝试升级 flash 播放器'); throw new Error( 'WebUploader does not support the browser you are using.' ); } // 实例化 uploader = WebUploader.create({ pick: { id: $(this), label: options.filename }, paste: document.body, accept: { title: 'files', extensions: 'xlsx', mimeTypes: '.xlsx' }, formData: { tradeid:options.myversion }, // swf文件路径 swf: base_url+"/static/plugins/ueditor/third-party/webuploader/Uploader.swf", disableGlobalDnd: true, chunked: true, server: base_url+"/importWorkProcedure/saveimport2", fileNumLimit: 1,//只允许上传一个 fileSizeLimit: 50 * 1024 * 1024, // 200 M fileSingleSizeLimit:50 * 1024 * 1024 // 50 M }); uploader.onFileQueued = function( file ) { } uploader.on( 'all', function( type ) { var stats; switch( type ) { case 'uploadFinished': $(_this).css({"display":"none"}) break; case 'startUpload': $(_this).attr('disabled',"true"); break; case 'stopUpload': break; } }); uploader.onFileQueued = function( file ){ var title=$("#myversion").find("option:selected").text(); layer.confirm('确定要导入【'+title+"】工序集?", { btn : [ '确定', '取消' ]//按钮 }, function(index) { layer.close(index); uploader.upload(); }); } // 文件上传成功,给item添加成功class, 用样式标记上传成功。 uploader.on( 'uploadSuccess', function( file,ret) { parent.layer.closeAll(); console.log(ret); $(options.fileurl).append("<a target='_blank' href='"+ret.refpath+"'>["+ret.refname+"]上传成功</a>") $(options.fileurl).append("<input type='hidden' id='myversion_' value='"+ret.myversion+"'/>"); $(options.fileurl).append("<input type='hidden' id='tradeid_' value='"+ret.tradeid+"'/>"); $(options.fileurl).append("<a style='margin-left:5px;' class='btn btn-danger' onclick='deleteimg();' >删除</a>") $(options.queuelist).hide(); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { if(!$(options.queuelist+" .progress-bar").length){ $(options.queuelist).append('<div class="progress progress-striped active">' + '<div class="progress-bar" role="progressbar" style="width:100%">后台正在处理中,请耐心等待...' + '</div>' + '</div>'); } $(options.queuilist+" .progress-bar").css( 'width', percentage * 100 + '%' ); }); /** * 验证文件格式以及文件大小 */ uploader.on("error", function (type) { if (type == "Q_TYPE_DENIED") { layer.msg("请上传excel文件"); } else if (type == "Q_EXCEED_SIZE_LIMIT") { layer.msg("文件大小不能超过50M"); }else { layer.msg("请上传excel文件"); } }); deleteimg=function(){ var myversion=$("#myversion_").val(); var tradeid=$("#tradeid_").val(); var url=base_url+"/importWorkProcedure/deleteImportData.html"; $.post(url,{"myversion":myversion,"tradeid":tradeid},function(data){ if(data==true||data=="true"){ $(options.fileurl).html(""); $(_this).css({"display":"block"}); } },"json") } var defaults={ queuelist:".queueList", fileurl:"#fileurl", filename:"点击选择文件" } }; })(jQuery);

根据Internet可用性从联机切换到脱机样式表

<div class="post-text" itemprop="text"> <p><strong>Question / Problem:</strong> Is it possible to <strong>automatically switch between online stylesheet to offline stylesheets?</strong> <br> <br> For <strong>example</strong>, here in the office whenever I developed a site I need to connect to live bootstrap stylesheet, but whenever I go home I need offline stylesheet. I'm tired of commenting the stylesheets to be used. Is there any way?</p> <p><strong>Conclusion:</strong> Thanks to all, by using the code of linkinTED <strong>I've solved this problem of mine</strong>.</p> </div>

求助,基于HTML5的贪吃蛇

网页打开无法显示贪吃蛇和运行,而且有两处错误。![图片说明](https://img-ask.csdn.net/upload/202006/05/1591347613_674581.png) 这是代码 ``` <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>基于HTML5的贪吃蛇游戏的设计与实现</title> <link rel="stylesheet" href="css/snake.css"> <style> body{ background-color: silver;/*设置页面的背景颜色为银色*/ } /*游戏主页面的总体样式*/ #container{ text-align: center; width: 600px; margin: auto; padding: 10px; background-color: white; box-shadow: 10px 10px 15px gray; } /*状态栏样式*/ #status{ padding: 10px; width: 400px; height: 20px; margin: auto; } /*状态栏中栏目的盒子样式*/ .box{ float: left; width: 200px; } /*设置游戏按钮样式*/ button{ width: 200px; height: 50px; margin: 10px 0; border: 0; outline: none; font-size: 25px; font-weight: bold; color: white; background-color:lightcoral ; } /*设置鼠标悬浮时的按钮样式*/ button:hover{ background-color: coral; } </style> </head> <body> <div id="container"> <h3>基于HTML5的贪吃蛇游戏</h3> <hr> <!--状态栏信息--> <div id="status"> <!--历史最高分--> <div class="box"> 历史最高分:<span id="bestScore">0</span> </div> <!--当前分数--> <div class="box"> 当前分数:<span id="currentScore">0</span> </div> </div> <!--设置游戏画布--> <canvas id="myCanvas" width="400" height="400" style="border: 1px solid"></canvas> <div> <button onclick="window.location.reload()"> 重新开始 </button> </div> </div> <script> /* 游戏参数设置*/ /*游戏界面刷新的间隔时间*/ var time=200; /*蛇的身长*/ var t=3; /*记录蛇的运行轨迹,用数组记录每一个坐标点*/ var snakeMap=[]; /*蛇身单元大小*/ var w=10; /*方向代码:左37,上38,右39,下40*/ var direction=37; /*蛇的初始坐标*/ var x=0; var y=0; /*食物的初始坐标*/ var foodX=0; var foodY=0; /*当前得分*/ var score=0; /*历史最高记录*/ var bestScore=0; /*画布的宽和高*/ var width=400; var height=400; /*根据id找到指定的画布*/ var c=document.getElementById("myCanvas"); /*创建2D的context对象*/ var ctx=c.getContext("2d"); /*获得历史最高分记录*/ showBestScore(); /*开始游戏*/ GameStart(); /*显示历史最高分记录*/ function showBestScore(){ /*从本地存储数据中读取历史最高分*/ bestScore=localStorage.getItm("bestScore"); /*如果尚未记录最高分,则重置为0*/ if (bestScore==null) bestScore=0; /*讲历史最高分更新到状态栏中*/ var best=document.getElementById("bestScore"); best.innerHTML=bestScore; } /*启动游戏*/ function Gamestart(){ /*调用drawFood()函数,在随机位置绘制第一个事物*/ drawFood(); /*随机生成贪吃蛇的蛇头坐标*/ x=Math.floor(Math.random()*width/w)*w; y=Math.floor(Math.random()*height/w)*w; /*随机生成蛇的前进方向*/ direction=37+Math.floor(Math.random()*4); /*每隔time毫秒刷新一次游戏内容*/ setInterval("gameRefresh()",time); } /*游戏画面刷新函数*/ function gameRefresh(){ /*将当前坐标数据添加到贪吃蛇的运动轨迹坐标数组中*/ snakeMap.push({ 'x':x, 'y':y }) /*绘制贪吃蛇*/ drawSnake(); /*根据方向移动蛇头的下一个位置*/ switch(direction){ /*左37*/ case 37: x-=w; break; /*上38*/ case 38: y-=w; break; /*右39*/ case 39: x+=w; break; /*下40*/ case 40: y+=w; break; } /*碰撞检测,返回值0表示没有撞到障碍物*/ var code=detectCollision(); /*如果返回值不为0,表示游戏失败*/ if (code!==1) { /*如果当前得分高于历史得分,则更新历史最高分记录*/ if (score>bestScore) localStorage.setItem("bestScore",score); /*返回值1表示撞到墙壁*/ if (code==1) { alert("撞到了墙壁,游戏失败!当前得分:"+score); } /*返回值2表示撞到蛇身*/ else if (code==2) { alert("撞到蛇身,游戏失败!当前得分:"+score); } /*重新加载页面*/ window.location.reload(); } /*吃到食物的判定*/ if (foodX==x && foodY==y) { /*吃到一次食物加10分*/ score+=10; /*更新状态栏中的当前分数*/ var currentScore=document.getElementById ("currentScore"); currentScore.innerHTML=score; /*在随机位置绘制下一个食物*/ drawFood(); /*蛇身长度加1*/ t++; } /*绘制贪吃蛇函数*/ function drawSnake(){ /*设置蛇身内部的填充颜色*/ ctx.fillStyle="lightbule"; /*绘制最新位置的蛇身矩形*/ ctx.fillRect(x,y,w,w); /*数组只保留蛇身长度的数据,如果蛇前进了则删除最旧的坐标数据*/ if (snakeMap.length>t) { /*删除数组的第一项,即蛇的尾部的最后一个位置的坐标记录*/ var lastBox=snakeMap.shift(); /*清除蛇的尾部的最后一个位置,从而实现移动效果*/ ctx.clearRect(lastBox['x'],lastBox['y'],w,w); } } /*改变蛇方向的按键监听*/ //==================== document.onkeydown=function(e){ /*根据按键更新前进方向code:左37,上38,右39,下40*/ if (e.keyCode==37||e.keyCode==38||e.keyCode==39|e.keyCode==40) direction=e.keyCode; } /*碰撞检测函数*/ function detectCollision(){ /*蛇头碰撞到了四周的墙壁,游戏失败*/ if (x>width||y>height||x<0||y<0) { return 1; } /*蛇头碰撞到了蛇身,游戏失败*/ for (var i = 0;i<snakeMap.length;i++) { if (snakeMap[i],x==x && snakeMap[i],y==y) { return 2; } } return 0; } /*绘制食物函数*/ function drawFood(){ /*随机生成食物坐标*/ foodX=Math.floor(Math.random()*width/w)*w; foodY=Math.floor(Math.random()*height/w)*w; /*内部填充颜色*/ ctx.fillStyle="#FF0000"; /*绘制矩形*/ ctx.fillRect(foodX,foodY,w,w); } </script> </body> </html> ```

有没有办法使用PHP加载备用样式表?

<div class="post-text" itemprop="text"> <p>I'm building a mobile version of my site, and at this point, creating an alternate stylesheet would suffice to make the site adept for mobile devices. I want to use a user agent detection PHP script to detect the platform, and switch stylesheets accordingly. Is there any way to do that?</p> </div>

jQuery上传插件Uploadify 3.2在.NET下的详细例子

项目中要使用Uploadify 3.2来实现图片上传并生成缩略通的功能,特此记下来,以供各位参考! Uploadify下载地址:http://www.uploadify.com/download/ 下载下来解压后估计里面很多文件,其实有用的也就jquery.uploadify.min.js、uploadify.css、uploadify.swf和uploadify-cancel.png这四个文件。你还得下载jQuery库,我这里用的是jquery-1.7.2.min.js,另外和大多数JQ插件一样,同时也需要swfobject.js这个插件,我的是2.2的版本,东西都准备好了,那下面就开始。 前端界面: [html] view plain copy <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jqUploadify._Default" %> <!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 runat="server"> <title>无标题页</title> <link href="scripts/uploadify.css" rel="stylesheet" type="text/css" /> <link href="scripts/default.css" rel="stylesheet" type="text/css" /> <script src="scripts/jquery-1.7.2.min.js" type="text/javascript"></script> <script src="scripts/swfobject.js" type="text/javascript"></script> <script src="scripts/jquery.uploadify.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("#file_upload").uploadify({ //开启调试 'debug' : false, //是否自动上传 'auto':false, 'buttonText':'选择照片', //flash 'swf': "scripts/uploadify.swf", //文件选择后的容器ID 'queueID':'uploadfileQueue', 'uploader':'scripts/upload.ashx', 'width':'75', 'height':'24', 'multi':false, 'fileTypeDesc':'支持的格式:', 'fileTypeExts':'*.jpg;*.jpge;*.gif;*.png', 'fileSizeLimit':'1MB', 'removeTimeout':1, //返回一个错误,选择文件的时候触发 'onSelectError':function(file, errorCode, errorMsg){ switch(errorCode) { case -100: alert("上传的文件数量已经超出系统限制的"+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件!"); break; case -110: alert("文件 ["+file.name+"] 大小超出系统限制的"+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小!"); break; case -120: alert("文件 ["+file.name+"] 大小异常!"); break; case -130: alert("文件 ["+file.name+"] 类型不正确!"); break; } }, //检测FLASH失败调用 'onFallback':function(){ alert("您未安装FLASH控件,无法上传图片!请安装FLASH控件后再试。"); }, //上传到服务器,服务器返回相应信息到data里 'onUploadSuccess':function(file, data, response){ //alert(data); } }); }); function doUplaod(){ $('#file_upload').uploadify('upload','*'); } function closeLoad(){ $('#file_upload').uploadify('cancel','*'); } </script> </head> <body> <table width="704" border="0" align="center" cellpadding="0" cellspacing="0" id="__01"> <tr> <td align="center" valign="middle"> <div id="uploadfileQueue" style="padding: 3px;"> </div> <div id="file_upload"> </div> </td> </tr> <tr> <td height="50" align="center" valign="middle"> <img alt="" src="images/BeginUpload.gif" width="77" height="23" onclick="doUplaod()" style="cursor: hand" /> <img alt="" src="images/CancelUpload.gif" width="77" height="23" onclick="closeLoad()" style="cursor: hand" /> </td> </tr> </table> </body> </html> 后端的Handler: [csharp] view plain copy using System; using System.Collections; using System.Data; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; using System.Web.SessionState; using System.IO; namespace jqUploadify.scripts { /// <summary> /// $codebehindclassname$ 的摘要说明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] public class upload : IHttpHandler, IRequiresSessionState { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = context.Server.MapPath("..\\uploads\\"); if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } file.SaveAs(uploadPath + file.FileName); //生成缩略图 MakeThumbnail(uploadPath + file.FileName, uploadPath + "\\s\\" + file.FileName, 80, 80); } } private void MakeThumbnail(string sourcePath, string newPath, int width, int height) { System.Drawing.Image ig = System.Drawing.Image.FromFile(sourcePath); int towidth = width; int toheight = height; int x = 0; int y = 0; int ow = ig.Width; int oh = ig.Height; if ((double)ig.Width / (double)ig.Height > (double)towidth / (double)toheight) { oh = ig.Height; ow = ig.Height * towidth / toheight; y = 0; x = (ig.Width - ow) / 2; } else { ow = ig.Width; oh = ig.Width * height / towidth; x = 0; y = (ig.Height - oh) / 2; } System.Drawing.Image bitmap = new System.Drawing.Bitmap(towidth, toheight); System.Drawing.Graphics g = System.Drawing.Graphics.FromImage(bitmap); g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.High; g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality; g.Clear(System.Drawing.Color.Transparent); g.DrawImage(ig, new System.Drawing.Rectangle(0, 0, towidth, toheight), new System.Drawing.Rectangle(x, y, ow, oh), System.Drawing.GraphicsUnit.Pixel); try { bitmap.Save(newPath, System.Drawing.Imaging.ImageFormat.Jpeg); } catch (Exception ex) { throw ex; } finally { ig.Dispose(); bitmap.Dispose(); g.Dispose(); } } public bool IsReusable { get { return false; } } } } 这样我们就是实现图片上传至uploads,生成的缩略图(这里设为80*80)存放在uploads下面的s文件夹中,是不是很简单呢!当然实际使用过程你还可能碰到一下的问题: 1、在火狐下session出现丢失的情况,可以参考这里:http://www.cnblogs.com/akingyao/archive/2012/09/04/2670794.html 2、IE9出现了按钮不能点击的问题,可以参考这里:http://www.uploadify.com/forum/#/discussion/9155/uploadify-version-3-2-does-not-work-in-ie9/p1 最后贴一个Uploadify参数说明: Uploadify Version 3.2 Options选项设置 auto 选择文件后自动上传 buttonClass 给“浏览按钮”加css的class样式 buttonCursor 鼠标移上去形状:arrow箭头、hand手型(默认) buttonImage 鼠标移上去变换图片 buttonText 按钮文字 checkExisting 在目录中检查文件是否已上传成功(1 ture,0 false) debug 是否显示调试框(默认不显示false) fileObjName 设置一个名字,在服务器处理程序中根据该名字来取上传文件的数据。默认为Filedata,$tempFile = $_FILES['Filedata']['tmp_name'] fileSizeLimit 设置允许上传文件最大值B, KB, MB, GB 比如:'fileSizeLimit' : '20MB' fileTypeDesc 选择的文件的描述。这个字符串出现在浏览文件对话框中文件类型下拉框处。默认:All Files fileTypeExts 允许上传的文件类型。格式:'fileTypeExts' : '*.gif; *.jpg; *.png' formData 附带值,需要通过get or post传递的额外数据,需要结合onUploadStart事件一起使用 height “浏览按钮”高度px itemTemplate <itemTemplate>节点表示显示的内容。这些内容中也可以包含绑定到控件DataSource属性中元素集合的数据。 method 上传方式。默认:post multi 选择文件时是否可以【选择多个】。默认:可以true overrideEvents 不执行默认的onSelect事件 preventCaching 随机缓存值 默认true ,可选true和false.如果选true,那么在上传时会加入一个随机数来使每次的URL都不同,以防止缓存.但是可能与正常URL产生冲突 progressData 进度条上显示的进度:有百分比percentage和速度speed。默认百分比 queueID 给“进度条”加背景css的ID样式。文件选择后的容器ID queueSizeLimit 允许多文件上传的数量。默认:999 removeCompleted 上传完成后队列是否自动消失。默认:true removeTimeout 上传完成后队列多长时间后消失。默认 3秒 需要:'removeCompleted' : true,时使用 requeueErrors 队列上传出错,是否继续回滚队列,即反复尝试上传。默认:false successTimeout 上传超时时间。文件上传完成后,等待服务器返回信息的时间(秒).超过时间没有返回的话,插件认为返回了成功。 默认:30秒 swf swf文件的路径,本文件是插件自带的,不可用其它的代替.本参数不可省略 uploader 上传处理程序URL,本参数不可省略 uploadLimit 限制总上传文件数,默认是999。指同一时间,如果关闭浏览器后重新打开又可上传。 width “浏览按钮”宽度px Events 事件 onCancel 当取消一个上传队列中的文件时触发,删除时触发 onClearQueue 清除队列。当'cancel'方法带着*参数时,也就是说一次全部取消的时候触发.queueItemCount是被取消的文件个数(另外的按钮) onDestroy 取消所有的上传队列(另外的按钮) onDialogClose 当选择文件对话框关闭时触发,不论是点的'确定'还是'取消'都会触发.如果本事件被添加进了'overrideEvents'参数中,那么如果在选择文件时产生了错误,不会有错误提示框弹出 onDialogOpen 当选择文件框被打开时触发,没有传过来的参数 onDisable 关闭上传 onEnable 开启上传 onFallback 检测FLASH失败调用 onInit 每次初始化一个队列时触发 onQueueComplete 当队列中的所有文件上传完成时触发 onSelect 当文件从浏览框被添加到队列中时触发 onSelectError 选择文件出错时触发 onSWFReady flash准备好时触发 onUploadComplete当一个文件上传完成时触发 onUploadError 当文件上传完成但是返回错误时触发 onUploadProgress上传汇总 onUploadStart 一个文件上传之间触发 onUploadSuccess 每个上传完成并成功的文件都会触发本事件 Methods 方法 cancel 取消一个上传队列 destroy 取消所有上传队列 disable 禁止点击“浏览按钮” settings 返回或修改一个 uploadify实例的settings值 stop 停止当前的上传并重新添加到队列中去 upload 上传指定的文件或者所有队列中的文件 最后是DEMO的下载地址:http://download.csdn.net/detail/wangqiuyun/566551

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c#跨线程停止timer c#批量写入sql数据库 c# 自动安装浏览器 c#语言基础考试题 c# 偏移量打印是什么 c# 绘制曲线图 c#框体中的退出函数 c# 按钮透明背景 c# idl 混编出错 c#在位置0处没有任何行
立即提问