Home Php C# Sql C C++ Javascript Python Java Go Android Git Linux Asp.net Django .net Node.js Ios Xcode Cocoa Iphone Mysql Tomcat Mongodb Bash Objective-c Scala Visual-studio Apache Elasticsearch Jar Eclipse Jquery Ruby-on-rails Ruby Rubygems Android-studio Spring Lua Sqlite Emacs Ubuntu Perl Docker Swift Amazon-web-services Svn Html Ajax Xml Java-ee Maven Intellij-idea Rvm Macos Unix Css Ipad Postgresql Css3 Json Windows-server Vue.js Typescript Oracle Hibernate Internet-explorer Github Tensorflow Laravel Symfony Redis Html5 Google-app-engine Nginx Firefox Sqlalchemy Lucene Erlang Flask Vim Solr Webview Facebook Zend-framework Virtualenv Nosql Ide Twitter Safari Flutter Bundle Phonegap Centos Sphinx Actionscript Tornado Register | Login | Edit Tags | New Questions | 繁体 | 简体


10 questions online user: 3

7
votes
answers
58 views
+10

在悬停时翻转半圆

我想在悬停时翻转半圆。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; }   
 < div class =“main”> < div style =“height:100px;”> < / DIV> < div class =“btm” > < / DIV> < / DIV>     

上面的代码圆圈的底部是红色的,我想要的只是我想让圆圈的顶部成为悬停时红色

任何帮助都会得到赞赏。

沙发
+30
+50

您可以使用线性渐变(180度,透明50%,红色50%); 轻松实现此目的。你可以在主要部门悬停时交换颜色。希望这是你要找的。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 背景:线性梯度(180度,透明度50%,红色50%); } .main:hover {background:linear-gradient(180deg,red 50%,transparent 50%); }   
 
			
        
+30

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 过渡:全部0.5秒轻松; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; 过渡:全部0.5秒轻松; } .div-1 {border-top-left-radius:190px; 过渡:全部0.5秒轻松; border-top-right-radius:190px; } .main:hover .div-1 {background:red; 过渡:全部0.5秒轻松; } .main:hover .btm {background:white; 过渡:全部0.5秒轻松; }   < pre class =“snippet-code-html lang-html prettyprint-override”> &lt;!DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;     

我添加了过渡效果并使用了您的代码!希望它能帮助 DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 DOCTYPE html&gt; &LT; HTML&GT; &LT; HEAD&GT; &lt; meta charset =“utf-8”&gt; &lt; meta name =“viewport”content =“width = device-width”&gt; &lt; title&gt; JS Bin&lt; / title&gt; &LT; /头&GT; &LT;身体GT; &lt; div class =“main”&gt; &lt; div style =“height:100px;” 类= “DIV-1” &GT; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助 LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &LT; / DIV&GT; &LT; /体&GT; &lt; / html&gt;

我添加了过渡效果并使用了您的代码!希望它能帮助

+10

试试这个。

  .main {position:relative; 身高:200px; 宽度:200px; 边框:2px实心绿色; border-radius:190px; } .semi-circle {position:absolute; 位置:绝对; border-bottom-left-radius:200px; border-bottom-right-radius:200px; 背景颜色:红色; 身高:100px; 宽度:200px; 最高:50%; } .main:hover .semi-circle {transform:rotate(180deg); 最高:0%; }   
 &lt; div class =“main”&gt; &lt; div class =“semi-circle”&gt; &LT; / DIV&GT; &lt; / div&gt;    

     
			
        
0

你所要做的就是将你的div翻译到顶部,同时将它旋转到180度。

同样有一个CSS属性 transform:translate(tx) ,ty)旋转(度);

这里 tx 代表像素,你要翻译 x-axis ,< code> ty 代表像素,你要在 y轴上翻译, degrees 代表你想要旋转对象的度数。

你的代码是一样的。我刚刚添加了一个CSS类来使它工作。看看。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 border-radius:190px; 身高:200px; 宽度:200px; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; } .main:hover .btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。 btm {transform:translate(0,-100px)rotate(180deg); }

 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;     

谢谢。

0

