Common web site function requirements and solutions

 ?  data statistics of site visits and views

Solution: The simplest way to do this is to borrow the functionality provided by other websites.

Introduce 3 sites I used: Amazingcounters, Flagcounter, 51.la.

• Amazing Counter

Disadvantages

The function is relatively single;

The target site of the statistics "refresh" once will increase the number of visits, so its statistics can only be used as a reference;

An account only provides a count ID (that is, if you want to separate two sites (or pages), you need two accounts to be able to access them);

Advantages

The most cutting-end free!

• Flag Counter

Disadvantages

function is richer than amazing counter, it is mainly for the target site from different regions of the world visitors to the data statistics;

More advanced features require a fee; statistical data is not graphically processed (i.e., statistics are displayed only);

One account supports only one statistic ID;

Advantages

Can quickly discover the international friend to your site visit;

• 51.la(homemade yo!) ）

Disadvantages

Proficiency in the use of the required learning AIDS documentation;

Advantages

The statistic method of site traffic is more accurate;

all free;

Multiple statistical IDs can be implemented in an account;

The same account can be assigned independent management and independent view of the password;

 ?  display time in the site

Solution: In general, we can use the JS program or other Web site to provide the functionality to achieve in-site display time.

★ Use JS Program

Implementation code

<script>Document.writeln ("<mark> Current time date </mark>&nbsp;<span id= ' showTime ' ></span>")    varnowdate, Thedate, Theyear, Themonth, Theweekday, Thehour, Themin, thesec; functiongetDate () {nowdate=NewDate ();//gets the object of dateWeeks =NewArray (' Day ', ' one ', ' two ', ' three ', ' four ', ' V ', ' VI ');//using Chinese means the week is more appropriatethedate=nowdate.getdate (); Theyear= Nowdate.getfullyear ();//Themonth = Nowdate.getmonth () + 1;//JS in January, the serial number is 0, so to output the actual month should be added 1Theweekday = Weeks[nowdate.getday ()];//JS in Sunday ordinal is 0, Monday ordinal is 1, so the array is redefined;Thehour =nowdate.gethours (); Themin=nowdate.getminutes (); if(Themin <) Themin = "0" + themin;//Less than 10, plus 0 in frontThesec =nowdate.getseconds (); if(Thesec <) Thesec = "0" +thesec; varTimeValue = Theyear + "Year" + Themonth + "Month" + thedate + "Day" + "Week" + theweekday + "+ thehour +": "+ themin +": "+thesec; document.getElementById ("ShowTime"). InnerHTML =TimeValue; SetInterval (GetDate,1000);  } getDate (); //calling Functions</script>

? Check the input fields in the site (including the input box and drop-down list marquee)

Solution: the need to solve the same can be achieved using JS control.

★ Check the input box

A. Approaches to the implementation of required

B. JS implementation

<form>    <input type= "text" onblur= "Check (this.value,this)" ></form><script>
    function Check (inputcontent,it) {        if (inputcontent = = ") {            alert (" Please fill in this field! ") ");            It.focus ();      // automatically move focus back to the input box after closing the prompt box         }    }</script>

★ Drop-down list box check

<form>    <select onblur= "Mustchoose (This.options[selectedindex].text, ' Select a Brand ... ', this)" title= " Brand Selection ">        <!-- This is a good thing, note that the text of the option text gets--        <option>select a brand...</ option>        <option>BMW</option>        <option>BEN</option>        <option>ford </option>    </select></form><script>    function  mustchoose (selectname , ItemName, it) {        if (selectname = = itemname) {            alert ("Please select a brand! ");            It.focus ();        }    } </script>

 ?  When you click an item in the site (the following dropdown list box) dynamic display of descriptive text

Solution: Look at the sample!

★ Drop-down list box text description

<form> <select size= "1" name= "selectthing" onchange= "Choose (This.options[selectedindex].text)"title= "Brand Selection" > <!-- ThisIt's a good thing. Note Options text text get-<option>VOLVO</option> <option>BMW</option> <opt ion>ben</option> <option>FORD</option> </select> <label><textarea cols= "2 0 "rows=" 5 "id=" Introtxt ">Introduction...</textarea></label></form><script>functionChoose (selectproduct) {Switch(selectproduct) { Case"VOLVO": document.getElementById ("Introtxt"). InnerText = "A car from switzerland!";  Break;  Case"BEN.": document.getElementById ("Introtxt"). InnerText = "A car from germany!";  Break; default: document.getElementById ("Introtxt"). InnerText = "A car from others!"        }    }</script>

★ Drop-down list box picture description

Solution: In fact, the key to the implementation of this feature is to replace the text description with a picture. So we just need to change the processing code of the final Judgment result.

Key statement
document.getElementById ("Idname"). Innerhtml= "// use InnerHTML to implement picture additions 

  ?  form information within the site is sent directly to the specified mailbox

Solution: Use the Form Form Action property to implement this functionality.

Example

<fieldset>    <legend> Vehicle Statistics </legend>    <form method= "POST" action= "Mailto:[email Protected]?subject=carinfo ">     <label>brand<input type=" text "Name=" brand "list=" Carop " >    </label>        <datalist id= "Carop" >            <option>VOLVO</option>            <option >BWM</option>            <option>LandWind</option>        </datalist>        <label>tel <input type= "text" name= "Tel" ></label>        <label>type<input type= "text" name= "type" >< /label>        <input type= "Submit" >    </form></fieldset>    

   ?  "Enter" is disabled within the site's internal form

Requirement background: When the browser fills in the form, intentionally or habitually press ENTER, easy to make the data "mistakenly" sent, so when the form is filled out to disable the return is a certain necessity.

Solution: Use the IF condition to judge the event.

fieldset>    <legend> Vehicle Statistics </legend>    onkeydown= "if (event.keycode==13) return false" >
<!--red labeled to disable the ENTER key---        <label>brand<input type= "text" name= "Brand" list= "Carop" ></label >        <datalist id= "Carop" >            <option>VOLVO</option>            <option>bwm</option >            <option>LandWind</option>        </datalist>        <label>tel<input type= "text" Name= "Tel" ></label>        <label>type<input type= "text" name= "Type" ></label>        < Input type= "Submit" >    </form></fieldset>

Tip: The form's return key is disabled, then the form submission can only be submitted via the Submit button!

  ?  The In- site form disables the Submit button during submission of information

Requirements background: In some cases, when a browser clicks the "OK" (or send data) button, the entire picture may be stopped there because of network latency, slow server processing, and so on. Some people may then click the "OK" (or send data) button, and the day may cause problems. For example, if the form is ordering a product, there may be a duplicate order problem, and if the form is a network bank transfer, there may be duplicate transactions.

Solution: Add the following code to the "OK" (or send data) button so that clicking on the "OK" (or send data) button will turn the button gray (that is, disabled) and effectively avoid the problem of repeating the form data when the browser clicks again.

onclick= "document. formName. Submit (); This.disable=true "

  ?  Get site browser's IP address, ISP name, and type of use System

Solution: This type of functionality can be implemented via PHP, and it is easier to borrow this type of functionality from other websites.

(Foreign language provider) the content is in English, add the following code to the Site page that requires this type of prompt:

< Div > <  src= "http://www.danasoft.com/sig/msnsimplifytech.jpg">
</div>

  ?  description of an element within the site page

Requirements background: We often use the alt attribute to supplement the images in the Web page, but Alt is only displayed if the image fails to load. So we think of the title property, where the title property can be used for almost all page elements, however, it is important to note that the locations set on different elements may vary.

Solution: Title property to link <a> or picture , normal text <p>, input box <input type= "Text" >, text Area <textarea>, Can be placed directly in the label. As shown below

<type= "text"  title= "This is an input box"><   href= "...."  title= "This is a link">

Now mainly with the radio button <input type= "Radio" > For example, under the same type of label, the description of the text settings.

<form>    <inputtype= "Radio"title= "Option 1">Object A<!--only the radio button is explained, that is, when the mouse rests on the text of the option, no description -    <labeltitle= "Option 2"><inputtype= "Radio">Object B</label>    <!--describes the text for radio buttons and options, and Associates option text with a single button -        <inputtype= "Radio"title= "Option 3"ID= "Inputradio">    <label for= "Inputradio">Object C</label>    <!--only the radio button is described, but the option text is associated with a single button -</form>

　　Expand:

If the description text is very long, that is, the Title property value is very long, then reading is not very laborious?! So if we can change the description of the line then it will be more beautiful! In this time you need to use the Inner code ' & #10 ' to help text wrapping, rather than in the code directly press ENTER or use ' \ n '.

<src= "qq20161123095043.jpg"  alt= "QQ sceeen"width = "200px" Height = "100px" title = "Serial number:001& #10评价: ★ ¡ï" > <!-- line-break display using the Inner code ' & #10 '  -

  ? copying elements (or content) from a Web page is forbidden in the site page

One of the most common ways to get Web page content is to copy elements (or content) from a Web page, and the copy operation is simply to select the element (or content) to be copied with the mouse or key before copying. There are three common ways we can effectively avoid the browser's copying of the elements (or content) of the Web page (including the source Code view).

Method A. Disable the right-click menu (so that the entire context menu does not eject)

Implementation code

<oncontextmenu= "Window.event.returnvalue=false;alert (' Right-click menu has been disabled!) '> ... </ Body >

Evaluation: This approach is not suitable for many scenarios. and the browser can be through the shortcut keys and so on to achieve the copy, paste Function!

Method B.

Implementation principle: From the selection of elements of the operation, that is, as long as the browser cannot select the elements in the page, of course, there is no way to copy. Therefore, we need to do: 1. Let the viewer not drag (drag), select the elements in the Web page, 2. Let the viewer not use the "Select All" command in the "menu bar" of the browser, nor the "Select All" command in the right-click menu;

Implementation code

<onselectstart= "return false"  onselect= "Document.selection.empty () "  ondragstart=" return false "> ... </ Body >

Evaluation: This method can be more "moderate" to implement the page elements (or content) of the disabled check function, but still can not resist the "view page source code" this command!

Method C. Encrypt the Web page source file

We can use the common JS comes with the function encodeURI and decodeURI or encodeURIComponent and decondeuricomponent to the page source file to add, decrypt.

First of all, there must be a decryption tool, ha! I wrote one myself, for reference only. Use JavaScript functions to encrypt strings

Not to be continued ...

Resources

"People's web page--blog | Personal Station | online | forum" Cheng

Common web site function requirements and solutions