下面由TP5教程栏目给大家介绍在百度云主机上部署thinkphp5.1的注意事项，希望对需要的朋友有所帮助！thinkphp5.1部署在百度云主机的注意事项网站建好了，找了一圈好点的云主机部署，首先看的是openshift，虽然有免费的支持，但是限制很多，且部署相当麻烦。正好看到最近百度云主机做活动，于是搞了一个bch玩一玩。但是也遇到很多坑，加上百度云主机对应的支持文档写的简单随意，也是遇到不少麻烦，整理出来，供参考。1、程序文件上传位置需要把你的程序根目录文件下的文件和文件夹上传到云主机对应的/webroot目录下，/webroot下此时已经有一些系统自动生成的文件，没关系，直接把你的文件内容（注意不是你的程序文件的根目录这一个文件夹，而是根目录下的所有内容）上传到这里就可以了。2、首页无法进入的问题无法进入自己的首页，主要因为从是thinkphp5开始，入口页面index.php被放在了public目录下了，所以，nginx这时候找不到入口文件，所以进步了主页。这时候有两种处理办法：第一，是将你的入口文件从public下copy到webroot下面，这里需要注意修改你入口文件中的配置，比如：123// 定义应用目录 define('APP_PATH', __DIR__ . '/../application/'); require __DIR__ . '/../thinkphp/start.php';改为1234// 应用目录define('APP_PATH', __DIR__.'/application/');// 加载框架引导文件require './thinkphp/start.php';由于这里涉及到修改框架结构，本着尽量少改动的想法，我没有选择这种做法第二，在webroot目录下新建index.php文件，增加一句代码即可12<?phprequire './public/index.php';这样就实现了通过新添加引导文件引导到我们正确的入口文件的目的，OK，这个时候你再试下，程序正常进入首页3、只有首页能进入，其他页面404无法找到文件主要是因为在thinkphp中做了url的重写PATHINFO，隐藏了入口文件，所以你在你的apache服务器中是没有感知，http://localhost/index.php 与 http://localhost 是一样的效果，但是在云虚拟机中，用的是nginx，这个时候，你的入口文件就隐藏不了了，如果要隐藏，就会报错404无法找到文件。要么你在处理时候注意加上入口文件，要么做url重写。在webroot下新建bcloud_nginx_user.conf文件，代码如下：123456location / {   if (!-e $request_filename) {  rewrite  ^(.*)$  /index.php?s=/$1  last;  break;   }}4、可能你会遇到静态文件js/css/images等文件找不到，缺少样式等问题这个时候你可以看看加载web时候，静态网页的地址是否正确，三种办法处理，一是在你的php的template.conf文件中做replace配置修改，把相应的文件做好别名；一种是重定向，在webroot下添加文件bcloud_nginx_user.conf，添加代码12345location ~ ^/(images|javascript|js|css|flash|media|static)/ {        root /home/bae/app/htdocs;        #过期30天，静态文件不怎么更新，过期可以设大一点，如果频繁更新，则可以设置得小一点。        expires 30d;    }或者第三种办法，bcloud_nginx_user.conf种添加代码如下1234location / {root /home/bae/app/public;index index.php index.html index.htm;}以上就是在百度云主机上部署thinkphp5.1的注意事项的详细内容

下面由thinkphp框架教程栏目给大家介绍TP6中常用的脚手架命令，希望对需要的朋友有所帮助！1、创建中间件：1php think make:middleware /admin/Upgrade/admin/Upgrade 为admin目录下创建Upgrade.php文件的中间件2、创建控制器：1php think make:controller admin@Blog创建admin模块下的Blog控制器：3、查看路由列表1php think route:list admin查看admin模块下的路由：常见命令一览：123456789101112131415161718192021222324指令 build 自动生成应用目录和文件help 帮助list 指令列表clear 清除缓存指令run 启动PHP内置服务器version 查看当前框架版本号make:controller 创建控制器类make:model 创建模型类make:command 创建指令类文件make:validate 创建验证器类make:middleware 创建中间件类make:event 创建事件类make:listener 创建事件监听器类make:subscribe 创建事件订阅者类make:service 创建系统服务类optimize:autoload 生成类库映射文件optimize:config 生成配置缓存文件optimize:schema 生成数据表字段缓存文件optimize:facade 生成Facade注释route:build 生成注解路由route:list 查看路由定义service:discover 自动注册扩展包的系统服务vendor:publish 自动生成扩展的配置文件以上就是TP6常用的脚手架命令的详细内容

下面由thinkphp框架教程栏目给大家介绍Thinkphp中eq,neq,gt,lt等表达式缩写，希望对需要的朋友有所帮助！Thinkphp中eq,neq,gt,lt等表达式缩写eq 等于 equalneq 不等于gt 大于 greater thanegt 大于等于lt 小于 less thanelt 小于等于like LIKEbetween BETWEENnotnull IS NUT NULLnull IS NULL/*thinkphp在另一个问题中的回帖*/egf 是表示数据库的字段比较，而非字符串比较例如：$map['name'] = array('eq','label'); 和 $map['name'] = array('eqf','label');分别代表 name = 'label' 和 name = label同样的道理，gt lt 等其他表达式也可以在后面添加f来表示同样的功能~以上就是Thinkphp中eq、neq、gt、lt等表达式缩写的详细内容