这是一个依赖于 background-clip

  .main {边框:2px实心绿色; border-radius:50%; 身高:200px; 宽度:200px; 箱尺寸:边界盒; 背景色:红色; 背景剪辑:内容盒; 填充:100px 0 0; } .main:hover {padding:0 0 100px; }   
 &lt; div class =“main”&gt; &lt; / div&gt;     < p>您可以轻松转换的位置: 

  .main {border:2px solid green ; border-radius:50%; 身高:200px; 宽度:200px; 箱尺寸:边界盒; 背景色:红色; 背景剪辑:内容盒; 填充:100px 0 0; 过渡:1秒; } .main:hover {padding:0 0 100px; }   
 &lt; div class =“main”&gt; &lt; / div&gt;     

如果你想要一个翻译动画,这里有一个渐变的想法:

  .main {border :2px纯绿色; border-radius:50%; 身高:200px; 宽度:200px; 背景:线性渐变(红色,红色)底部; 背景大小:100%50%; 背景重复:不重复; 过渡:1秒; } .main:hover {background-position:top; }   
 &lt; div class =“main”&gt; &LT; / DIV&GT;  

     
			
        
0

你可以看到这个例子:

  .main {border:2px solid green; border-radius:190px; 身高:200px; 宽度:200px; 位置:相对; 溢出:隐藏; } .btm {border-bottom-left-radius:190px; border-bottom-right-radius:190px; 背景颜色:红色; 身高:100px; 位置:绝对的; 最高:50%; 左:0; 宽度:100%; 过渡:.3s; } .main:hover .btm {top:0; border-top-left-radius:190px; border-top-right-radius:190px; border-bottom-left-radius:0; border-bottom-right-radius:0; }   
 &lt; div class =“main”&gt; &lt; div style =“height:100px;”&gt; &LT; / DIV&GT; &lt; div class =“btm”&gt; &LT; / DIV&GT; &lt; / div&gt;    

     
			
        

最初我希望在悬停时底部看起来是红色的我想让顶部变红。 - 昨天的Deepshika S.

在你的答案中,最初的底部不是红色 - 昨天的Deepshika S.

请检查我的更新代码。:) - TanBir开发人员23小时前

0
votes
answers
106 views
+10

Simultaneos方程求解使用HTML和Javascript

-2

目的項目:Simultaneos方程求解使用HTML和Javascript

爲了解決使用矩陣由兩個線性方程的聯立方程,式:

     X = A^-1 * B 

其中A是由基質的兩個方程的係數,B是由兩個方程的結果組成的矩陣,而X是由兩個變量x和y組成的矩陣。

使用的語言: HTML和JavaScript在單個文件中。

問題:

我該項目的第一個版本是在這裏如下:

https://pastebin.com/mgGReYTL

當我在瀏覽器中打開它(谷歌瀏覽器的最新版本),HTML部分按預期工作,但是,當我單擊「解決」按鈕時,它不會執行任何操作。

所以我試圖用另一種方法:

https://pastebin.com/RbykTH0y

但結果仍然是相同的(HTML工作的罰款,而點擊「解決」按鈕不執行任何操作)。

任何人都可以花一點時間來嘗試爲我提供解決這個問題的方法。

您的努力,您的解決方案,將不勝感激。 :-)

P.S:代碼實際上並不那麼大。

+0

歡迎堆棧溢出!你的問題的全部內容,必須在**你的問題,而不僅僅是鏈接**。鏈接腐爛,使問題及其答案在未來的人們中毫無用處,人們不應該離開現場去幫助你。在**問題中放置[mcve] **,理想情況下使用Stack Snippets('>'工具欄按鈕)使其可以運行([這裏是如何做一個]](https://meta.stackoverflow.com/questions/358992 /香港專業教育學院,被其中透露的to-do-A-運行的,例如與 - 堆棧段,如何-DO-I-DO-THA))。更多:[*我如何提出一個好問題?*](/ help/how-to-ask) –

沙发
0
1

問題是你的函數被稱爲「multiply2d * 1d」。 '*'字符不允許在js的名字裏。有關詳細規則請參見:What characters are valid for JavaScript variable names?

Here a working fiddle (I just changed the function name): 

https://jsfiddle.net/zfkjtax4/

+0

非常感謝,我甚至沒有意識到我的問題太過於愚蠢。 –

0
votes
answers
43 views
+10

如何檢測夜間模式事件 - JavaScript?

0

是否有任何用於改變模式時觸發的夜間模式或javascript事件的CSS前綴?如果用戶啓用夜間模式,我需要元素的自定義顏色。如何檢測夜間模式事件 - JavaScript?

另外如何觸發夜間模式事件像Twitter呢?

感謝

+0

沒有它不是,如果用戶能夠從瀏覽器夜間模式設置 –

沙发
0
0

因爲「夜間模式」,將不僅涉及改變背景顏色,而且字體顏色(加上可能有很多其他的事情)我會推薦一個解決方案,如本:

例如HTML:現在

<body class="night"> 

,在標準模式下body標籤不會有night類默認,但你會通過撥動類福添加此比如jQuery的toggleClass

然後在CSS這樣做...

CSS:

body { 
    color: #000; 
    background-color: #fff; 
} 

body.night { 
    color: #fff; 
    background-color: #000;  
} 

注:僅作爲舉例,請不要在黑色背景上用白色文本:)

