The article includes the following:
1. Verification code Making--Chinese | alphabet | numbers | ...
2, text verification code-image anti-theft chain (PHP, not JS)
3, JS prevent right click on the picture
4, Input form input box does not record the information entered
5. Css+div formatted page layout
1, Verification Code production
Reference: http://www.imooc.com/video/2458
Cond......
2, picture anti-theft chain
In the "for Example" TP framework, the member functions of the class can be accessed directly in the address bar, such as Http://localhost/Member/common/panduan
Here Panduan () is a method, written in class Commonaction extends mcommonaction{} classes commonaction controller inside,
member functions Public Function Panduan () {...} is written in the class controller commonaction, if you do not want to let the outside world directly access the method,
You can use the anti-theft chain technology, namely:
Public Function Panduan () {
if (!$_server[' Http_referer ']) {
echo "Access Error! ";
}
............
}
"Technical explanation" anti-theft chain technology uses HTTP Referer
3, JS prevent right click on the picture
Prevent right-click: the right mouse button click on the picture, the right-click menu does not pop up.
<script language= "JavaScript" >
/*document.oncontextmenu=youji;*///Add a right-click event for the current document to prevent the default right-click menu from Popping
function Youji ()
{
Alert ("Right click Success!") ");
return false;
}
Add a mouse right-click event for a DOM element
Window.onload = function () {
document.getElementById ("Div1"). Oncontextmenu=youji;
}
window.onload = function () {
document.getElementById ("vimg"). Oncontextmenu=youji;
document.getElementById ("Div1"). Oncontextmenu=youji;
}
/* may only perform one window.onload () */
</script>
<div id= "Div1" >
</div>
\\\\\\\\\\\\\\\window.onload () Introduction
The Windows.onload () call must wait until all the elements of the page that include the picture have been loaded before they can be executed.
Window.onload = Checkbox_click. Checkbox_click is a JS function.
Cannot write multiple at the same time, if there are multiple window.onload methods, only one will be executed
With the $ (document). Ready difference:
$ (document). Ready () is executed when the DOM structure is drawn and does not have to wait for the load to complete.
$ (document). Ready () can be written multiple at the same time and can be executed.
$ (document). Ready (function () {}) can be simply written as $ (function () {});
what is \\\\\\\\\\\\\ dom //////////
Reference: http://www.w3school.com.cn/htmldom/dom_nodes.asp
The DOM is the HTML element---the node, and all the HTML elements (nodes) can be modified, deleted, and so on.
Through the HTML DOM, all nodes in the tree can be accessed through JavaScript. All HTML elements (nodes) can be modified, or nodes can be created or deleted.
......
\\\\\\\\dom Concept Introduction End////////
PS: Introduction Click the small map to display the JS effect of large map
<title> Click to display the js</title> of the large image
<style>
#demo {overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:3px solid #eeeeee; width:100px;height:75px;}
#enlarge_images {position:absolute;display:none;z-index:2;}
</style>
<div id= "Demo" ></div>
<div id= "Enlarge_images" ></div>
<script>
var demo = document.getElementById ("demo");
var GG = demo.getelementsbytagname ("img");
var ei = document.getElementById ("Enlarge_images");
for (i=0; i<gg.length; i++) {
var ts = gg[i];
Ts.onclick = function (event) {
Event = Event | | window.event;
Ei.style.display = "block";
ei.innerhtml = ' ';
Ei.style.top = Document.body.scrollTop + event.clienty + + "px";
Ei.style.left = document.body.scrollLeft + event.clientx + + "px";
}
Ts.onmouseout = function () {
ei.innerhtml = "";
Ei.style.display = "None";
}
}
</script>
4. Input form does not record information entered
When we enter the form information in the browser, often input text input box will record the information before submitting the form, each time just double-clicking the input text box will appear before the text entered, which sometimes feel more convenient, but sometimes also exposes the user's hidden data.
If you let the input form entry box not record the information you have entered, the method is as follows:
In fact, it is simple to add a autocomplete= "off" attribute to the input text entry box , and the relevant code is as follows:
<input type= "text" name= "uname" autocomplete= "off"/>
5, Css+div
The Style style property
Row Height: line-height
float: Float
Border: Border, for example: border:1px solid #ccc; /* Indicates that the border is a gray solid line roughness 1px*/
Rounded border: Border-radius, see www.kuqin.com/shuoit/20141014/342620.html
"HTML Tag"
Superscript:<sup></sup>
"Security Protection"
"Disable the page's right mouse button menu -View Source code"
$ (document). Ready (function () {
Add right-click event for DOM element: img id= "PV"
Window.onload =function () {//PV
document.getElementById ("PV"). Oncontextmenu=function () {return false;};
Window.oncontextmenu=function () {return false;}; Add "Disable viewing of source code" for all DOM elements (that is, the entire page)
}
});
"HTML page-how to Hide JS code"
In fact, JS code cannot be hidden, can only be confused or encrypted, or use other methods.
Idea one: confusing or encrypting
Strictly cannot be called encryption except that it is confusing to replace all variable names.
{Malpractice} scripting language confusion is just a poor readability. But the master will use Chrome or FF console to debug your JS. Therefore, security is relatively speaking.
Idea two: quote JS file
Referring to the JS page by reference method will not see the code, can be made into a JS file, and then call the JS connection.
In the JS file directory to do permission settings to prevent illegal access and download.
Format
<script type= "Text/javascript" src= "your js file. js" > </script>
In this way, the JS code is written in the JS file, it will not be seen in the HTML page.
--------------------------------------------------------------
Because the personal technical knowledge of the expression is not very professional, but also hope you crossing
A lot of apologies, more comments, more guidance!
(~_~)
First Write Date: 2016-6-14 11:30:13
Last Modified Date: 2016-6-16 16:18:35
2016-6-20 10:51:02
---------------------------------------------------------------
Code Note: Registration page Verification Code