下面由Laravel教程栏目给大家laravel高并发之抽奖秒杀解决方案，希望对需要的朋友有所帮助！测试1.8核16G的服务器Jmeter并发2000注意不要在一台机子上测，因为网络的原因，本机上测并发1000不用锁也是正常的。可以在阿里云买台测试机1.mysql共享锁版sql加共享锁，stock字段减1。返回成功表示成功，返回失败表示自减失败。stock字段是无符号的迁移文件1234567891011121314151617181920212223242526272829303132<?php use Illuminate\Support\Facades\Schema;use Illuminate\Database\Schema\Blueprint;use Illuminate\Database\Migrations\Migration; class CreateStockTestTable extends Migration{    /**     * Run the migrations.     *     * @return void     */    public function up()    {        Schema::create('stock_test', function (Blueprint $table) {            $table->increments('id');            $table->integer('stock')->default(0)->comment('库存1');            $table->timestamps();        });    }     /**     * Reverse the migrations.     *     * @return void     */    public function down()    {        Schema::dropIfExists('stock_test');    }}代码123456789101112131415161718192021222324$model = new \App\Models\StockTest();$id = $request->input('id',1); try {    // 手动开始事务    DB::beginTransaction();    // sql加共享锁，stock字段减1。返回成功表示成功，返回失败表示自减失败。stock字段是无符号的    $is = DB::table('stock_test')->lockForUpdate()->increment('stock',-1);    if($is)    {        log_info('id='.$id.'库存减1');        // 提交事务        DB::commit();        return response('成功',200);    }    else    {        return response('失败',201);    }} catch (\Exception $exception) {    // 回滚事务    DB::rollBack();    return response('失败',201);}2.reids队列1.lpush加入队列2.lpop弹窗队列，成功返回对应值，不存在返回null以上就是laravel高并发之抽奖秒杀解决方案的详细内容

1.laravel 7.0 默认连接mysql,同时项目需要连接sql servel(另一个系统应用)$users = DB::connection(‘php_sqlsrv’)->select(…); 出现各种错误。个人的PHP原生代码解决方案：1.配置 php.ini文件 加入 PHP版本对应的动态库，去官方下载。extension=php_pdo_sqlsrv_73_nts.dllextension=php_sqlsrv_73_nts.dll2.安装驱动 因为我用的是windows server2016, 所以驱动一定要看到是否支持.1[这个是下载地址](https://docs.microsoft.com/zh-cn/sql/connect/odbc/download-odbc-driver-for-sql-server?view=sql-server-ver15 "这个是下载地址")3.重启WAMP, php -m 命令查看是否有 php_sqlsrv,页面用 phpinfo()也可以查看。1注意:windows环境一定要看好你的PHP版本，和path 的默认路径是不是你当前PHP版本对应上，否则你就会采坑。连接数据库1$db = new \PDO("sqlsrv:Server=ip,1433;Database=sqlname", "username", "pw");后面就是各种玩了1234$query = "Select * from table ";$res = $db->prepare($query);$res->execute();$tmp=$res->fetchAll(\PDO::FETCH_ASSOC);推荐教程：《Laravel教程》以上就是Laravel 连接 SQL Server 解决方案的详细内容

下面由thinkphp框架教程栏目给大家介绍thinkphp6中获取api请求地址中的参数的5种方法，希望对需要的朋友有所帮助！第一种方法tp6跟tp5不同的地方，在于tp6继承Baseconroller这个控制器，所以，我们可以直接使用Baseconroller里面的request方法。123public function show(){    dump($this->request->param("abc",2,'intval'));    }参数解析name 参数名称default 默认值filter 将获取到的参数转换为整型第二种方法不用继承BaseContoller通过在方法内传入Request对象第三第四种第五种 使用人面模式中的request个人觉得，第一种方法是tp6新增的，那么，我们不妨在实际开发过程中使用，因为使用它也许会更加的方便，比如，判断是不是get请求或者是其他请求都非常的简单以上就是thinkphp6中5种方法获取api请求地址中的参数的详细内容

下面由thinkphp框架教程栏目给大家介绍thinkphp5.0极速搭建restful风格接口层实例，希望对需要的朋友有所帮助！下面是基于ThinkPHP V5.0 RC4框架，以restful风格完成的新闻查询（get）、新闻增加（post）、新闻修改（put）、新闻删除（delete）等server接口层。1、下载ThinkPHP V5.0 RC4版本；2、配置虚拟域名（非必须，只是为了方便）；Apache\conf\extra\httpd-vhosts.conf12345678910<VirtualHost *:80>    DocumentRoot "D:/webroot/tp5/public"    ServerName www.tp5-restful.com    <Directory "D:/webroot/tp5/public">    DirectoryIndex index.html index.php     AllowOverride All    Order deny,allow    Allow from all    </Directory></VirtualHost>3、开启伪静态支持.htaccess文件apache方法：a)在conf目录下httpd.conf中找到下面这行并去掉#1LoadModule rewrite_module modules/mod_rewrite.sob)将所有AllowOverride None改成AllowOverride Allpublic\.htaccess文件内容：12345678<IfModule mod_rewrite.c>Options +FollowSymlinks -MultiviewsRewriteEngine on RewriteCond %{REQUEST_FILENAME} !-dRewriteCond %{REQUEST_FILENAME} !-fRewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]</IfModule>4、创建测试数据tprestful.sql1234567891011121314151617181920212223242526---- 数据库: `tprestful`-- -- -------------------------------------------------------- ---- 表的结构 `news`-- CREATE TABLE IF NOT EXISTS `news` (  `id` int(10) unsigned NOT NULL AUTO_INCREMENT,  `title` varchar(255) NOT NULL,  `content` text NOT NULL,  PRIMARY KEY (`id`)) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='新闻表' AUTO_INCREMENT=1; ---- 转存表中的数据 `news`-- INSERT INTO `news` (`id`, `title`, `content`) VALUES(1, '新闻1', '新闻1内容'),(2, '新闻2', '新闻2内容'),(3, '新闻3', '新闻3内容'),(4, '房价又涨了', '据新华社消息：上海均价环比上涨5%');5、修改数据库配置文件application\database.php1234567891011121314151617181920212223242526272829303132333435363738394041<?phpreturn [    // 数据库类型    'type'           => 'mysql',    // 服务器地址    'hostname'       => '127.0.0.1',    // 数据库名    'database'       => 'tprestful',    // 用户名    'username'       => 'root',    // 密码    'password'       => '123456',    // 端口    'hostport'       => '',    // 连接dsn    'dsn'            => '',    // 数据库连接参数    'params'         => [],    // 数据库编码默认采用utf8    'charset'        => 'utf8',    // 数据库表前缀    'prefix'         => '',    // 数据库调试模式    'debug'          => true,    // 数据库部署方式:0 集中式(单一服务器),1 分布式(主从服务器)    'deploy'         => 0,    // 数据库读写是否分离 主从式有效    'rw_separate'    => false,    // 读写分离后 主服务器数量    'master_num'     => 1,    // 指定从服务器序号    'slave_no'       => '',    // 是否严格检查字段是否存在    'fields_strict'  => true,    // 数据集返回类型 array 数组 collection Collection对象    'resultset_type' => 'array',    // 是否自动写入时间戳字段    'auto_timestamp' => false,    // 是否需要进行SQL性能分析    'sql_explain'    => false,];6、定义restful风格的路由规则，application\route.php12345678910<?phpuse think\Route;Route::get('/',function(){    return 'Hello,world!';});Route::get('news/:id','index/News/read');   //查询Route::post('news','index/News/add');       //新增Route::put('news/:id','index/News/update'); //修改Route::delete('news/:id','index/News/delete'); //删除//Route::any('new/:id','News/read');        // 所有请求都支持的路由规则7、新建模型application\index\model\News.php1234567<?phpnamespace app\index\model;use think\Model;class News extends Model{    protected $pk = 'id';    //protected static $table = 'news';}8、新建控制器application\index\controller\News.php123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<?phpnamespace app\index\controller;use think\Request;use think\controller\Rest; class News extends Rest{    public function rest(){        switch ($this->method){            case 'get':     //查询                $this->read($id);                break;            case 'post':    //新增                $this->add();                break;            case 'put':     //修改                $this->update($id);                break;            case 'delete':  //删除                $this->delete($id);                break;                     }    }    public function read($id){        $model = model('News');        //$data = $model::get($id)->getData();        //$model = new NewsModel();        $data=$model->where('id', $id)->find();// 查询单个数据        return json($data);    }         public function add(){        $model = model('News');        $param=Request::instance()->param();//获取当前请求的所有变量（经过过滤）        if($model->save($param)){            return json(["status"=>1]);        }else{            return json(["status"=>0]);        }    }    public function update($id){        $model = model('News');        $param=Request::instance()->param();        if($model->where("id",$id)->update($param)){            return json(["status"=>1]);        }else{            return json(["status"=>0]);        }    }    public function delete($id){                 $model = model('News');        $rs=$model::get($id)->delete();        if($rs){            return json(["status"=>1]);        }else{            return json(["status"=>0]);        }    }}9、测试a)、访问入口文件，默认在public\index.phpb)、客户端测试restful的get、post、put、delete方法client\client.php 12345678910111213141516171819202122232425262728<?phprequire_once './ApiClient.php'; $param = array(  'title' => '房价又涨了',  'content' => '据新华社消息：上海均价环比上涨5%');$api_url = 'http://www.tp5-restful.com/news/4'; $rest = new restClient($api_url, $param, 'get');$info = $rest->doRequest();//$status = $rest->status;//获取curl中的状态信息  $api_url = 'http://www.tp5-restful.com/news'; $rest = new restClient($api_url, $param, 'post');$info = $rest->doRequest(); $api_url = 'http://www.tp5-restful.com/news/4'; $rest = new restClient($api_url, $param, 'put');$info = $rest->doRequest(); echo '<pre/>';print_r($info);exit; $api_url = 'http://www.tp5-restful.com/news/4'; $rest = new restClient($api_url, $param, 'delete');$info = $rest->doRequest();?>请求工具类client\ApiClient.php123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175<?phpclass restClient{  //请求的token  const token='yangyulong';     //请求url  private $url;       //请求的类型  private $requestType;       //请求的数据  private $data;       //curl实例  private $curl;     public $status;     private $headers = array();  /**   * [__construct 构造方法, 初始化数据]   * @param [type] $url     请求的服务器地址   * @param [type] $requestType 发送请求的方法   * @param [type] $data    发送的数据   * @param integer $url_model  路由请求方式   */  public function __construct($url, $data = array(), $requestType = 'get') {           //url是必须要传的,并且是符合PATHINFO模式的路径    if (!$url) {      return false;    }    $this->requestType = strtolower($requestType);    $paramUrl = '';    // PATHINFO模式    if (!empty($data)) {      foreach ($data as $key => $value) {        $paramUrl.= $key . '=' . $value.'&';      }      $url = $url .'?'. $paramUrl;    }           //初始化类中的数据    $this->url = $url;           $this->data = $data;    try{      if(!$this->curl = curl_init()){        throw new Exception('curl初始化错误：');      };    }catch (Exception $e){      echo '<pre>';      print_r($e->getMessage());      echo '</pre>';    }       curl_setopt($this->curl, CURLOPT_URL, $this->url);    curl_setopt($this->curl, CURLOPT_RETURNTRANSFER, 1);    //curl_setopt($this->curl, CURLOPT_HEADER, 1);  }       /**   * [_post 设置get请求的参数]   * @return [type] [description]   */  public function _get() {     }       /**   * [_post 设置post请求的参数]   * post 新增资源   * @return [type] [description]   */  public function _post() {       curl_setopt($this->curl, CURLOPT_POST, 1);       curl_setopt($this->curl, CURLOPT_POSTFIELDS, $this->data);         }       /**   * [_put 设置put请求]   * put 更新资源   * @return [type] [description]   */  public function _put() {           curl_setopt($this->curl, CURLOPT_CUSTOMREQUEST, 'PUT');  }       /**   * [_delete 删除资源]   * delete 删除资源   * @return [type] [description]   */  public function _delete() {    curl_setopt($this->curl, CURLOPT_CUSTOMREQUEST, 'DELETE');     }       /**   * [doRequest 执行发送请求]   * @return [type] [description]   */  public function doRequest() {    //发送给服务端验证信息    if((null !== self::token) && self::token){      $this->headers = array(        'Client-Token:'.self::token,//此处不能用下划线        'Client-Code:'.$this->setAuthorization()      );    }         //发送头部信息    $this->setHeader();       //发送请求方式    switch ($this->requestType) {      case 'post':        $this->_post();        break;         case 'put':        $this->_put();        break;         case 'delete':        $this->_delete();        break;         default:        curl_setopt($this->curl, CURLOPT_HTTPGET, TRUE);        break;    }    //执行curl请求    $info = curl_exec($this->curl);       //获取curl执行状态信息    $this->status = $this->getInfo();    return $info;  }     /**   * 设置发送的头部信息   */  private function setHeader(){    curl_setopt($this->curl, CURLOPT_HTTPHEADER, $this->headers);  }     /**   * 生成授权码   * @return string 授权码   */  private function setAuthorization(){    $authorization = md5(substr(md5(self::token), 8, 24).self::token);    return $authorization;  }  /**   * 获取curl中的状态信息   */  public function getInfo(){    return curl_getinfo($this->curl);  }     /**   * 关闭curl连接   */  public function __destruct(){    curl_close($this->curl);  }}完整代码从我github下载：https://github.com/phper-hard/tp5-restful以上就是thinkphp5.0极速搭建restful风格接口层（实例解析）的详细内容

破解ps时找不到amtlib.dll怎么办原因："amtlib.dll"文件是在安装文件夹中。1、在开始菜单中选择“Photoshop CS6”程序，双击打开。这时图标是未破解版的，如图所示。2、打开程序之后，即可关闭。然后再从下载的压缩包找到“32位64位破解补丁.zip”压缩包，解压打开。3、解压以后，根据自己系统的情况选择32或者64文件夹（是win7 32位系统，所以我选择32），双击打开，按“Ctrl+C”复制【amtlib.dll】。4、打开Photoshop CS6的安装文件夹，将【amtlib.dll】粘贴进去，替换掉原来的【amtlib.dll】。5、这样就成功破解了，再运行Photoshop CS6软件，就可以了。推荐教程：《ps教程》以上就是破解ps时找不到amtlib.dll怎么办的详细内容

这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。虽然我们我们在前端工作中，对于2D、3D动画效果一般来说都用不上，基本上都是用JS或jQ来完成这些动画效果，但是最基础的这些你是否已经忘记了呢？昨天重温了一下这些东西，顺手写了两个小例子一、使用css画个心首先 在HTML中定义一个div，1<div class="heart"></div>只需要一个p即可，我使用伪元素来画出；12345678910111213141516171819202122232425262728293031<style>      /* 基于父级定位 */  .heart{   position: relative;  }  /* 使用伪元素画出两个图像,使用图形拼接来造出一个心 */  .heart::after,  .heart::before{      content: "";      position: absolute;      top: 100px;      left: 0;      right: 0;      margin: auto;      width: 50px;      height: 80px;      background: red;      /* borde-radius 有四个值 分别对应四个角，分别对应 左上 右上 右下 左下 */      border-radius: 50px 50px 0 0;         /* 旋转元素，两个一起旋转。等下只需要调动一个即可 */      transform: rotate(-45deg);      transform-origin: 0 100%;          }  /* 旋转元素 使它和before伪元素 拼接成一个心 */  .heart::after{      left: -100px;      transform: rotate(45deg);      transform-origin: 100% 100%;  }  </style>通过以上代码我们就得到了一个红红火火的心二、使用css画一个太极图，并且加上动画 使它自动旋转和上面画心形 一样 我依然使用的是伪元素来写的先定义一个div，取名为 taiji1<div id="taiji"></div>然后再用伪元素 且看我是如何把它给造出来，话不多说，直接上代码12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<style type="text/css">        #taiji {            position: relative;            width: 200px;            height: 100px;            background: white;            border-color: black;            border-style: solid;            border-width: 4px 4px 100px 4px;                  /*变成圆形*/            border-radius: 50%;                    margin: 100px auto;               /* 定义动画 名称 时长  匀速 无限循环播放 */            animation: myfirst 4s linear infinite;                     }          #taiji::before,        #taiji::after {            content: " ";            position: absolute;            top: 50%;            left: 0;            width: 25px;            height: 25px;            background: white;            border: 38px solid black;                         border-radius: 50%;        }          #taiji::after {            left: 50%;            background: black;            border-color: white;        }          /* 定义动画 */          @keyframes myfirst {            0% {                                 transform: rotate(0deg);            }            100% {                            transform: rotate(360deg);            }          }    </style>效果如下：相关文章推荐：如何使用纯CSS实现一头绿猪的效果css怎么实现图片放大？(酷炫特效示例）以上就是HTML和CSS3中的2D、3D结合实现动画效果的详细内容

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071<!DOCTYPE html><html><head><meta charset="UTF-8"><title>:用表格布局来实现用户注册表单</title></head><body><form action="" method="post"><table border="0" cellspacing="0" cellpadding="8" width="400" bgcolor="powderblue"><caption><h2>用户注册</h2></caption><tr><td colspan="2"><hr></td></tr>  <!-- 此行代码就是画一条分隔线没有其它用处 --><tr><td width="60"><label for="name">邮箱:</label></td><td width="300"><input type="text" id="name" name="name" value="" placeholder="example@mail.com" size="30" width="200"></td></tr><tr><td><label for="password">密码:</label></td><td><input type="text" id="password" name="name" value="" placeholder="字母+数字不少于10位" size="30"></td></tr><tr>  <!-- 如何设置label标签,点击时会导致第一个控件被选中 --><td>性别:</td> <!-- 不需要进入焦点 --><td><input type="radio"  name="sex" value="male">男<input type="radio"  name="sex" value="female">女<input type="radio"  name="sex" value="secret" checked="">保密</td></tr><tr><td>兴趣:</td>   <!-- 不需要进入焦点 --><td><input type="checkbox" name="happy[]" value="html">HTML<input type="checkbox" name="happy[]" value="css">CSS<input type="checkbox" name="happy[]" value="javascript">JavaScript<input type="checkbox" name="happy[]" value="php" checked="">PHP</td></tr><!-- tr[align="center"]>(td>label[for="level"]{级别:}+td>select[id="level" name="level"]>option[value=""]*3) --><tr><td><label for="level">级别:</label></td><td><select name="level" id="level"><option value="">我是零基础的小白啦</option><option value="" selected="">已经入门啦</option><option value="">做过一些项目</option><option value="">已经是大神级别</option></select></td></tr><tr><td><label for="photo">头像:</label></td><td><img src="../images/13.png" height="30"><input type="file" id="" name="photo" accept="image/*"></td></tr><tr><td valign="middle"><label>简介:</label></td><td><textarea name="comment" id="comment" rows="5" cols="40" placeholder="文明上网,理性发言"></textarea></td></tr><tr><td colspan="2"><hr><input type="submit" name="submit" value="提交">&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset" value="重填"></td></tr></table></form></body></html>以上就是html用表格布局来实现用户注册表单实例的详细内容

项目中经常会出现的一种情况，有一个列表，譬如是案例列表，点击列表中的某一项，跳转至详情页面。详情是根据所点击的某条记录生成的，因为案例和具体的详情页面，都是用户后期自行添加的，我们开始编写时，不可能穷尽。因此跳转页面时，我们需要传递一个参数过去，这样我们才能通过这个参数进行数据请求，然后根据后台返回的数据来生成页面。因此，通过a标签跳转的方式，肯定是行不通的。 我们经常写form表单，提交时，可以传递参数，如果使用表单，并将其隐藏起来，应该可以达到效果。除此以外，window.location.href和window.open也可以达到效果。1、通过form表单传递参数1234567891011121314151617181920212223242526272829303132333435363738<html>    <head>    <!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码-->        <meta http-equiv="content-type" content="text/html;charset=utf-8" />        <meta name="Keywords" content="关键词一，关键词二">        <meta name="Description" content="网站描述内容">        <meta name="Author" content="Yvette Lau">        <title>Document</title>        <!--css js 文件的引入-->        <!-- <link rel="shortcut icon" href="images/favicon.ico">        -->        <link rel="stylesheet" href=""/>        <script type = "text/javascript" src = "jquery-1.11.2.min.js"></script>     </head>    <body>              <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">            <input type="hidden"  name="hid" value = "" index = "lemon">             <img src = "main_jpg10.png" />            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>        </form>             <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">            <input type="hidden"  name="hid" value = "" index = "aaa">             <img src = "main_jpg10.png" />            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>        </form>        <form name = "frm" method = "get" action = "receive.html" onsubmit = "return foo()" style = "position:relative;">            <input type="hidden"  name="hid" value = "" index = "bbb">             <img src = "main_jpg10.png" />            <input type = "submit" style = "position:absolute;left:10px;top:0px;width:120px;height:40px;opacity:0;cursor:pointer;"/>        </form>    </body></html><script>    function foo(){        var frm = window.event.srcElement;        frm.hid.value = $(frm.hid).attr("index");         return true;    }</script>点击图片时，跳转至receive.html页面。页面的url变成：我们想要传的字符串已经传递了过来。然后再对当前的url进行字符串分割window.location.href.split(“=”)[1]//得到lemon我们拿到需要传来的参数之后，就可以根据这个进行下一步的处理了。除了上述通过字符串分割来获取url传递的参数外，我们还可以通过正则匹配和window.location.search方法来获取。2、通过window.location.href譬如我们点击某个列表，需要传递一个字符串到detail.html页面，然后detail.html页面根据传来的值，通过ajax交互数据，加载页面的内容。1var index = "lemon"; var url = "receive.html?index="+index; $("#more").click(function(){ window.location.href = url; });当前页面会被替换成recieve.html的页面，页面的url变为：然后我们再用上面的方法提取自己需要的参数3、通过window.location.open如果是希望打开一个新页面，而不是改变当前的页面，那么window.location.href就不适用了，此时，我们需要借助于window.location.open()来实现简单介绍有一下window.open()函数，window.open()有三个参数，第一个参数是要打开的页面的url,第二个参数是窗口目标，第三个参数是一个特定字符串以及一个表示新页面是否取代浏览器历史集中当前加载页面的布尔值，通过只需要传递第一个参数。第二个参数还可以是”_blank”,”_self”,”_parent”,”_top”这样的特殊窗口名称，”_blank”打开新窗口,”_self”实现的效果同window.location.href.继续上面的例子：1234567<script>    var index = "lemon";    var url = "receive.html?index="+index;    $("#more").click(function(){        window.open(url)    });</script>这样在点击的时候，就会打开一个新页面，页面的url地址与上面相同。由于浏览器的安全限制，有些浏览器在弹出窗口配置方面增加限制，大多数浏览器都内置有弹出窗口的屏蔽程序，因此，弹出窗口有可能被屏蔽，在弹出窗口被屏蔽时，需要考虑两种可能性，一种是浏览器内置的屏蔽程序阻止弹出窗口，那么 window.open()很可能返回Null，此时，只要监测这个返回的值就可以确定弹出窗口是否被屏蔽。1234var newWin = window.open(url);if(newWin == null){    alert("弹窗被阻止");}另一种是浏览器扩展或其他程序阻止的弹出窗口，那么window.open()通常会抛出一个错误，因此，要像准确的检测弹出窗口是否被屏蔽，必须在检测返回值的同时，将window.open()封装在try-catch块中，上面的例子中可以写成如下形式：123456789101112131415161718<script>    var blocked = false;    try{        var index = "lemon";        var url = "receive.html?index="+index;        $("#more").click(function(){           var newWin = window.open(url);           if(newWin == null){               blocked = true;           }        });    } catch(ex){        block = true;    }    if(blocked){        alert("弹出窗口被阻止");    }   </script>以上就是详解前端在html页面之间传递参数的方法的详细内容

这篇文章给大家分享的内容是SVG动态图标是如何实现的，有需要的朋友可以参考一下。    　　在 loading.io 上能看到好多效果惊艳的loading图标。它们都是用svg写成的，寥寥几行代码，比img图片更精细更节省体积，比纯dom实现要更灵活和高效。另外还可以让图标响应点击事件 。　　怎么画这些圆和方块？怎么着色？怎么动起来？ 先看看svg的基础知识，然后将上面第一个图标画出来。一、基本图形元素　　svg有一些预定义的形状元素：矩形<rect>，圆形<circle>，椭圆<ellipse>，直线<line>，折线<polyline>，多边形<polygon>，路径<path>和文本<text>。12345678910111213141516171 <!-- viewBox定义画布大小 width/height定义实际大小 --> 2 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="300" viewBox="0 0 300 300"> 3  4     <!-- 直线 (x1,y1)与(x2,y2)为两点坐标 --> 5     <line x1="0" y1="0" x2="250" y2="30" /> 6  7     <!-- 多边形 通过多个点的坐标形成封闭图形 --> 8     <polygon points="5,5 100,100 50,200" /> 9 10     <!-- 矩形 (x,y)为左上角起始点 -->11     <rect x="100" y="100" width="120" height="100" />12 13     <!-- 圆形 (cx,cy)圆心点 r半径 -->14     <circle cx="100" cy="50" r="40" stroke="black"/>15 16     <!-- 文本 (x,y)左下角坐标  -->17     <text x="0" y="20" style="font-size:16px;font-weight: bold">Try SVG</text>18 19 </svg>二、样式与效果　　svg元素的样式可以写成标签的属性，也可以写在style里面。下面是一些主要的样式属性：stroke： 笔触颜色stroke-width：笔触宽度stroke-opacity：笔触的透明度fill：填充色，即backgroundfill-opacity：填充色的透明度transform：图形变换，类似css3 transform　　svg还支持很多滤镜效果，能做渐变、阴影、模糊、图像混合等等。不需要了解那么多，例如要画几个彩色圆圈，用circle 配合fill 即可。　　注意：transform 默认以svg左上角为基点，而不是圆心或其他中心。左上角是svg坐标系原点。了解transform和坐标系统，可以参考 这里。三、辅助元素　　svg有几个辅助元素：<g> <defs> <symbol> <use>。它们不代表具体形状，而是帮助进行图形元素的分组管理、重复使用等。具体介绍可以参考 这里。<g> 元素通常用来对相关图形元素进行分组，以便统一操作，比如旋转，缩放或者添加相关样式等。<use> 实现SVG现有图形的重用，可以重用单个SVG图形元素，也可以重用<g><defs>定义的组元素。<defs> 内部定义的元素不会直接显示，可以不用事先定义样式，而是在使用<use>实例化的时候再定义。<symbol> 能够创建自己的视窗，兼具<g>的分组功能和<defs>初始不可见的特性。　　对于上面提到的transform基点问题，可以通过嵌套<g>标签并偏移<g>的位置，进而重设基点。如下画出几个水平排列的圆圈，并设置不同的缩放尺寸，得到12345678910111213141 <svg width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"> 2     <g transform="translate(20 50)"> 3         <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)" /> 4     </g> 5     <g transform="translate(40 50)"> 6         <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)" /> 7     </g> 8     <g transform="translate(60 50)"> 9         <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)" />10     </g>11     <g transform="translate(80 50)">12         <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)" />13     </g>14 </svg>四、动画的实现　　svg的动画效果是基于动画标签元素实现的：　　<animate>实现单属性的过渡效果，　　<animateTransform>实现transform变换动画效果，　　<animateMotion>实现路径动画效果。　　svg的写法很灵活，样式可以写成标签属性也可以写在style里面，动画标签可以通过xlink指定元素，也可以写在动画元素的内部。如下演示animateTransform的xlink写法：12345678910111213<svg xmlns="http://www.w3.org/2000/svg">    <rect id="animateObject" x="20" y="20" width="50" height="50" fill="blue"></rect>    <animateTransform        xlink:href="#animateObject" <!-- 指定动画元素 -->        attributeName="transform"  <!-- 需要动画的属性名称 -->        type="scale"  <!-- 指定transform属性 -->        begin="0s"    <!-- 开始时间，即延迟 -->        dur="3s"      <!-- 动画时间 -->        from="1"      <!-- 开始值 -->        to="2"        <!-- 结束值 -->        repeatCount="indefinite"   <!-- 重复方式，indefinite无限重复  -->    /></svg>　　上例的动画是A到B的过渡，要形成顺畅的循环，至少要定义三个关键点。animateTransform支持更多更灵活的属性设置：values：多个关键点的值，替代from和to，例如 values="0;1;0"keyTimes：跟values对应，各个点的时间点calcMode：动画快慢方式。discrete | linear | paced | splinekeySplines：设置运动的贝塞尔控制点，calcMode为spline时有效　　对svg动画的更详细介绍，参考 这里 。五、代码实例　　　　circle画圆，fill着色，用g标签包裹并定位，transform设置初始形变，animateTransform设置动画。现在来看代码，相信不会再是一头雾水了：12345678910111213141516171819202122<svg class="lds-message" width="80px" height="80px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">    <g transform="translate(20 50)">        <circle cx="0" cy="0" r="7" fill="#e15b64" transform="scale(0.99275 0.99275)">            <animateTransform attributeName="transform" type="scale" begin="-0.375s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>        </circle>    </g>    <g transform="translate(40 50)">        <circle cx="0" cy="0" r="7" fill="#f47e60" transform="scale(0.773605 0.773605)">            <animateTransform attributeName="transform" type="scale" begin="-0.25s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>        </circle>    </g>    <g transform="translate(60 50)">        <circle cx="0" cy="0" r="7" fill="#f8b26a" transform="scale(0.42525 0.42525)">            <animateTransform attributeName="transform" type="scale" begin="-0.125s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>        </circle>    </g>    <g transform="translate(80 50)">        <circle cx="0" cy="0" r="7" fill="#abbd81" transform="scale(0.113418 0.113418)">            <animateTransform attributeName="transform" type="scale" begin="0s" calcMode="spline" keySplines="0.3 0 0.7 1;0.3 0 0.7 1" values="0;1;0" keyTimes="0;0.5;1" dur="1s" repeatCount="indefinite"></animateTransform>        </circle>    </g></svg>相关推荐：JS如何操作svg来画图以上就是SVG动态图标是如何实现的的详细内容

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head>    <title>新建网页</title>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <meta name="description" content=""/>    <meta name="keywords" content=""/>     <script type="text/javascript">        //① 绘制地图        function Map() {            //私有成员(不会随便发生变化)            var w = 800;            var h = 400;             //成员方法，绘制地图            this.showmap = function () {                //创建p、设置css样式、追加给body                var tu = document.createElement('p');                 tu.style.width = w + "px";                tu.style.height = h + "px";                tu.style.backgroundImage = "url(./12.jpg)";                 document.body.appendChild(tu);            }        }         //② 绘制食物        function Food() {            var len = 20;            //把食物(权值)坐标声明为公开的，以便在外部访问            this.xFood = 0;            this.yFood = 0;            this.piece = null; //页面上唯一的食物对象            //绘制            this.showfood = function () {                //创建p、设置css样式、追加给body                if (this.piece === null) {                    this.piece = document.createElement('p');                    this.piece.style.width = this.piece.style.height = len + "px";                    this.piece.style.backgroundColor = "green";                    this.piece.style.position = "absolute";                     document.body.appendChild(this.piece);                }                //食物设置绝对定位(position/left/top)                //食物位置“随机”摆放                //移动步进值：20px                //食物“权值”坐标： X轴(0-39)  Y轴(0-19)                  //食物真实坐标：权值坐标 *  步进值                this.xFood = Math.floor(Math.random() * 40);  //0-39的随机数                this.yFood = Math.floor(Math.random() * 20);  //0-19的随机数                 this.piece.style.left = this.xFood * len + "px";                this.piece.style.top = this.yFood * len + "px";             }        }         //③ 小蛇        function Snake() {            var len = 20;            this.redirect = "right"; //默认向右边移动            //后期snakebody要变化，因此声明为公开的(每个蛇节：[x坐标，y坐标，颜色，蛇节对象])            this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]];            //a.绘制小蛇            this.showsnake = function () {                //遍历小蛇的各个蛇节，并依次创建即可                for (var i = 0; i < this.snakebody.length; i++) {                    //this.snakebody[i]//代表每个蛇节                    //创建蛇节p                    if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节                        this.snakebody[i][3] = document.createElement('p');                        //设置css样式(宽度、高度、颜色)                        this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px";                        this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2];                        //绝对定位及位置                        this.snakebody[i][3].style.position = "absolute";                        //把蛇节追加给body                        document.body.appendChild(this.snakebody[i][3]);                    }                    this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px";                    this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px";                }            }             //b.移动小蛇            this.movesnake = function () {                //非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标)                for (var i = 0; i < this.snakebody.length - 1; i++) {                    this.snakebody[i][0] = this.snakebody[i + 1][0];                    this.snakebody[i][1] = this.snakebody[i + 1][1];                }                if (this.redirect == "right") {                    //蛇头x坐标递增                    this.snakebody[this.snakebody.length - 1][0] += 1;                }                if (this.redirect == "left") {                    //蛇头x坐标递减                    this.snakebody[this.snakebody.length - 1][0] -= 1;                }                if (this.redirect == "up") {                    //蛇头y坐标递减                    this.snakebody[this.snakebody.length - 1][1] -= 1;                }                if (this.redirect == "down") {                    //蛇头y坐标递增                    this.snakebody[this.snakebody.length - 1][1] += 1;                }                 //判断蛇头碰到食物                //蛇头坐标                var xSnake = this.snakebody[this.snakebody.length - 1][0];                var ySnake = this.snakebody[this.snakebody.length - 1][1];                //食物坐标food.xFood/food.yFood;                if (xSnake == food.xFood && ySnake == food.yFood) {                    //吃食物增加蛇节                    var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null];                    this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去                     //原食物消失，重新生成一个食物                    food.showfood();                }                 //控制小蛇在地图范围内移动                if (xSnake < 0 || xSnake > 39 || ySnake < 0 || ySnake > 19) {                    alert('game over');                    clearInterval(mytime);                    return false;                }                //吃到自己判断(蛇头坐标与其他蛇节坐标一致)                for (var k = 0; k < this.snakebody.length - 1; k++) {                    if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) {                        alert('game over kill you by yourself');                        clearInterval(mytime);                        return false;                    }                }                 //根据新坐标绘制小蛇                this.showsnake();            }        }         window.onload = function () {            var map = new Map();            map.showmap();             food = new Food();//声明为全局的以便在该加载事件函数外部访问            food.showfood();             snake = new Snake();//声明为全局的snake对象            snake.showsnake();             //移动小蛇            //setInterval(全局变量，时间)            mytime = setInterval("snake.movesnake()", 200);             //设置键盘事件，控制器小蛇移动方向            document.onkeydown = function (evt) {                var num = evt.keyCode;//通过事件对象获得数值码，进而知道被触发键子                if (num == 38) {                    snake.redirect = "up";                }                if (num == 40) {                    snake.redirect = "down";                }                if (num == 37) {                    snake.redirect = "left";                }                if (num == 39) {                    snake.redirect = "right";                }            }        }    </script>     <style type="text/css">        body {            margin: 0;        }    </style></head><body></body></html>本文展示了JS实现简易版贪吃蛇小游戏的相关代码，更多相关内容请关注喷绘php中文网。相关推荐：简易 PHP+MySQL 分页类HTML转Excel，并实现打印，下载功能两个不用递归的树形数组构造函数以上就是JS实现简易版贪吃蛇小游戏的详细内容

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134<html>     <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />             </head>     <body link="blue" vlink="purple">        <table id="print-content" border="1" cellpadding="0" cellspacing="0" style='border-collapse:collapse;table-layout:fixed;'>            <colgroup>                <col width="80 ">                <col width="80 ">                <col width="150 ">                <col width="80 ">                <col width="150 ">                <col width="80 ">                <col width="80 ">            </colgroup>            <tr height="20" style="text-align: center;font-size:18px">                <td colspan="7">会签单</td>            </tr>            <tr height="20" style="text-align: center;font-size:14px">                <td></td>                <td colspan="2">流转</td>                <td></td>                <td colspan="3">会议</td>            </tr>            <tr height="20" style="text-align: center;font-size:14px">                <td>名称</td>                <td colspan="2">自动获取</td>                <td>编号</td>                <td colspan="3">自动获取</td>            </tr>            <tr height="20" style="text-align: center;font-size:14px">                <td>主持</td>                <td colspan="2">自动获取</td>                <td>类型</td>                <td colspan="3">自动获取</td>            </tr>            <tr height="20" style="text-align: center;font-size:14px">                <td>人</td>                <td colspan="2">自动获取</td>                <td>日期</td>                <td colspan="3">自动获取</td>            </tr>            <tr height="100" style="text-align: center;font-size:14px">                <td rowspan="5">内容</td>                <td colspan="6" rowspan="5">自动获取</td>            </tr>            <tr/>            <tr/>            <tr/>            <tr/>            <tr height="20" style="text-align: center;font-size:14px">                <td>备注</td>                <td colspan="6">自动获取</td>            </tr>            <tr height="24" style="text-align: center;font-size:16px">                <td colspan="7">意见</td>            </tr>            <tr height="24" style="text-align: center;font-size:14px">                <td>序号</td>                <td>人</td>                <td>部门</td>                <td>意见</td>                <td>时间</td>                <td>节点</td>                <td>状态</td>            </tr>            <tr height="20" style="text-align: center;font-size:14px">                <td>1</td>                <td>顾</td>                <td>办公室</td>                <td>同意！</td>                <td>2018/5/14 15:21</td>                <td></td>                <td>已提交</td>            </tr>        </table>        <!-- 下载方法1.超链接_导出文件-->        <a id="print-click">超链接_导出表格</a>        <!-- 下载方法2.引入文件保存js-->        <input type="button" onclick="download()" value="函数_导出表格"></input>        <input type="button" onclick="printout()" value="打印"></input>        <!-- 下载方法2.引入文件保存js-->        <script type="application/javascript" src="js/FileSaver.js" ></script>        <script>            // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码            var html = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";            // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象            var blob = new Blob([html], {                type: "application/vnd.ms-excel"            });            var a = document.getElementById("print-click");            // 利用URL.createObjectURL()方法为a元素生成blob URL            a.href = URL.createObjectURL(blob);            // 设置文件名，目前只有Chrome和FireFox支持此属性            a.download = "会签单.xls";             function download() {                debugger                    // 使用outerHTML属性获取整个table元素的HTML代码（包括<table>标签），然后包装成一个完整的HTML文档，设置charset为urf-8以防止中文乱码                    var html2 = "<html><head><meta charset='utf-8' /></head><body>" + document.getElementById("print-content").outerHTML + "</body></html>";                    // 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象                    var blob2 = new Blob([html2], {                        type: "application/vnd.ms-excel"                    });                    saveAs(blob2, "应系单.xls");            };              //打印具体实现代码           function printout() {                debugger;                var newWindow;                //打开一个新的窗口                  newWindow = window.open();                // 是新窗口获得焦点                  newWindow.focus();                //保存写入内容                  var newContent = "<html><head><meta charset='utf-8'/><title>打印</title></head><body>"                newContent += document.getElementById("print-content").outerHTML;                newContent += "</body></html>"                // 将HTML代码写入新窗口中                  newWindow.document.write(newContent);                newWindow.print();                // close layout stream                 newWindow.document.close();                //关闭打开的临时窗口                newWindow.close();                return false;           };        </script>    </body> </html>本文讲解了HTML转Excel，并实现打印，下载功能，更多相关内容请关注php中文网。相关推荐：简易 PHP+MySQL 分页类php生成二维码的三种方法两个不用递归的树形数组构造函数以上就是HTML转Excel，并实现打印，下载功能的详细内容