現在,當班級切換並添加night類時,所有顏色都會改變,頁面將處於「夜間」模式。

不確定您是否還想要在頁面刷新/導航期間使此模式「粘」的說明;如果是這樣的話,那麼最好在sessioncookie的情況下處理,因爲這會在瀏覽器關閉時過期。

+0

但是,如何檢測用戶改變國防部工作e? –

+0

沒有檢測,只有一個功能。可以初始化'darkmode.css'的**按鈕**或**撥號器**(例如)。我通過創建一個'jQuery'函數來實現,當用戶想要啓用'Dark Mode'時,''link type =「stylesheet」href =「darkmode.css>」'到''標籤。但這**不是非常有效,因爲瀏覽器不保存用戶首選項(不啓用緩存)。 –

+0

@IsmailFarooq你是什麼意思「發現」 - 你的意思是我在最後一句話中談論的是什麼?在用戶切換到網站後,確保在網站導航過程中保持夜間模式不變? – Brett

板凳
0
0

有一個CSS濾鏡,我不知道,Twitter的使用是這樣的(沒有圖像倒置只有文本和背景

注1:你可以降低翻轉過濾器的指數,爲前:0.8 注2:不支持IE :(但支持EDGE它

$('button').on('click', function(){ 
 
    $('.wrap').toggleClass('day night') ; 
 
});
.wrap{ 
 
    background: white; 
 
} 
 
.day{ 
 
    filter: invert(0); 
 
} 
 

 
.night{ 
 
    filter: invert(1); 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="wrap day"> 
 
    <img src="https://placeimg.com/200/150/any" /> 
 

 
    <p>Lorem ipsus </p> 
 
    <button>Day/night</button> 
 
    
 
</div>

+0

其實我的主要問題是如何檢測用戶啓用夜間模式或不是 –

+0

在Twitter上具體您認爲? –

+0

手機瀏覽器上有一個選項,尤其是「啓用夜間模式」我想跟蹤該選項是否有任何事件呢? –

0
votes
answers
72 views
+10

哪個圖像擴展對質量和性能(速度)更好?

0

我有一個html網站(純HTMl,CSS,JS),我正在使用一些圖像(主圖像 - 一些圖標),用於主圖像(每個頁面頂部的圖像覆蓋所有寬度)每個大約是3000 x 1264。哪個圖像擴展對質量和性能(速度)更好?

例如所謂的「」的形象,如果我使用「PNG」擴展規模將約2MB,如果我使用「JPG」大小會約700KB,對於性能和速度,我會選擇「JPG」,因爲它大約小於「PNG」的一半,但恐怕這可能會影響圖像質量。

所以我想知道什麼是最好的擴展使用,不會影響性能和圖像質量? 它不必是「PNG」或「JPG」

沙发
0
0

取決於。例如,對於照片來說,JPG通常是一種很好的妥協方式,對於需要透明度的圖形元素來說,PNG是一種妥協。

一般來說,網頁的2MB圖片太多了。您必須在質量和重量之間妥協,並使用壓縮工具,如ShortPixel

板凳
0
0

它們都有它們的用途。

JPEG

JPG文件已成爲互聯網事實上的標準圖像,因爲它們可以被壓縮這麼多。根據您的設置,典型的JPG可以以2:1到100:1之間的任何比例進行壓縮。特別是在撥號互聯網時代,JPG是唯一可行的發送圖像信息的方式。

但是,由於JPG的有損性質,它不是存儲藝術品文件的理想方式。即使是最高質量的JPG設置也會被壓縮,並且會稍微改變圖像的外觀。 JPG也不適合印刷,清晰的線條,甚至邊緣鋒利的照片,因爲它們通常會因反鋸齒而變得模糊或模糊。可能更糟糕的是,這種損失可能會累積 - 保存多個版本的作品可能會導致每次保存降級。即使這樣,通常也會將這些內容保存爲JPG,這僅僅是因爲文件類型非常普遍。

PNG

PNG支持8位色如GIF,而且還支持24位色RGB,像JPG一樣。它們也是無損文件,壓縮照片圖像而不降低圖像質量。 PNG往往是三種文件類型中最大的一種,並且一些(通常是較老的)瀏覽器不支持PNG。

除了是一種優秀的透明度格式之外,24位PNG的無損性質非常適用於屏幕截圖軟件,允許用於像素重現桌面環境的像素。

0
votes
answers
44 views
+10

爲什麼是JavaScript的代碼不能在瀏覽器

-2
運行

我正在練習的JavaScript和它是如何工作的HTML和我的一章的做法說我應該運行這段代碼,它會在我的瀏覽器中運行爲什麼是JavaScript的代碼不能在瀏覽器

<html> 
 
    <head> 
 
     <title>B2,P1</title> 
 
     Java Script Practices 
 
    </head> 
 
    <body> 
 
     <script type="text/javascript"> 
 
      alert("Java Script is working in your Browser"); 
 
     </script> 
 
    </body> 
 
</html>

但它不工作,甚至沒有顯示警報窗口!爲什麼!

+2

完美的工作在這裏......你檢查你的瀏覽器沒有JS禁用? – 3Dos

+1

您是否按下了'Run code snippet' – brk

+0

,並且我也有一個警告框,請確保JS處於啓用狀態?什麼是您的瀏覽器?我在鍍鉻上運行 – AK0101

沙发
0
0

你可以運行它嗎?

<script> 
alert("Hello world"); 
</script> 
<noscript>Your browser does not support JavaScript!</noscript> 
+0

是的,它運行..但我的直到我刪除(「)並將其替換爲(')在警報中。 – saronstrar

0
votes
answers
63 views
+10

PHP檢查字段是否爲空

0

我正在做一個註冊表單,並且我試圖編寫一個代碼,如果用戶沒有填寫所有字段,將顯示錯誤。它工作正常,但由於某種原因,它只適用於我輸入電子郵件。如果我將所有字段留空並單擊註冊,我不會收到任何錯誤,並且所有字段爲空,當我單擊註冊按鈕時,我的光標會轉到電子郵件字段並被激活(此字段)。 這封郵件有問題,但我找不到任何問題,所以錯在哪裏?PHP檢查字段是否爲空

PHP源代碼:

if(empty($_POST['fname']) || empty($_POST['lname']) || empty($_POST['email']) || empty($_POST['password'])) 
{ 
    $error="Fill all fields!"; 
} 

HTML:

<form action="register.php" method="POST"> 
    <input style="margin-top:10px" type="text" value="First Name" name="fname" onblur="if (this.value == '') {this.value = 'First Name';}" onfocus="if (this.value == 'First Name') {this.value = '';}" /> 

    <input type="text" value="Last Name" name="lname" onblur="if (this.value == '') {this.value = 'Last Name';}" onfocus="if (this.value == 'Last Name') {this.value = '';}" /> 

    <input type="email" value="Adres e-mail" name="email" onblur="if (this.value == '') {this.value = 'Adres e-mail';}" onfocus="if (this.value == 'Adres e-mail') {this.value = '';}" /> 

    <p><input type="password" value="Password" name="password" onblur="if (this.value == '') {this.value = 'Password';}" onfocus="if (this.value == 'Password') {this.value = '';}" /></p> 

    <button type="submit" name="submit"> Register</button> </br> 
    </br> 

</form> 
+0

這是什麼問題的現狀如何? – chris85

沙发
0
0

由於其它字段是type="text"和空被認爲是空字符串""。試着檢查它們是否不爲空。 ;)

例如:

if(isset($_POST["fname"]) && (strlen($_POST["fname"]) > 0) && isset($_POST["lname"]) && (strlen($_POST["lname"]) > 0) && isset($_POST["email"]) && isset($_POST["password"])){ 
    //your code 
} 

對於電子郵件和密碼,您可以跳過空的,如果你讓他們在HTML5需要我猜。

+1

不要依賴客戶端驗證。 'isset'和'!empty'基本上是一樣的東西。 '這意味着empty()實質上就是!isset($ var)||的簡潔等價物$ var == false'-http://php.net/manual/en/function.empty.php – chris85

+0

嗨chris85,現在應該會更好我猜...只要檢查長度 – oetoni

+0

@ chris85 isset和!空不是一回事 –

板凳
0
0

我不認爲它們是空的。他們將不明確或""。使用print_r($_POST['name'])爲每一個,看看他們回來了。然後你會看到他們是否空了。

+0

如... print_r($ _ POST ['fname']); – newCoder

地板
0
0

你必須你佔位符而不是

<form action="index3.php" method="POST" > 

    <input style="margin-top:10px" type="text" placeholder="First Name" name="fname" 
    onblur="if (this.placeholder == '') {this.placeholder = 'First Name';}" 
    onfocus="if (this.placeholder == 'First Name') {this.placeholder = '';}" /> 

    <input type="text" placeholder="Last Name" name="lname" 
    onblur="if (this.placeholder == '') {this.placeholder = 'Last Name';}" 
    onfocus="if (this.placeholder == 'Last Name') {this.placeholder = '';}" /> 

    <input type="email" placeholder="Adres e-mail" name="email" 
    onblur="if (this.placeholder == '') {this.placeholder = 'Adres e-mail';}" 
    onfocus="if (this.placeholder == 'Adres e-mail') {this.placeholder = '';}" /> 

    <p><input type="password" placeholder="Password" name="password" 
    onblur="if (this.placeholder == '') {this.placeholder = 'Password';}" 
    onfocus="if (this.placeholder == 'Password') {this.placeholder = '';}" /></p> 

    <button type="submit" name="submit"> Register</button> </br></br> 

</form> 
+0

你的答案仍然使用「值」。 – chris85

4楼
0
0

onbluronfocus事件使每個輸入的value總是被填充,所以當你提交的每個領域都有它的默認值,或者你把它改爲。更好的解決方案是使用placeholder屬性。這將保持value爲空,直到用戶填充它們。

<form action="register.php" method="POST"> 
    <input style="margin-top:10px" type="text" value="First Name" name="fname" placeholder="First Name" /> 
    <input type="text" value="Last Name" name="lname" placeholder="Last Name" /> 
    <input type="email" value="Adres e-mail" name="email" placeholder="Adres e-mail" /> 
    <p><input type="password" value="Password" name="password" placeholder="Password" /></p> 
    <button type="submit" name="submit"> Register</button> </br> 
    </br> 
</form> 

這也應該功能密碼字段更好,因爲我懷疑你以前有password爲8要點。

服務器端,您可以驗證這是通過輸出$_POST陣列var_dumpprint_r的原因,或者通過遍歷它foreach($_POST as $name => value)

5楼
0
0

首先,你的PHP代碼是正確的。但是您的HTML表單有一些技術錯誤。您必須設置placeholder屬性用於顯示輸入框中的字段名稱,因爲運行onBlur事件時,該值已設置爲字段並將字符串發送到服務器,並且NOT NULL!通過這種方式,您的PHP代碼不適用於檢查空值。您必須執行的第二項工作,請通過爲每個輸入元素輕鬆設置required屬性來檢查客戶端中的字段是否爲空。我寫了正確的html標籤,你必須使用。

<form action="register.php" method="POST"> 
 
     <input style="margin-top:10px" type="text" name="fname" placeholder="First Name" required /> 
 

 
     <input type="text" name="lname" placeholder="Last Name" required /> 
 

 
     <input type="email" name="email" placeholder="Adres e-mail" required /> 
 

 
     <p><input type="password" name="password" placeholder="Password" required /></p> 
 

 
     <button type="submit" name="submit"> Register</button> </br> 
 
     </br> 
 

 
    </form>

爲PHP代碼,你可以使用的foreach簡單地方式:

$error=""; 
foreach($_POST as $key => $value) { 
    if(empty($_POST[$key])) 
    { 
     $error="Fill all fields!"; 
     break; 
    } 
} 
0
votes
answers
49 views
+10

如何在此表單中製作reCaptcha?

0

我該如何做到這一點?
HTML表單代碼:如何在此表單中製作reCaptcha?

<div id="myDIV" style=""> 
<form name="login"> 
<h2 style="position:relative;right:107;bottom:10">Sign in</h2><p style="position:relative;right:55;bottom:5">to NASP Stacks database</p> 
<input class="input" name="id" type="text" placeholder="Username"><br><br> 
<input name="pass" type="password" class="input" placeholder="Password"><br><br> 
<script> 
{ 
    "success": true|false, 
    "challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ) 
    "hostname": string,   // the hostname of the site where the reCAPTCHA was solved 
    "error-codes": [...]  // optional 
} 
</script> 
<div class="g-recaptcha" data-sitekey="6LdHRDgUAAAAAFg8efAOvTVM_9crHq_UQm_aveaW"></div><br> 
<b><input class="button" type="button" value="NEXT" onClick="pasuser(this.form)"></b> 
</form> 
</div> 

我怎樣才能讓reCAPTCHA的這種形式必填字段?我嘗試了其他帖子,但他們沒有工作。我之前添加了很多東西,但他們沒有工作,他們堵塞了代碼。任何人都知道如何使它成爲必需的?

沙发
0
0

只需添加required到您的輸入:

<input class="button" type="button" value="NEXT" onClick="pasuser(this.form)" required> 

注:我不明白你的腳本代碼:/

板凳
0
0

你見過此相關的職位? reCaptcha field as required

我相信你需要有一個Javascript回調函數來驗證recaptcha的響應才能繼續。由於您的表單沒有提交輸入,我想您需要在onClick事件的回調函數中進行驗證。

onClick="pasuser(this.form)" 
0
votes
answers
50 views
+10

將值輸出給用戶

0

我試圖弄清楚如何將num1 num2和func的值輸出到用戶看到的屏幕上。這是一個計算器應用程序即時試圖完全功能。該應用程序已經工作,但我似乎無法得到數字和操作設置爲變量func顯示給用戶的屏幕。 如果您需要更多信息,請讓我知道。將值輸出給用戶

$(document).ready(function() { 
 
    var num1 = [] 
 

 
    var num2 = [] 
 

 
    var func = null 
 

 
    $('#one').click(function() { 
 
    if (func === null) { 
 
     num1.push('1') 
 
     console.log(num1) 
 
    } else { 
 
     num2.push('1') 
 
     console.log(num2) 
 
    } 
 
    }); 
 

 
    $('#two').click(function() { 
 
    if (func === null) { 
 
     num1.push('2') 
 
     console.log(num1) 
 
    } else { 
 
     num2.push('2') 
 
     console.log(num2) 
 
    } 
 
    }); 
 

 
    $('#three').click(function() { 
 
    if (func === null) { 
 
     num1.push('3') 
 
    } else { 
 
     num2.push('3') 
 
    } 
 
    }); 
 

 
    $('#four').click(function() { 
 
    if (func === null) { 
 
     num1.push('4') 
 
    } else { 
 
     num2.push('4') 
 
    } 
 
    }); 
 

 
    $('#five').click(function() { 
 
    if (func === null) { 
 
     num1.push('5') 
 
    } else { 
 
     num2.push('5') 
 
    } 
 
    }); 
 

 
    $('#six').click(function() { 
 
    if (func === null) { 
 
     num1.push('6') 
 
    } else { 
 
     num2.push('6') 
 
    } 
 
    }); 
 

 
    $('#seven').click(function() { 
 
    if (func === null) { 
 
     num1.push('7') 
 
    } else { 
 
     num2.push('7') 
 
    } 
 
    }); 
 

 
    $('#eight').click(function() { 
 
    if (func === null) { 
 
     num1.push('8') 
 
    } else { 
 
     num2.push('8') 
 
    } 
 
    }); 
 

 
    $('#nine').click(function() { 
 
    if (func === null) { 
 
     num1.push('9') 
 
    } else { 
 
     num2.push('9') 
 
    } 
 
    }); 
 

 
    $("#zero").click(function() { 
 
    if (func === null) { 
 
     num1.push('0') 
 
    } else { 
 
     num2.push('0') 
 
    } 
 
    }); 
 

 
    $('#plus').click(function() { 
 
    func = "+" 
 
    console.log(func) 
 
    }); 
 

 
    $('#minus').click(function() { 
 
    func = "-" 
 
    }); 
 

 
    $('#divide').click(function() { 
 
    func = "/" 
 
    }); 
 

 
    $('#multiply').click(function() { 
 
    func = "*" 
 
    console.log(func) 
 
    }); 
 

 
    $('#equals').click(function() { 
 
    if (func === "+") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 + number2 
 
     console.log(complete) 
 
    } else if (func === "-") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 - number2 
 
     console.log(complete) 
 
    } else if (func === "*") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 * number2 
 
     console.log(complete) 
 
    } else if (func === "/") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1/number2 
 
     console.log(complete) 
 
    } else { 
 
     console.log("error") 
 
    } 
 
    }); 
 

 
    $('#clear').click(function() { 
 
    num1 = [] 
 
    num2 = [] 
 
    func = null 
 
    console.log(num1) 
 
    console.log(num2) 
 
    console.log(func) 
 
    }); 
 

 

 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> 
 
</script> 
 

 
<div id="calculator-container"> 
 
    <form class="show"> 
 
    <input type="text" name="numbers" disabled><br> 
 
    </form> 
 
    <center> 
 
    <div class="calculator-view"> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <button id="clear" type="button">AC</button> 
 
      <button id="sign" type="button">+/-</button> 
 
      <button id="divide" type="button">÷</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="seven" type="button">7</button> 
 
      <button id="eight" type="button">8</button> 
 
      <button id="nine" type="button">9</button> 
 
      <button id="multiply" type="button">X</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="four" type="button">4</button> 
 
      <button id="five" type="button">5</button> 
 
      <button id="six" type="button">6</button> 
 
      <button id="minus" type="button">-</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="one" type="button">1</button> 
 
      <button id="two" type="button">2</button> 
 
      <button id="three" type="button">3</button> 
 
      <button id="plus" type="button">+</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="zero" type="button">0</button> 
 
      <button id="equals" type="button">=</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div>

+0

綁定所有的點擊次數也請添加您的HTML,什麼是錯誤你越來越多了? –

沙发
0
1

你可以簡單地顯示使用$("#res").val(num1);和替代id我會建議class和使用類這樣

$(document).ready(function() { 
 
    var num1 = [] 
 

 
    var num2 = [] 
 

 
    var func = null 
 

 
    $('.num').click(function() { 
 
    if (func === null) { 
 
     num1.push($(this).text()) 
 
     console.log(num1) 
 
     $("#res").val(num1.join('')); 
 

 
    } else { 
 
     num2.push($(this).text()) 
 
     console.log(num2) 
 
     $("#res").val(num2.join('')); 
 
    } 
 
    }); 
 

 
    $('.action').click(function() { 
 
    func = $(this).text(); 
 
    console.log(func) 
 
    $("#res").val(func); 
 
    }); 
 

 

 

 
    $('#equals').click(function() { 
 
    if (func === "+") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 + number2 
 
     console.log(complete) 
 
    } else if (func === "-") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 - number2 
 
     console.log(complete) 
 
    } else if (func === "*") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1 * number2 
 
     console.log(complete) 
 
    } else if (func === "/") { 
 
     num1 = num1.join("") 
 
     number1 = parseInt(num1) 
 
     num2 = num2.join("") 
 
     number2 = parseInt(num2) 
 
     var complete = number1/number2 
 
     console.log(complete) 
 
    } else { 
 
     console.log("error") 
 
    } 
 
    $("#res").val(complete); 
 
    }); 
 

 
    $('#clear').click(function() { 
 
    num1 = [] 
 
    num2 = [] 
 
    func = null 
 
    console.log(num1) 
 
    console.log(num2) 
 
    console.log(func) 
 
    }); 
 

 

 

 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"> 
 
