最近尝试使用VSCode，但是发现空格宽度只有半个字符，感觉很别扭，于是尝试解决。
 
左上角 文件->首选项->设置,在搜索栏里搜font
 把Editor:Font Family中默认的都删掉，只留下不带引号的monospace即可。

　　汉字字符的编码为双字节，对于汉字字符和单字节字符混排的情况，如果目标截取的字符串内只包含奇数个单字节字符，则会出现半个汉字字符的问题。如下所示：
 
　　（1）天水市秦州区南郭路2号（工行七里墩分理处? --包含数字字符，单字节。
 
　　（2）七里河区金港城金福花园20号楼3号（金港城?--包含数字字符，单字节。
 
　　（3）甘肃银馨春天餐饮服务业有限责任公司(省委? --包含英文格式半括号。
 
　　以上为截取字符串前四位以后的显示结果，其中“？”为半个汉字编码的显示。要想解决以上问题可以采用截取最后一个非法字符，并用合法字符替换的方法。实例代码如下所示：
 
#include <stdio.h>
int chkHalfChinese(char *buf,int len)
{
        int i = 0;
    int cnt = 0;
    int idx;
    for(i=0;i<len;i++)
     {
           int value = buf[i]&0xFF;
        if(value>160)   
         {
           cnt++;   
           idx=i;
         }
     }
    if(cnt%2)
     {
        buf[idx] =' ';
        return(1);
     }
    else
        {
        return(0);
      }
} 

int main(void)
{
  char str[44] = "天水市秦州区南郭路2啊（工行七里墩分理处里家";  
  if(chkHalfChinese(str,40)==1)
  {
    printf("true\n");
  }
  else
  {
    printf("false\n");
  }
  printf("%s\n",&str);
  return 0;
}
程序代码在Linux环境下测试通过,运行结果如下图所示：
 
 
 
 
 

CSS显示半个字符的基本思路：
 
就是一个字写两遍，分别显示一半。这里就需要用到CSS伪元素:before和:after，记住这个“伪元素”的“伪”字，表明它本来是不存在的。我们的方法就是在伪元素里放置相同的字符，只显示半个，而原字符显示另外一半，最后把它们拼成一个字。
 

 
 
效果图：
 

 
 

 
 
CSS:
 

<style type="text/css">
.halfStyle {
    position:relative;
    display:inline-block;
    font-size:100px; /*  任何宽度都可以 */
    color: black; /* 任何颜色，或透明 */
    overflow:hidden;
    white-space: pre; /* 处理空格 */
	font-family:Microsoft YaHei;
	font-weight:bold;
}
.halfStyle:before {
    display:block;
    z-index:1;
    position:absolute;
    top:0;
    left:0;
    width: 50%;
    content: attr(data-content); /* 伪元素的动态获取内容 */
    overflow:hidden;
    color: #f00;
}
</style>

 

 
 
HTML:
 

<span class="halfStyle" data-content="到">到</span>
<span class="halfStyle" data-content="此">此</span>
<span class="halfStyle" data-content="一">一</span>
<span class="halfStyle" data-content="游">游</span>

 

 
 

 
 

 
 

 
 

 

1.JS概述
 1）概念
 js全程：JavaScript(一门客户端脚本语言)
 a.js可以直接嵌入在html页面中，由浏览器解释执行，不进行预编译
 b.用于向页面添加动态交互行为
 c.具有与java语言类似的语法，一种网页编程语言
 
操作方向：
 —操作DOM元素（html元素）
 —操作BOM元素（浏览器对象）
 
2）js特点：
 1.解释执行：不需要预编译，逐行执行
 2.基于对象：内置了大量的现成对象
 
3）作用
 a.实现客户端数据简单计算
 b.客户端表单合法性验证
 c.添加浏览器事件的突发
 d.网页特殊显示效果的制作
 e.实现服务器的异步数据提交
 
4）遵循es规范（es6）
 a.严格区分大小写
 b.数字、字母、下划线、$组成，不能用数字开头
 c.驼峰命名法
 
5）写法
 a.行内式（定义事件）
 在事件中定义操作，直接写js代码
 alert(); 弹出警告框
 事件：
 onclick 鼠标点击
 ondblclick 鼠标双击
 onmouseover 鼠标移入
 onmouseout 鼠标移出
 onkeydown 键盘按下
 onkeyup 键盘抬起
 onblur 失去焦点
 onfocus 获取焦点
 写法：
 οnclick=“函数()”; 事件=“事件触发的函数”;
 
b.内部式（嵌入式）
 嵌入在页面的
c.外部式(文件调用)
 js代码位于单独的.js文件中（注意保存的编码）
 写法：
 step1：在js文件中写js代码（定义行数）
 step2：将.js文件引入到当前页面中
 
 step3：在html行内添加事件，调用函数
 
js注释
 单行：//注释文字
 多行：/注释文字/
 
js控制台：
 不需要页面也可以直接在控制台（console）写js代码
 F12（右击检查）---->打开控制台
 Enter回车键：执行
 Shift+Enter：换行
 
console.log(内容);//将内容打印到控制台
 
2.js组成
 1）变量（var let const 无）
 js是弱类型语言，使用var关键字声明变量
 刑如：
 var a = 1;
 var s = “李四”;
 
拆：
 var a;//a没有类型
 var a=1;//初始化a才会有类型，a为number类型
 a=“李四”;//a为String类型
 
typeof 变量名;//用来验证变量名
 
注意：
 1.js是弱类型语言，不同的变量类型会根据数值自动给定类型
 2.变量没有类型，统一用关键字var声明，变量值是有类型的
 3.使用“=”进行赋值，没有初始化的变量自动取值为undefined
 4.js存在变量声明提升（js会根据不同的值自动转换为对应的数据类型）
 
js数据类型
 a.基本类型number、string，boolean
 number：不区分整数和小数
 
 string：一对引号包裹的字符串（单双引都可以）
 ----单双引号只能交替引用，特殊字符需要转义   \n  \t  \s
 常用函数：
 str.indexof("",from[int index]);
 返回指定字符串在str中第一次出现的位置（从from开始第一次出现的位置）
 str.replace("","");
 将指定字符串替换为指定字符串，只替换第一个，属于不完全替换
 
 boolean:仅有两个值，true、false
 可以参与运算，自动作为数值，true值为1，false为0
 
b.特殊类型undefined、null
 undefined
 变量声明未初始化，该变量的值和类型均为undefined
 null
 代表"无值"或者"无对象"，可以通过一个变量赋值null来清空变量内容
 
c.对象类型object
 内置对象 外部对象 自定义对象
 
数据类型转换：
 a.自动转换（直接转换属于默认规则）
 number+string=string
 boolean+string=string
 boolean+number=number
 boolean+boolean=number
 
b.强制转换（利用类型转换函数）
 toString();任何类型转换成string类型
 
parseInt();强转为整数，全局函数，具有截取功能
 
parseFloat();强转为小数，全局函数，具有截取功能
 
NaN:Not a Number(不是数字，不能转换成数字)
 
isNaN();全局函数，判断是否为非数字（true表示非数字，false表示数字）
 
案例1：
 验证用户输入的是否位数字，若是数字则求平方，若不是数字则给出提示。
 
运算符
 a.数学运算符 + - * / % ++ –
 +：表示数学加法，或者字符串连接运输
 -、*：若字符串参与，将数值字符串以数字参与运算
 /：java中7/2=3，js中7/2=3.5
 
b.关系运算  > >= < <= == !=
==：只比较值，不比较类型
===：比较类型和值
 
c.逻辑运算符&&(与) ||(或) !(非) 
 短路逻辑：结果为boolean类型，true或者false
 非短路逻辑：结果为number类型（1或者0）
 
d.三元运算符（三目）
语法：判断表达式？表达式1:表达式2;

注意：js中出现的判断表达式或者调解表达式可以为任意表达式，可以为任何类型
转换规则：
非0数字、非空字符串、{}、对象----->true
0、null、“”、undefined、NaN------->false
 
案例2：
 用户在页面输入一个值，判断是否为50，要求提升用户输入大，小，对？
 
js的流程控制
 a.分支流程if-else ，switch-case
 
b.循环流程	for，while，do-while
 
案例3：
 统计输入框重点敏感字（gun）出现的次数，将敏感字替换为"***"
 
调错方式：
 1.在js代码中添加console.log()或者alert()
 2.检查浏览器缓存的js文件，看错误信息
 3.浏览器自带的断点debugger调试
 
内置对象：
 简单内置对象：Number String
 组合内置对象：Math Date Array
 复杂内置对象：Funtion RegExp
 
1.Number:对象
var age=10;
var salary=new Number(10);//不常用

常用函数：
num.toFixed(n);
将数值转成为字符串，并通过四舍五入保留小数点后n位，如果位数不够补0
 
2.String:对象
var str1="abc";
var str2=new String("abc");	//不常用

常用属性与函数：
length;返回字符串长度
toUpperCase();小转大
toLowerCase();大转小
charAt(index);返回指定位置的字符串
indexOf(findStr,[fromIndex]);从指定下标位置查找字符串第一次出现的位置
lastIndexOf(findStr);返回一个指定字符串最后一次出现的位置
substring(start,[end]);截取指定下标位置的字符串（前包括后不包括）
split(byStr,[howmany]);将字符串进行拆分，得到字符串数组（几个）
replace(findStr,toStr);字符串替换（不完全替换）
 
组合内置对象：Math Date Array
 复杂内置对象：Funtion RegExp
 
3.Math对象
 常用函数：
 Math.sqrt(a);//返回数字a的平方根
 pow(a,b);//返回a的b次幂（方）
 random();//返回0-1之间的随机数
 round(x);//返回数字x四舍五入最接近的整数
 max(x,y,z…);//找出其中最大值
 min(x,y,z…);//找出其中最小值
 abs(x);//返回x的绝对值
 floor();//向下取整 
 ceil();//向上取整
 
4.Date对象
 var date=new Date();//当前系统时间
 var date1=new Date(“2009/02/05”);//指定日期时间
 
常用函数：
 getTime();//获取当前时间的毫秒值
 getDate();//获取当前日期
 getDay();//获取当前一周的第几天
 getFullYear();//获取当前的年份
 toLocalString();//转换成字符串数据（当前时间）
 setDate();//修改日期本身的值
 
5.Array对象（数组的数据类型可以不一致）
 var arr1=[10,“张三”,30,true];//常用
 var arr2=new Array(10,“张三”,30,true);
 var arr3=new Array();
 var arr4=new Array(5);//指定数组长度
 
注意：数组长度是可变的，由内部元素撑开大小
 
常用属性和函数：
 length;获取数组长度
 reverse();翻转数组
 sort([函数名]);数组排序，默认规则：数组的数据首个字母排序；自定义规则：根据传的函数名排序。
 
 
6.Function对象
 js中函数就是Function对象，函数名就是指向Function对象的引用，
 可以直接使用函数名访问函数对象，函数名()是调用函数。
 
函数定义：
方式一，使用function关键字声明一个函数	
function 函数名([参数]){
   函数体；
   return 返回值；
}
函数的返回值默认返回undefined，可以使用return返回具体的值

方式二，匿名函数
var 函数名=function([参数]){
    函数体；
   return 返回值；
}

方式三，创建一个Function对象
var 函数名=new Function("参数1","参数2","函数体;");
ps：小括号里面前面是函数的参数，后面是函数体

补充：
方式四，箭头函数（c6以后）
var 函数名=([参数])=>{函数体;}

注意:在js中没有类似于java的重载，如果方法名相同，则以最后一个为准


js如果需要实现类似于java的重载效果，可以使用arguments对象实现
arguments代表当前方法被传入的所有参数形成的参数数组
arguments.length：函数的参数个数
arguments[i]:取第i个下标的元素

补充：变量的作用域（var 无 let const）
 1.var声明的变量，可以修改，不初始化输出undefined，有作用域
        定义在函数内部--->私有变量--->整个函数体
		定义在函数外部--->全局变量--->整个js（存在变量提升）
 2.let是块级作用域，函数内部使用let定义后，对函数外部无影响
 3.const定义的变量初始化以后不可以修改--->类似于java常量
 4.没有任何关键字声明的变量--->全局变量
 
全局函数：所有js对象都可以使用
 parseInt(); parseFloat(); isNaN();
 eval(“js代码”);-----执行函数
 只接受合法的表达式和语句/只接受原始的字符串
 
 
7.RegExp正则对象
 var reg=/正则表达式/tag;
 var reg=new RegExp(“正则表达式”,“tag”);
 
tag标识：
 g(globel):设定当前匹配为全局匹配
 i(ignore):忽略匹配中的大小写检查
 
正则表达式的常用组成部分：
 () 普通
 [] 枚举，范围 [12345]/[1-5]
 {} 次数，个数
 
/a/：不完全匹配
 /^a/:以a开头
 /a$/:以a结尾{/}^a$/:完全匹配
 
常用函数：
 正则对象.text(字符串);
 判断一个字符串是否匹配该正则表达式，符合返回true，不符合返回false
 
String对象中适用正则的函数：
 str.replace(reg,toStr);//替换
 str.match(reg);//返回匹配字符串匹配正则的内容，形成数组
 str.search(reg);//返回字符串第一次匹配正则的下标
 
外部对象：
 BOM(Broswer Object Model):浏览器对象模型
 用来访问和操作浏览器窗口，是js有能力和浏览器对话，
 执行操作不与页面内容发生直接关系，没有相关标准，但被广泛支持和使用
 
 
DOM(Document Object Model):文档对象模型（html文档）
 用来操作文档，定义了访问和操作html文档的标准方法，应用程序通过DOM操作，
 来实现对html文档数据的操作，当页面被加载时，浏览器会创建页面的文档对象模型（DOM树），
 通过可编程的对象模型，js能够创建动态的html（元素、属性、样式、事件）。
 DOM常用操作：读取节点的信息、修改节点的信息、创建新节点、删除节点
 
1.BOM对象
 window是前台最大的对象，用来表示浏览器窗口。全部的js都是全局变量、全局对象和全局函数。
 比如：alert(111);等价于window.alert(111);
 
5个属性：
 document：窗口中显示的html文档
 history：浏览器窗口的历史记录
 location：窗口文件地址
 screen：浏览器当前屏幕
 navigator：浏览器相关信息
 
5个对象：
 Document:
 History:
 length:返回访问的地址个数
 back();返回上一个地址
 forward();进入下一个地址
 go(index:index<0 回退,index>0 前进)
 Location:
 href:当前窗口正在浏览的网页地址
 reload();重新载入当前页面
 Screen:
 width;实际的屏幕宽度
 height;实际屏幕的高度
 availWidth;可用的屏幕宽度
 availHeight;可用的屏幕高度
 Navigator:
 userAgent;获取浏览器相关信息的属性
 
全局函数：
 对话框：
 window.alert(msg);//提示对话框（警告框）
 window.confirm(msg);//确认对话框
 window.prompt();//文本输入框
 
打开新窗口：
window.open(url);//打开新窗口
 
 
定时器：
a.一次性定时器
在一个设定的事件间隔后执行代码，不是函数被调用之后立即执行
var t=window.setTimeout(执行语句|函数名,time);
t表示返回已经启动的定时器对象
time表示时间间隔，单位毫秒

停止定时器：clearTimeout(t);

b.周期性定时器
以一定的时间间隔循环执行代码
var t=setInterval(执行语句|函数名,time);

停止计时器：clearInterval(t);

案例：
显示时间按钮，启动时间按钮，停止时间按钮
 
 
DOM对象（DOM树）在页面加载时候由浏览器生成的整个html文档，
 操作文档中任何内容，都需要通过document
 
js可以创建动态的html（元素（节点）、属性、样式、事件）
js对DOM操作：查找、读取、修改、新增、删除
 
查找(节点)：
 1.通过id查找
 document.getElementById(“id名”);
 如果id值错误，则返回null
 
2.通过标签名查找
     document.getElementsByTagName("标签名");
	 根据指定标签名返回全部元素组成数组，
	 如果标签名错误，返回长度为0的节点数组，根据下标定位具体的节点
	 
3.通过添加name属性查找
    document.getElementsByName("name属性");
	根据指定的name返回全部的元素组成数组
	
4.通过层次查找节点
    ele.parentNode
	遵循文档的上下层次结构，查找单个父节点
	
	ele.childNodes
    遵循文档的上下层次结构，查找多个子节点

5.根据选择器查找节点
    document.querySelector("选择器");
	选择符合选择器的第一个节点
	
	document.querySelectorAll("选择器");
	选择符合选择器的所有节点

6.根据class属性查找
    document.getElementsByClassName("选择器");
	根据指定的class返回全部的元素组成的数组
 
读取、修改（文本、属性、样式…）
 innerHTML属性：
 设置或者获取位于对象起始和结束标签内的文本
 不解析html文本，将文本内容当成字符串打印
 
innerText属性：
 设置或者获取位于对象起始和结束标签内的文本
 只能获取解析之后的文本内容
 
 读取：ele.innerHTML       ele.innerText
 修改：ele.innerHTML=值    ele.innerText=值
 
读取、修改样式
 读取：ele.style
 修改：ele.style=“样式:样式值”;
 ele.style.样式属性=“样式”;
 
注意：样式属性的写法 font-size改成fontSize（驼峰写法）
 
读取、修改属性
 读取：ele.属性；
 修改：ele.属性=值；
 
  读取：ele.getAttribute(属性名);	  
  修改：ele.setAttribute(属性名,属性值);	  
 
获取、修改节点class(推荐)
 ele.className
 ele.className=值;
 
案例：
 图片的显示和隐藏
 
轮播图
 
新增节点：
 1.通过innerHTML属性给页面添加节点
 ele.innerHTML=“html代码”;
 
2.通过函数给页面添加节点
 a.创建节点
 document.createElement(“节点名称”);
 
 b.添加新节点到指定位置
 追加：新节点作为父节点的最后一个子节点添加
 父节点.appendChild(新节点);
 
 旧节点为参考点，新节点位于此节点之前添加
 父节点.insertBefore(新节点,旧节点);
 
删除节点：
 父节点.removeChild(删除的指定节点);
 
 
js的事件：
 事件是指页面元素状态改变，用户在操作鼠标或者键盘时触发的动作
 
鼠标事件：
 onclick; 鼠标单机
 ondblclick; 鼠标双击
 onmouseover; 鼠标移入
 onmouseout; 鼠标移出
 onmousedown; 鼠标按下
 onmouseup; 鼠标抬起
 
键盘事件： e.keyCode 键盘键码值
 onkeydown 键盘按键按下
 onkeyup 键盘按键抬起
 
状态事件：
 onfocus 获取焦点
 onblur 失去焦点
 onchange 选择（下拉框、单选框、复选框）
 onsubmit 表单提交
 onload 加载
 
事件的定义：
 方式一，在元素上添加对应的事件
 如：
 
方式二，在js中直接给元素节点添加事件
 元素节点.事件名=function(){}
 
方式三，元素节点.事件名=函数名；
 
event对象
 任何事件触发之后都会产生一个event对象
 
事件冒泡：
 若子节点和父节点有相同的事件，子节点会向上触发父节点的同名事件
 
取消事件冒泡：e.cancelBubble=true;
 
**
 js自定义对象
 自定义对象是一种特殊的数据类型，有属性和方法封装而成
 
属性：指与对象有关的值，访问方式：对象名.属性名
 方法：指对象可以执行的行为或者可以完成的功能
 访问方式：对象名.方法名
 
创建自定义对象的三种方式：
 方式一：直接创建对象（直接创建Object对象）
 var user=new Object();
 
方式二："构造器"创建对象
 
方式三：JSON创建对象（JSON是一个轻量级数据交换格式）
 JSON使用属性名：属性值的方式定义，所有的名称都要用双引号引起来，多个属性直接用逗号隔开