Home Web Front-end JS Tutorial js script learning more practical basis_basic knowledge

js script learning more practical basis_basic knowledge

May 16, 2016 pm 07:26 PM

event.clientX returns the X coordinate value of the last mouse click;
event.clientY returns the Y coordinate value of the last mouse click;
event.offsetX returns the X coordinate value of the current mouse hover
event.offsetY returns the current mouse Hover Y coordinate value
document.write(document.lastModified) The last update time of the webpage
document.ondblclick=x When the mouse is double-clicked, an event is generated
document.onmousedown=x When the mouse button is clicked, an event is generated
document.body.scrollTop; Returns and sets the coordinate value of the current vertical scroll bar, must cooperate with the function,
document.body.scrollLeft; Returns and sets the coordinate value of the current horizontal scroll bar, must cooperate with the function,
document.title document.title="message"; Title bar text of the current window
document.bgcolor document.bgcolor="Color value"; Change window background color
document.Fgcolor document.Fgcolor="Color value"; change the color of the text
document.linkcolor document.linkcolor="color value"; change the color of the hyperlink
document.alinkcolor document.alinkcolor="color value"; change the color of the link being clicked
document .VlinkColor document.VlinkColor="color value"; Change the color of the visited connection
document.forms.length Returns the number of form forms on the current page
document.anchors.length Returns the number of anchors on the current page
document. links.length Returns the number of links on the current page
document.onmousedown=x Click the mouse to trigger the event
document.ondblclick=x Double-click the mouse to trigger the event
defaultStatus window.status=defaultStatus; Set the status bar to be displayed by default
function function xx(){...} 定义函数
isNumeric 判断是否是数字
innerHTML xx=对象.innerHTML 输入某对象标签中的html源代码
innerText divid.innerText=xx 将以div定位以id命名的对象值设为XX
location.reload(); 使本页刷新,target可等于一个刷新的网页
Math.random() 随机涵数,只能是0到1之间的数,如果要得到其它数,可以为*10,再取整
Math.floor(number) 将对象number转为整数,舍取所有小数
Math.min(1,2) 返回1,2哪个小
Math.max(1,2) 返回1,2哪个大
navigator.appName 返回当前浏览器名称
navigator.appVersion 返回当前浏览器版本号
navigator.appCodeName 返回当前浏览器代码名字
navigator.userAgent 返回当前浏览器用户代标志
onsubmit onsubmit="return(xx())" 使用函数返回值
opener opener.document.对象 控制原打开窗体对象
prompt xx=window.prompt("提示信息","预定值"); 输入语句
parent parent.框架名.对象 控制框架页面
return return false 返回值
random 随机参数(0至1之间)
reset() form.reset(); 使form表单内的数据重置
split("") string.split("") 将string对象字符以逗号隔开
submit() form对象.submit() 使form对象提交数据
String对象的 charAt(x)对象 反回指定对象的第多少位的字母
lastIndexOf("string") 从右到左询找指定字符,没有返回-1
indexOf("string") 从左到右询找指定字符,没有返回-1
LowerCase() 将对象全部转为小写 
UpperCase() 将对象全部转为大写
substring(0,5) string.substring(x,x) 返回对象中从0到5的字符
setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象
toLocaleString() x.toLocaleString() 从x时间对象中获取时间,以字符串型式存在
typeof(变量名) 检查变量的类型,值有:String,Boolean,Object,Function,Underfined
window.event.button==1/2/3 鼠标键左键等于1右键等于2两个键一起按为3
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
window.resizeTo(0,0) 将窗口设置宽高
window.moveTo(0,0) 将窗口移到某位置
window.focus() 使当前窗口获得焦点
window.scroll(x,y) 窗口滚动条坐标,y控制上下移动,须与函数配合
window.open() window.open("地址","名称","属性") 
属性:toolbar(工具栏),location(地址栏),directions,status(状态栏),
menubar(菜单栏),scrollbar(滚动条),resizable(改变大小), width(宽),height(高),fullscreen(全 屏),scrollbars(全屏时无滚动条无参 数,channelmode(宽屏),left(打开窗口x坐标),top(打开窗口y坐标)
window.location = 'view-source:' + window.location.href 应用事件查看网页源代码;

a=new Date(); //创建a为一个新的时期对象
y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份
y1=a.getFullYear(); //获取全年份数 四位数年份
m=a.getMonth(); //获取月份值
d=a.getDate(); //获取日期值
d1=a.getDay(); //获取当前星期值
h=a.getHours(); //获取当前小时数
m1=a.getMinutes(); //获取当前分钟数
s=a.getSeconds(); //获取当前秒钟数

对象.style.fontSize="文字大小";
单位:mm/cm/in英寸/pc帕/pt点/px象素/em文字高
1in=1.25cm
1pc=12pt
1pt=1.2px(800*600分辩率下)
文本字体属性:
fontSize大小
family字体
color颜色
fontStyle风格,取值为normal一般,italic斜体,oblique斜体且加粗
fontWeight加粗,取值为100到900不等,900最粗,light,normal,bold
letterSpacing间距,更改文字间距离,取值为,1pt,10px,1cm
textDecoration:文字修饰;取值,none不修饰,underline下划线,overline上划线
background:文字背景颜色,
backgroundImage:背景图片,取值为图片的插入路径

点击网页正文函数调用触发器:
1.onClick 当对象被点击
2.onLoad 当网页打开,只能书写在body中
3.onUnload 当网页关闭或离开时,只能书写在body中
4.onmouseover 当鼠标悬于其上时
5.onmouseout 当鼠标离开对象时
6.onmouseup 当鼠标松开
7.onmousedown When the mouse button is pressed
8.onFocus When the object gets focus
9.onSelect When the text of the object is selected
10.onChange When the content of the object is changed
11.onBlur The value returned when the object loses focus
onsubmit=return(ss()) form call
straight line border-bottom:1x solid black
dashed line border-bottom:1x dotted black
dash line border -bottom:2x dashed black
double border-bottom:5x double black
grooved border-bottom:1x groove black
ridged border-bottom:1x ridge black

1. Edge highlight glow (color=color, strength=glow size)

2. Horizontal flip fliph() makes the object flip 180 degrees horizontally

3. Vertical flip flipv() makes the object flip 180 degrees vertically Degree

4. Object blur blur(add=true/false direction=direction strength=strength)
add specifies whether to blur according to Impressionism direction blur direction strength blur strength
5. Object transparency alpha(opaction=0-100, finishopacity=0-100, style=0/1/2/3)
The overall opacity value of the opaction object finishopacity When the object uses gradual transparency, this item specifies the opacity value of the end transparent position style Specify the transparency mode 0 for overall transparency, 1 for line transparency, 2 for circle transparency, and 3 for rectangle transparency
6. Remove the color chroma (color=color value) to make the area in the object with the same color as the specified color transparent
7. Create a shadow dropshadow (color=shadow color, offx=deviate horizontally to the left by pixels, offy=deviate horizontally from pixels downward)
8.Decolor gray() to make the object appear in grayscale
9. Negative film Effect invert() makes the object appear as a negative effect
10. Highlight light() makes the object appear black
11. Mask(color=color) makes the entire object masked once with the specified color
opacity table Transparency level.0~100, 0 means fully transparent, 100 means completely opaque
finishopacity means the gradient transparency effect you want to set. 0~100.
style means the shape of the transparent area. 0 means unified shape. 1 means uniform shape. Line shape. 2 represents radial shape. 3 represents rectangle.
startx.starty represents the X and Y coordinates at the beginning of the gradient transparency effect.
finishx, finishy The x, y coordinates at the end of the gradient transparency effect.
add There is a value to determine whether to use the original target in the blur effect. The value is 0, 1.0 means "no", and 1 means "yes".
direction sets the direction of the blur. 0 degrees means vertically upward, and 45 degrees is a unit .The default value is 270 degrees to the left. left, right, down, up.
strength can only be determined by an integer. It represents how many pixels of width will be affected by blur. The default is 5.
color to Transparent color.
offx, offy are the offsets of the shadow in the x and y directions respectively.
positive refers to the projection method. 0 means transparent pixels generate shadows. 1 means only opaque pixels generate shadows..
AddAmbient: Add a surrounding light source.
AddCone: Add a cone light source.
AddPoint to add a point light source
Changcolor: Change the color of the light.
Changstrength: Change the intensity of the light source.
Clear: Clear all light sources.
MoveLight: Move light source.
freq is the frequency of the ripple, which specifies how many completed ripples need to be generated in the upper area of ​​the object.
lightstrength can enhance the effect of light and shadow on ripples. Significant positive integers from 0 to 100, the starting position of the sine wave is 0 to 360 degrees. 0 means starting from 0 degrees, 25 means starting from 90 degrees.
strength indicates the amplitude.

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J

How do I create and publish my own JavaScript libraries? How do I create and publish my own JavaScript libraries? Mar 18, 2025 pm 03:12 PM

Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.

How do I optimize JavaScript code for performance in the browser? How do I optimize JavaScript code for performance in the browser? Mar 18, 2025 pm 03:14 PM

The article discusses strategies for optimizing JavaScript performance in browsers, focusing on reducing execution time and minimizing impact on page load speed.

jQuery Matrix Effects jQuery Matrix Effects Mar 10, 2025 am 12:52 AM

Bring matrix movie effects to your page! This is a cool jQuery plugin based on the famous movie "The Matrix". The plugin simulates the classic green character effects in the movie, and just select a picture and the plugin will convert it into a matrix-style picture filled with numeric characters. Come and try it, it's very interesting! How it works The plugin loads the image onto the canvas and reads the pixel and color values: data = ctx.getImageData(x, y, settings.grainSize, settings.grainSize).data The plugin cleverly reads the rectangular area of ​​the picture and uses jQuery to calculate the average color of each area. Then, use

How do I debug JavaScript code effectively using browser developer tools? How do I debug JavaScript code effectively using browser developer tools? Mar 18, 2025 pm 03:16 PM

The article discusses effective JavaScript debugging using browser developer tools, focusing on setting breakpoints, using the console, and analyzing performance.

How to Build a Simple jQuery Slider How to Build a Simple jQuery Slider Mar 11, 2025 am 12:19 AM

This article will guide you to create a simple picture carousel using the jQuery library. We will use the bxSlider library, which is built on jQuery and provides many configuration options to set up the carousel. Nowadays, picture carousel has become a must-have feature on the website - one picture is better than a thousand words! After deciding to use the picture carousel, the next question is how to create it. First, you need to collect high-quality, high-resolution pictures. Next, you need to create a picture carousel using HTML and some JavaScript code. There are many libraries on the web that can help you create carousels in different ways. We will use the open source bxSlider library. The bxSlider library supports responsive design, so the carousel built with this library can be adapted to any

How to Upload and Download CSV Files With Angular How to Upload and Download CSV Files With Angular Mar 10, 2025 am 01:01 AM

Data sets are extremely essential in building API models and various business processes. This is why importing and exporting CSV is an often-needed functionality.In this tutorial, you will learn how to download and import a CSV file within an Angular

See all articles