</script> 
 

 
<div id="calculator-container"> 
 
    <form class="show"> 
 
    <input type="text" id="res" name="numbers" disabled><br> 
 
    </form> 
 
    <center> 
 
    <div class="calculator-view"> 
 
     <table> 
 
     <tr> 
 
      <td> 
 
      <button id="clear" type="button">AC</button> 
 
      <button id="sign" class="action" type="button">+/-</button> 
 
      <button id="divide" class="action" type="button">÷</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="seven" class="num" type="button">7</button> 
 
      <button id="eight" class="num" type="button">8</button> 
 
      <button id="nine" class="num" type="button">9</button> 
 
      <button id="multiply" class="action" type="button">X</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="four" class="num" type="button">4</button> 
 
      <button id="five" class="num" type="button">5</button> 
 
      <button id="six" class="num" class="num" type="button">6</button> 
 
      <button id="minus" class="action" type="button">-</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="one" class="num" type="button">1</button> 
 
      <button id="two" class="num" type="button">2</button> 
 
      <button id="three" class="num" type="button">3</button> 
 
      <button id="plus" class="action" type="button">+</button> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button id="zero" class="num" type="button">0</button> 
 
      <button id="equals" type="button">=</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </div>

+0

非常感謝!我非常喜歡所有點擊的綁定!真的讓代碼變幹! – Thallius

