前端开发

前端构建平台和环境 Vue React Angular npm Node Webpack

• 前端开发 • 暂无评论
项目名称 网站（中文） 描述
Vue.js cn.vuejs.org Vue.js 是一个构建数据驱动的渐进式 JavaScript 框架。
React zh-hans.reactjs.org React 是一个用于构建用户界面的 JavaScript 库。
Angular angular.cn Angular 是一个用于构建移动和桌面 Web 应用程序的平台。
npmjs npmjs.cn npm 是一个 JavaScript 世界的包管理工具，并且是 Node.js 平台的默认包管理工具。
Node.js nodejs.org/zh-cn Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。
Webpack webpackjs.com Webpack 是一个模块打包器。Webpack 的主要目标是将 JavaScript 文件打包在一起，打包后的文件用于在浏览器中使用，但它也能够胜任转换 (transform)、打包 (bundle) 或包裹 (package) 任何资源 (resource or asset)。

JS 禁止右键、图片拖放、选择文本、frame 标签引用

• 前端开发 • 暂无评论 
// 禁止右键 
document.oncontextmenu = function(){return false};

// 禁止图片拖放
document.ondragstart = function(){return false};

// 禁止frame标签引用
if (parent.frames.length > 0) top.location.replace(document.location);

// 禁止选择文本
document.onselectstart=function(){
if (event.srcElement.type != "text" && event.srcElement.type != "textarea" && event.srcElement.type != "password")
return false
else return true;
};

// 禁止选择文本: 火狐
if (window.sidebar){
document.onmousedown=function(e){
var obj=e.target;
if (obj.tagName.toUpperCase() == "INPUT" || obj.tagName.toUpperCase() == "TEXTAREA" || obj.tagName.toUpperCase() == "PASSWORD")
return true;
else
return false;
}
};

CSS 定义事件

• 前端开发 • 暂无评论 
<style type="text/css">
	.outline{
		outline-color: #ccc; /*outline: none;*/
	}
</style>

//定义输入框和按钮边框线颜色

<style type="text/css">
input::-webkit-input-placeholder {
    color: #ffffff66;
}

input:-moz-placeholder { 
    color: #ffffff66;
}

input::-moz-placeholder { 
    color: #ffffff66;
}

input:-ms-input-placeholder { 
    color: #ffffff66;
}</style>

//definifion placeholder font color

<style type="text/css">
input[type=checkbox] {
  margin-right: 0px;
  cursor: pointer;
  font-size: 12px;
  width: 12px;
  height: 12px;
  position: relative;
}
 
input[type=checkbox]:after {
  position: absolute;
  width: 7px;
  height: 9px;
  right: 1px;
  content: " ";
  color: #fff;
  display: inline-block;
  visibility: visible;
  padding: 0px 1px;
  border-radius: 1px;
  background:#ffc107;
  border:1px solid #ffffff;
}
 
input[type=checkbox]:checked:after {
  content: "\2713"; /*markup is ✓*/
  font-size: 7px;
  font-weight:700;
  background-color: #63a2ff;
}</style>

//definifion bottom style

/* definifion input savepasswd bgcolor*/

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

input 自动填充颜色改变或透明之白色背景

<style type="text/css">
2. 设置透明：
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input:-webkit-autofill {
 box-shadow: 0 0 0px 1000px white inset !important;
}  
input:-webkit-autofill:focus {
 box-shadow: 0 0 0px 1000px white inset !important;
}  </style>

//input 自动填充颜色改变或透明之白色背景

<style type="text/css">
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
    -webkit-text-fill-color: #FFFFFF !important;
    transition: background-color 5000s ease-in-out 0s !important;
}</style>

//input 自动填充颜色改变或透明之透明

<style type="text/css">
input{
    caret-color:red;
}</style>

//定义 input 光标颜色

<style type="text/css">
input{
    color:red;
}</style>

//定义 input 字体和光标颜色

html a 事件

• 前端开发 • 暂无评论 
<a href='javascript:window.print()'> 打印</a>

//打印当前页面

<a href="###" onclick=window.close();return false)> 关闭本窗口</a>

//关闭当前页面

<a href="javascript:void(0)" onclick="location.reload(true)"></a>

//点击刷新页面

<a href="javascript:void(0);" onclick="js_method()"></a>

//点击无效

html input 动作

• 前端开发 • 暂无评论 
<input type="submit" value=" 输入值" onMouseOut=this.style.color="blue" onMouseOver=this.style.color="red" />

//鼠标激活和经过按钮颜色变换

<input type="text" value=" 输入值" onmouseover="javascript:this.focus();" />

//鼠标划过激活输入框

<input type="text" value=" 输入值" onmouseover="this.focus();this.select();" />

//鼠标划过激活并选中输入框内容

<input type="text" value=" 输入值" onfocus="this.select()" />

//选中输入框即选择内容

<input type="text" value=" 输入值" onclick="if(this.value==' 预置值')this.value=' 提示值'" />

//如果输入值等于预置值则显示提示值

<input type="text" value=" 输入值" onclick="if(this.value!=' 预置值')this.value=' 提示值'" />

//如果输入值不等于预置值则显示提示值

<input type="text" value="" onblur="if(this.value==''){this.value=' 自动填充内容';}" />

//鼠标激活并离开输入框后显示预置内容

<input type="text" value=" 输入值" onclick=javascript:this.value="" />

//激活输入框后清空内容

<input type="text" value=" 输入值" style="outline: none;" />

//去掉输入框和按钮边框默认淡蓝色框线

php Local 和 Global 作用域

• 前端开发 • 暂无评论

Local 和 Global 作用域
函数之外声明的变量拥有 Global 作用域，只能在函数以外进行访问。
函数内部声明的变量拥有 LOCAL 作用域，只能在函数内部进行访问。

php 代码

<!DOCTYPE html>
<html>
<body>

<?php
$x=5; // global scope
  
function myTest() {
   $y=10; // local scope
   echo "<p> 在函数内部测试变量：</p>";
   echo " 变量 x 是：$x";
   echo "<br>";
   echo " 变量 y 是：$y";
} 

myTest();

echo "<p> 在函数之外测试变量：</p>";
echo " 变量 x 是：$x";
echo "<br>";
echo " 变量 y 是：$y";
?>

</body>
</html>

输出结果

在函数内部测试变量：

变量 x 是：
变量 y 是：10
在函数之外测试变量：

变量 x 是：5
变量 y 是：
加载更多