这篇文章主要介绍了html5 canvas简单封装一个echarts实现不了的饼图的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧说明我用echars很久了，如果出现如上图所示样式的饼图，我用echarts很难实现，官方给的文档没有这种模式的饼图。试过用d3和canvas分别画饼图，因为本人对canvas比较熟悉和d3还要引入插件，本着轻量化的原则，所以采用canvas封装。官方饼图两种模式：（1）半径模式（2）面积模式实现过程（1）封装的函数如下：1234567891011121314151617181920212223242526272829303132333435363738function drawCircle(canvasId, option) {    const color_arr = option.color    let data_arr = option.data    const pi2 = Math.PI * 2;    let canvas = document.getElementById(canvasId);    let c = canvas.getContext("2d");    let startAgl = 0;    let agl;    let sum = 0;    const cW = canvas.width;    const cH = canvas.height;    for (let item of data_arr) {      sum += item.value * 1.0    }    data_arr = data_arr.map((v, i) => {      return {        name: v.name,        value: (v.value) * 1.0 / sum      }    })    for (let i = 0; i < data_arr.length; i++) {      //绘制饼图      let min = (cW > cH ? cH : cW); //获取canvas宽高的最小值      agl = data_arr[i].value * pi2 + startAgl; //终点      c.strokeStyle = color_arr[i];      c.lineWidth = data_arr[i].value * min * 0.3; // 线的粗细      c.beginPath();      c.arc(cW / 2, cH / 2, min * 0.3, startAgl, agl, false); //画圆      c.stroke();      c.closePath();      startAgl = agl;       //绘制图例      c.fillStyle = color_arr[i];      c.fillRect(cW * 0.8, 50 + 18 * i, 16, 16);      c.fillText(data_arr[i].name, cW * 0.8 + 20, 62 + 18 * i);    }  }（2）调用方式：123456789101112let color = ['#0580F2', '#FAA732', '#E1575D', '#8B73CC', '#8CD123', '#4B53BA', '#429588'];  let option = {    color: color,    data: [      { name: '20', value: '20' },      { name: '30', value: '30' },      { name: '40', value: '40' },      { name: '50', value: '50' },      { name: '60', value: '60' },    ]  }  drawCircle('myCanvas', option)以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！相关推荐：html5和css3 动态气泡按钮的实现HTML5的Canvas实现绘制曲线的方法以上就是使用html5 canvas封装一个echarts实现不了的饼图的详细内容

这篇文章主要介绍了Html屏蔽右键菜单和左键划字功能的示例的相关资料，内容挺不错的，现在分享给大家，也给大家做个参考。禁止右键菜单1<body oncontextmenu=self.event.returnValue=false>禁止左键划字复制1<body onselectstart="return false">采用CSS来控制是否可以选择文字123456.unselectable {  user-select: none;} <p>You can select me.</p><p class="unselectable">You can't select me!</p>禁止右键菜单和左键划字复制功能1<body oncontextmenu=self.event.returnValue=false onselectstart="return false">以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！相关推荐：通过HTML设置超链接字体的颜色和点击后的字体颜色去掉HTML中Inline-Block的空白的方法以上就是如何使用Html屏蔽右键菜单和左键划字功能的详细内容

下面通过本文给大家分享HTML5操作WebSQL数据库的实例代码，感兴趣的朋友一起看看吧HTML代码：12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667<!DOCTYPE html><html>    <head lang="en">        <meta charset="UTF-8">        <title>列车时刻表查询</title>        <meta name="viewport" content="width=device-width,initial-scale=1">        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />        <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>    </head>    <script src="js/connect.js"></script>    <body onload="init()">        <p data-role="page" id="pageone">            <p data-role="header" data-position="fixed">                <h1>列车时刻表查询</h1>            </p>            <p data-role="main" class="ui-content">                <p align="center">请给我留言</p>                <table data-role="table" class="ui-responsive">                    <thead>                        <tr>                            <th>姓名：</th>                            <th>留言：</th>                        </tr>                    </thead>                    <tbody>                        <tr>                            <td><input type="text" id="name"></td>                            <td><input type="text" id="memo"></td>                        </tr>                    </tbody>                </table>                <button type="submit" onclick="saveData()">留言</button>                <table data-role="table" data-mode="" class="ui-responsive" id="datatable">                    <!--这里是留言板的显示区域-->                </table>            </p>            <!--                作者：ceet@vip.qq.com                时间：2017-08-26                描述：底部TAB            -->            <p data-role="footer" data-position="fixed">                <p data-role="navbar">                    <ul>                        <li>                            <a href="index.html#index" data-icon="grid" class="ui-btn-active">查询</a>                        </li>                        <li>                            <a href="index.html#detail" data-rel="popup" data-icon="star">收藏</a>                        </li>                        <li>                            <a href="test.html" data-icon="comment">给我留言</a>                        </li>                    </ul>                </p>            </p>            <!--收藏功能-->            <p data-role="popup" id="myPopup" class="ui-content" data-theme="b">              <a href="#" data-rel="back" class="ui-btn ui-btn-a ui-corner-all ui-shadow ui-btn ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a>              <p>收藏成功，暂且不做处理!.</p>              <p>请点击右上角有个关闭按钮</p>              <p><b>提示：</b> 你也可以点击弹窗的外部区域来关闭弹窗。</p>            </p>        </p>    </body></html>JS代码：1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677/** * HTML5 操作本地WebSQL数据库 * 作者：汪政 * 时间：2017/08/26 15：03：19 */var datatable = null;var db = openDatabase("MyData", "", "My Database", 1024 * 100);//初始化函数方法function init() {    datatable = document.getElementById("datatable");    showAllData();}//首先移除乱七八糟的东西function removeAllData() {    for(var i = datatable.childNodes.length - 1; i >= 0; i--) {        datatable.removeChild(datatable.childNodes[i]);    }    var tr = document.createElement("tr");    var th1 = document.createElement("th");    var th2 = document.createElement("th");    var th3 = document.createElement("th");    th1.innerHTML = "姓名";    th2.innerHTML = "留言";    th3.innerHTML = "时间";    tr.appendChild(th1);    tr.appendChild(th2);    tr.appendChild(th3);    datatable.appendChild(tr);}//显示WebSQL中的数据function showData(row) {    var tr = document.createElement("tr");    var td1 = document.createElement("td");    td1.innerHTML = row.name;    var td2 = document.createElement("td");    td2.innerHTML = row.message;    var td3 = document.createElement("td");    var t = new Date();    t.setTime(row.time);    td3.innerHTML = t.toLocaleDateString() + " " + t.toLocaleTimeString();    tr.appendChild(td1);    tr.appendChild(td2);    tr.appendChild(td3);    datatable.appendChild(tr);}//显示所有的数据function showAllData() {    db.transaction(function(tx) {        tx.executeSql("CREATE TABLE IF NOT EXISTS MsgData(name TEXT,message TEXT,time INTEGER)", []);        tx.executeSql("SELECT * FROM MsgData", [], function(tx, rs) {            removeAllData();            for(var i = 0; i < rs.rows.length; i++) {                showData(rs.rows.item(i))            }        })    })}//添加数据function addData(name, message, time) {    db.transaction(function(tx) {        tx.executeSql("INSERT INTO MsgData VALUES (?,?,?)", [name, message, time], function(tx, rs) {                alert("留言成功！");            },            function(tx, error) {                alert(error.source + "::" + error.message);            }    )    })}//调用function saveData() {    var name = document.getElementById("name").value;    var memo = document.getElementById("memo").value;    var time = new Date().getTime();    addData(name, memo, time);    showAllData();}我们有两个方法来进行软件设计：一个是让其足够的简单以至于让BUG无法藏身；另一个就是让其足够的复杂，让人找不到BUG。前者更难一些。以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！相关推荐：如何让HTML5手机端弹出遮罩菜单特效HTML5实现使用按钮控制背景音乐开关的方法以上就是如何用HTML5操作WebSQL数据库的详细内容

下面为大家带来一篇HTML制作个人简历的简单实现。挺不错的，现在就分享给大家，也给大家做个参考。一起过来看看吧简历代码：XML/HTML Code复制内容到剪贴板123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>简历</title></head> <body background="11.jpg" ><a href="top"></a><h1><center>个人简历</center></h1><table align="center" width="750" height="1500" border="0" cellpadding="0" cellspacing="0"><tr><td width="250" rowspan="2" background="22.jpg"></td><td width="500"><font face="华文隶书" size="+2"><b>【现单位】</b>淄博兜兜</font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【教育/培训经历】</b><br />⊙2011.9-2015.6   坡来干学校   本科<br />⊙2012.10-2012.11   创业培训   </font></td></tr><tr><td rowspan="9" bgcolor="#CCCCCC"><font color="#000000" face="华文行楷" size="+2"><i>姓名：  糖豆豆<br /><br />性别：男<br /><br />出生日期：1992.11.11<br /><br />入学日期：2011.09.10<br /><br />政治面貌：共青团员<br /><br />籍贯：山东省青青县<br /><br />家庭住址：山东省淄博市青青县里里镇庄庄村<br /><br />学历：本科<br /><br />专业：统计学<br /><br />级别：大四<br /><br />身体状况：健康<br /><br />婚姻状况：未婚<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />联系方式：<br /><br />手机：187*******9<br /><br />QQ：878787878<br /><br />邮箱：878787878@qq.com<br /><br />博客名：<a href="http://www.cnblogs.com/H2921306656/" target="_blank">这都不是事</a></i></font></td><td><font face="华文隶书" size="+2"><b>【任职情况】</b><br />⊙2011.9至今    宿舍舍长<br />⊙2012.10    系学生会办公室主任<br /></font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【奖励情况】</b><br />⊙2011-2012学年校优秀学生、优秀团员，校一等奖学金：<br /> ⊙2012-2013学年校优秀学生、系优秀团员，校一等奖学金：<br />⊙2013年全国大学生数学建模竞赛省二等奖;<br />⊙2011-2012学年宿舍获得校文明宿舍、温馨宿舍。<br /></font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【参加的大型活动】</b><br />⊙2013年全国大学生数学建模比赛<br />⊙2011年校消防运动会<br />⊙2013年全国大学生创新创业竞赛<br /></font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【技能专长】</b><br />⊙计算机：熟练运用Word、Excel、Power Point、Access等处理问题<br />⊙能够运用lingo、Spss等软件处理简单问题<br />\   </font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【兴趣爱好】</b><br />⊙阅读优美散文以及热血小说<br />⊙唱歌<br />⊙打篮球、羽毛球<br /></font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【自我评价】</b><br />⊙勤于思考，尝试用新方法解决问题：<br />⊙吃苦耐劳，对工作认真严谨，做事踏实稳重：<br />⊙有上进心，待人宽厚：<br />⊙乐于助人，有很强的团队合作意识：思维敏捷，有一定的独立处理问题能力。<br /></font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【人生格言】</b><br />天行健，君子以自强不息：地势坤，君子以厚德载物。   </font></td></tr><tr><td><font face="华文隶书" size="+2"><b>【求职意向】</b><br />现职：应届毕业生<br />理想职位：⊙吃苦耐劳型，如银行职员：<br />⊙团队合作意识型<br />⊙跟统计学有关的职位或者兼职：<br /></font></td></tr><tr><td align="right" valign="bottom"><font face="华文隶书" size="+1">（简历到此结束，感谢您阅览，祝您心情愉快！）</font></td></tr><br />  </table><a href="#top">返回顶端</a></body></html>效果显示：相关推荐：HTML 隐藏滚动条和去除滚动条的方法HTML5 Video/Audio播放本地文件以上就是HTML制作个人简历的简单实现的详细内容

本篇文章主要介绍HTML中浮动与清除浮动，感兴趣的朋友参考下，希望对大家有所帮助。一、float：主要目的是为了实现文本绕排图片的效果。也成了创建多栏布局最简单的方式。12<img src= “ ” /><p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>【1】文本绕排图片12P {margin: 0; border: solid 1px;}img {float: left;}【2】创建多栏布局12P {margin: 0; border: solid 1px; width: 200px; float: left;}img {float: left;}二、浮动元素脱离了文档流，其父元素也看不到他了，因为也不会包围他，就会出现子元素有高度，而父元素不会被撑起，这时候并非我们想要，下面有三种方法解决，请审时度势合理应用：12345<section><img src=" /><p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p></section><footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>12section , footer {border: solid 1px;}img {float: left;}【1】为父元素添加 overflow： hidden；强制父元素包围浮动元素这样声明的真正用途是 防止父元素被超大内容撑开，应用overflow： hidden之后，父元素依然保持其设定的宽度，超大的子内容会被容器剪切掉除此之外，overflow： hidden还有另外一个作用，即它能可靠地迫使父元素包含其浮动子元素。不能在使用下拉菜单的顶级元素上使用，否则作为其子元素的下拉菜单就不会显示了。【2】同时浮动父元素, 宽度100%与浏览器宽度同宽， 给footer设置清除浮动，使footer不会挤到section旁边去123section {border: solid 1px; float: left; width:100%}footer {border: solid 1px; clear: left}img {float: left;}不能在靠外边距自动居中的元素使用。否则不再居中。【3】添加非浮动的清除元素（伪元素）1234567.clearfix: after {　　content: "";　　display: block ;　　height: 0　　visibility: hidden;　　clear : both}三、没有父元素时，如何清除(img p 作为一组 ，没有父元素)12345678<section>　　<img src=" />　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>　　<img src=" />　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>　　<img src=" />　　<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p></section>1234567.clearfix: after {　　content: "";　　display: block ;　　height: 0  　visibility: hidden;　　clear : both}总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。相关推荐：JS简单实现浮动窗口怎么处理http被劫持浮动广告CSS实现清除浮动问题的以上就是HTML中浮动与清除浮动的详细内容

这篇文章主要介绍了javascript 中Cookie读、写与删除操作的相关资料,需要的朋友可以参考下javascript 中Cookie读、写与删除操作前言：在这个前端横行的时候，页面之间的交互需要数据的传递，有的数据通过url传参的形式可以很好地解决，但是对于部分需要改变的参数，你如说从页面A到页面B选择数据，然后从页面B将数据再传到页面A（典型的栗子就是收货地址的选择），针对这一块我是通过存储cookie来解决的。对于cookie的操作我给出了一些简单的封装，当然也借鉴了前辈们经验，自己糅合了一下，对于cookie的操作，无非是读写和删除，我们首先来看一下写的操作，有写才有读，进而进行删除等操作。123456789101112131415/** * 设置COOKIE * @param name 设置cookie的属性名 * @param value 设置cookie的属性值 * @param time  设置cookie的时间 */ function setCookie(name, value , time) {  time = time ? parseFloat(time) : 0 ;  var exp = new Date();  exp.setTime(exp.getTime() + time);  // escape 这种编码方式过时了 改用 encodeURIComponent  // document.cookie = name + "=" + escape(value) + ";expires=" + (time ? exp.toGMTString() : 'session');  document.cookie = name + "=" + encodeURIComponent(value) + ";expires=" + (time ? exp.toGMTString() : 'session');}我们有了写的操作了，那么我们再来看看对于读的操作。123456789101112131415/** * 获取cookie * @param name * @returns {null} */ function getCookie(name) {  var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");  if (arr = document.cookie.match(reg))    //unescape这种解码方式好像过时了，可以采用decodeURIComponent解码方式    //return unescape(arr[2]);     return decodeURIComponent(arr[2]);  else    return null;}接下就是对cookie的删除操作了，其实这个操作很简单，就是将cookie设置过期，cookie就自动失效了123456789101112/** * 删除cookie * @param name */ function delCookie(name) {  var exp = new Date();  exp.setTime(exp.getTime() - 1);  var cval = getCookie(name);  if (cval != null)    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();}以上就是对cookie的一些简单操作接下来我们来谈一点cookie的深层次的问题：cookie的跨域1234567891011121314151617181920212223242526Js跨域同步cookie怎么实现    document.cookie = "name=" + "value;" + "expires=" + "datatime;" + "domain=" + "" + "path=" + "/path" + "; secure"; /** * 删除cookie * value Cookie值 * expires 有效期截至(单位毫秒) * path 子目录 * domain 有效域 * secure 是否安全 */ <iframe src='http://网站:1234/test/Index' width='100' height='100' style="display:none"></iframe> /**原页面js里 window.location = "http://另外一个网站:1234/GetCookie/Index?" + document.cookie;跳到另外一个站，另外一个站获取cookie，设置cookie*/  var url = window.location.toString();//获取地址 var get = url.substring(url.indexOf("liuph"));//获取变量和变量值 var idx = get.indexOf("=");//获取变量名长度 if (idx != -1) {    var name = get.substring(0, idx);//获取变量名    var val = get.substring(idx + 1);//获取变量值    setCookie(name, val, 1);//创建Cookie  }上面是我整理给大家的，希望今后会对大家有帮助。相关文章：Node.js+Koa实现JWT用户认证步骤详解jQuery.i18n.properties如何实现js国际化标准动态加载JS文件三种方式总结以上就是javascript 中Cookie读、写与删除操作（图文教程）的详细内容