+0

@Thallius很高興我幫了忙。請接受答案:) –

+0

如果有人正在尋找這個幫助以後,零就缺少一個類。 – Thallius

板凳
0
0

您可以簡單地添加一個span到您的網頁<span id="result"></span>

然後,你可以展示你的結果與$('#result').html(complete);

此外,您可以顯示數以同樣的方式而用戶爲它們數字。

+0

我似乎無法得到這個工作 – Thallius

+0

@Thallius檢查我的答案 –

0
votes
answers
49 views
+10

JavaScript/HTML - 變量SetTimeout語法

0

我在做一個基本的遊戲。正如我的代碼如下所示,如果跳轉變量設置爲false並且空格鍵被按下,則對象向上移動(並因此跳轉)。JavaScript/HTML - 變量SetTimeout語法

This Works。但是,我不想讓對象無限地跳躍。所以,非常粗魯的是,我設置了一個超時時間,以便在2秒後,跳變量再次= false,因此跳躍可以再次發生。

我意識到這是非常粗糙的;然而,這是我想要編程的方式。加入最後兩行後

(jumping = true and setTimeout(function() { jumping == false; }, 2000);)該對象不再跳轉。儘管沒有錯誤,但我相信我的setTimeout函數寫得不正確。任何人都可以擺脫光線嗎?

我很抱歉,如果這是一個愚蠢的問題,請原諒我糟糕的粗糙編碼。


  //function to handle keyboard events 
      function KeyboardEventHandler(event) { 
       //if the up arrow is pressed 
       if (jumping == false && event.keyCode == keycode.SPACE) { 
        object.VY -= 0.1; 
        jumping = true; 
        setTimeout(function() { jumping == false; }, 2000); 
       } 
      } 
沙发
0
1

應該跳躍=假,不跳==在setTimeout的內假。

0
votes
answers
65 views
+10

從HTML表單運行Ruby文件提交

0

我有一個Ruby程序讀取文件並返回特定的輸出。我必須現在使用Sinatra創建此程序的Web應用程序。我創建了一個包含所有文件選項的form,並且現在我想要在按下提交按鈕後從表單中選擇該文件來運行該Ruby代碼。從HTML表單運行Ruby文件提交

基本上,我不知道如何讓這個外部Ruby程序運行時,用戶從HTML form中選擇的文件名。

Ruby程序(example.rb)以定義def read_grammar_defs(filename)開頭。

// sinatra_main.rb 

require 'sinatra' 
require 'sinatra/reloader' if development? #gem install sinatra-contrib 
require './rsg.rb' 

get '/' do 
erb :home 
end 

post '/p' do 
    //call program to read file with the parameter from form 
end 




// layout.erb 

<!doctype html> 
<html lang="en"> 
<head> 
    <title><%= @title || "RSG" %></title> 
    <meta charset="UTF8"> 
</head> 
<body> 
<h1>RubyRSG Demo</h1> 
<p>Select grammar file to create randomly generated sentence</p> 
<form action="/p" method="post"> 
    <select name="grammar_file"> 
     <option value="Select" hidden>Select</option> 
     <option value="Poem">Poem</option> 
     <option value="Insult">Insult</option> 
     <option value="Extension-request">Extension-request</option> 
     <option value="Bond-movie">Bond-movie</option> 
</select> 
<br><br> 
</form> 
<button type="submit">submit</button> 
<section> 
<%= yield %> 
</section> 
</body> 
</html> 
沙发
0
1

最簡單的方法如下:

  1. 包的example.rb代碼到一個類或模塊,像這樣:

    class FileReader 
        def self.read_grammar_defs(filename) 
        # ... 
        end 
    end 
    
  2. 從西納特拉服務器所需要的文件

  3. post的動作中,讀取在PARAMS和調用方法:

    post '/p' do 
        @result = FileReader.read_grammar_defs(params[:grammar_file]) 
        erb :home 
    end 
    

有了這個代碼,提交表單後,它將填充@result變量和渲染:home模板。實例變量可以從ERB訪問,所以如果你想顯示結果,你可以從那裏訪問它。

雖然這是一個潛在的問題 - 當頁面呈現時,url仍然會說"your_host.com/p",如果用戶重新加載頁面,他們將得到404 /「路由未找到」錯誤,因爲沒有get "/p"定義。

作爲一種變通方法,可以redirect '/'並使用session如上所述in this StackOverflow answerSinatra' official FAQ傳遞的結果值。

+0

我在home.erb中有<%= rsg(params [:grammar_file])%>,但是它打印到控制檯而不是頁面 – msc

+0

將它放在post方法中,如rsg(params [:grammar_file])也打印在控制檯...不知道爲什麼 – msc

+0

什麼?我被卡住了幾小時 – msc